<template>
  <div class="container-wrapper">
<!--    <div class="search">-->
<!--      <el-form :inline="true" >-->
<!--      </el-form>-->
<!--    </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="对账结果" 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="详细信息" prop="resultDesc" width="200" show-overflow-tooltip></el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next"  v-model:current-page="pageNum"  v-model:page-size="pageSize" @change="changePageNumHandler" :total="total"/>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import {reconciliationResult} from "@/assets/config/constants.ts";
import clrType from "@/assets/config/directory/clrType.json"
import insutypes from "@/assets/config/directory/insutypes.json"
import {getKey} from "@/utils/discrotyUtil.ts";

const pageSize = ref(20);
const pageNum = ref(1);
const total  = ref(0);

interface queryParams {
  pageNum: number;
  pageSize: number;
  beginTime?: string;
  endTime?: string;
  reconciliationType?: string;
  insuranceType?: string;
  handlingInstitution?: string;
}

const changePageNumHandler =  (pageNum: number) => {
  getList()

};
interface TypeMapping {
  [key: number]: string;
}
const list = ref<any>();
const getList = () => {
  const query: queryParams = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  post("social/reconciliation/pageHistory",{query:query}).then(
      (res:any) => {
        list.value = res.list;
        total.value = res.total_count;

      }
  )
}

onMounted(() => {
  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>