<template>
  <div class="container-wrapper">
    <div class="header">
      <el-date-picker
          v-model="selectDate"
          type="daterange"
          @change="changeDate"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
      />
    </div>
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <el-table-column label="清算类别" prop="reconciliationType"></el-table-column>
        <el-table-column label="险种类型" prop="insuranceType"></el-table-column>
        <el-table-column label="经办机构" prop="handlingInstitution"></el-table-column>
        <el-table-column label="医疗费用总额" prop="totalMedicalCost"></el-table-column>
        <el-table-column label="基金支付总额" prop="totalFundPayment"></el-table-column>
        <el-table-column label="个账支付总额" prop="totalPersonalAccountPayment"></el-table-column>
        <el-table-column label="结算笔数" prop="settlementCount"></el-table-column>
        <el-table-column label="对账结果" prop="reconciliationResult">
          <template #default="scope">
            <el-tag v-if="scope.row.reconciliationResult == null" type="info">未对账</el-tag>
            <el-tag v-if="scope.row.reconciliationResult == 0" type="success">{{ reconciliationResult[0] }}</el-tag>
            <el-tag v-if="scope.row.reconciliationResult != null&&scope.row.reconciliationResult != 0" type="danger">{{
                reconciliationResult[scope.row.reconciliationResult as keyof typeof reconciliationResult] || '未知状态'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="accountRecordDo(scope.row)" link>对账</el-button>
            <el-button type="primary" @click="detailsDo(scope.row)" link>明细对账</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <DetailList ref="detailListRef"></DetailList>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {formatDateArray, getThisMonth, getToday} from "@/utils/dateUtils.ts";
import {post} from "@/utils/request.ts";
import DetailList from "@/components/social/reconciliation/DetailList.vue";
import {ElMessage} from "element-plus";
import {reconciliationResult} from "../../assets/config/constants.ts";

const selectDate = ref<any>();
const changeDate = (dates: Date[]) => {
  selectDate.value = formatDateArray(dates);
  console.log(selectDate.value);
  getList()
};

interface TypeMapping {
  [key: number]: string;
}

const accountRecordResult: TypeMapping = {
  0: "平",
  1: "不平",
  101: "中心多",
  102: "医药机构多",
  103: "数据不一致",
};
const list = ref<any>();
const getList = () => {
  post("social/reconciliation/getList", {beginTime: selectDate.value[0], endTime: selectDate.value[1]}).then(
      res => {
        console.log(res);
        list.value = res;
      }
  )
}
const accountRecordDo = (row: any) => {
  let data = {...row};
  data.beginTime = selectDate.value[0];
  data.endTime = selectDate.value[1];
  post("social/reconciliation/totalDo", {data: data}).then((res: any) => {
    ElMessage.success({
      message: res.stmtinfo.stmt_rslt_dscr,
      duration: 8000
    });
    row.reconciliationResult = res.stmtinfo.stmt_rslt
  })
}

const detailsDo = (row: any) => {
  let data = {...row};
  data.beginTime = selectDate.value[0];
  data.endTime = selectDate.value[1];
  post("social/reconciliation/detailDo", {data: data}).then((res: any) => {
    openDetailList(res)
  })
  // post("social/reconciliation/testDetailDo", {data: data}).then((res: any) => {
  //   openDetailList(res)
  // })
}

const detailListRef = ref();
const openDetailList = (list: any) => {
  detailListRef.value.open(list);
}

onMounted(() => {
  let today = getThisMonth();
  selectDate.value = [today.start, today.end];
  getList()
})

</script>
<style scoped lang="scss">

</style>