<template>
  <div class="container-wrapper">
    <div class="search">
      <el-date-picker
          v-model="date"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          @change="dateChangeHandler"
          style="height: 100%"
      />
    </div>
    <el-table :data="tableData" border style="width: 100%;flex: 1;min-height: 0">
      <el-table-column prop="chargeTime" label="结算时间"></el-table-column>
      <el-table-column prop="customer" label="患者" width="180"></el-table-column>
      <el-table-column prop="projectCode" label="订单号"></el-table-column>
      <el-table-column prop="source" label="结算类型" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.source == 0" type="success">门诊收费</el-tag>
          <el-tag v-if="scope.row.source == 1" type="success">门诊退费</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payType" label="支付类型" width="180">
        <template #default="scope">
          {{ payTypeMapping[scope.row.payType as keyof typeof payTypeMapping] || '未知' }}
        </template>
      </el-table-column>
      <el-table-column prop="netReceipts" label="结算金额" width="180">
        <template #default="scope">
          ￥{{ scope.row.netReceipts }}
        </template>
      </el-table-column>
      <el-table-column prop="dockerName" label="医生" width="180"></el-table-column>
      <el-table-column prop="salePersonName" label="收费员" width="180"></el-table-column>
      <el-table-column prop="type" label="交易类型" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.type == 0" type="danger">退款</el-tag>
          <el-tag v-else type="success">收费</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import {getToday, formatDateArray, getThisMonth} from "@/utils/dateUtils.ts";
import {apiConfig} from "@/assets/config/apiConfig.ts";
import {reconciliationResult} from "@/assets/config/constants.ts";

const payTypeMapping = {
  1: "医保",
  2: "微信",
  3: "支付宝",
  4: "现金",
  5: "其他",
}

const tableData = ref([])
const date = ref()
const dateChangeHandler = () => {
  date.value = formatDateArray(date.value)
  getTableData()
}


const getTableData = () => {
  post(apiConfig.ChargeListChargeLog, {beginTime: date.value[0], endTime: date.value[1]}).then((res: any) => {
    tableData.value = res
  })
}
onMounted(() => {
  const today = getThisMonth()
  date.value = [today.start, today.end]
  getTableData()
})
</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>