<template>
  <div class="container-wrapper">
    <div class="search">
      <el-date-picker
          v-model="selectDate"
          type="daterange"
          @change="changeDate"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="height: 100%"
      />
    </div>
    <el-table :data="list" style="width: 100%;flex: 1;min-height: 0">
      <el-table-column label="清算类别" prop="reconciliationType">
        <template  #default="scope">
         {{getKey(clrType, scope.row.reconciliationType)}}
          </template>
      </el-table-column>
      <el-table-column label="险种类型" prop="insuranceType">
        <template  #default="scope">
          {{getKey(insutypes, scope.row.insuranceType)}}
        </template>
      </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="操作">
        <template #default="scope">
          <el-button type="primary" @click="artificialReconciliation(scope.row)" link>对账</el-button>
          <el-button type="primary" @click="detailsDo(scope.row)" link>明细对账</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <DetailList ref="detailListRef"></DetailList>
  <ArtificialReconciliation ref="artificialReconciliationRef"></ArtificialReconciliation>
</template>
<script setup lang="ts">
import {nextTick, onMounted, ref} from "vue";
import {formatDateArray, getEndOfDay, getThisMonth, getToday} from "@/utils/dateUtils.ts";
import {post} from "@/utils/request.ts";
import DetailList from "@/components/social/reconciliation/DetailList.vue";
import ArtificialReconciliation from "@/components/social/reconciliation/ArtificialReconciliation.vue";
import {getKey} from "@/utils/discrotyUtil.ts";
import clrType from "@/assets/config/directory/clrType.json"
import insutypes from "@/assets/config/directory/insutypes.json"

const selectDate = ref<any>();
const changeDate = (dates: Date[]) => {
  selectDate.value = formatDateArray(dates);
  selectDate.value[1] = getEndOfDay(selectDate.value[1])
  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 => {
        list.value = res;
      }
  )
}

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)
  })
}

const detailListRef = ref();
const openDetailList = (list: any) => {
  detailListRef.value.open(list);
}
const artificialReconciliationRef = ref();
const artificialReconciliation = (row:any) => {
  let data = {...row};
  data.beginTime = selectDate.value[0];
  data.endTime = selectDate.value[1];
    nextTick(()=>{
      artificialReconciliationRef.value?.init(data);
    })
}

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

</script>
<style scoped lang="scss">
.container-wrapper {
  height: 100%;
  padding: 24px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;

  .search {
    height: 42px;
    margin-bottom: 24px;
  }
}
</style>