<template>
  <el-table border stripe :loading="loading" :data="list" ref="tableRef" height="100%">
    <el-common-column prop="time" label="时间" :width="140" />
    <el-common-column prop="deptName" label="科室" :width="160" />
    <el-common-column prop="doctorName" label="医生" :width="160" />
    <el-common-column prop="title" label="职称" :width="160" />
    <el-common-column prop="reg_fee" label="价格" :width="100">
      <template #default="{row}">
        {{row.preSettle ? row.preSettle.totalamount:'' }}
      </template>
    </el-common-column>
    <el-common-column prop="hisStatus" label="状态" :width="100">
      <template #default="{row}">
        {{PayStatus && row.hisStatus && PayStatus[row.hisStatus] ? PayStatus[row.hisStatus]:'' }}
      </template>
    </el-common-column>
    <el-common-column prop="shopname" label="门店" :width="120" />
    <el-common-column fixed="right" prop="action" label="操作" :width="80">
      <template #default="{ row }">
        <div class="text-center">
          <el-text type="primary" class="cursor-pointer" @click="showDetail(row)">详情</el-text>
        </div>
      </template>
    </el-common-column>
    <template #empty>
      <el-empty description="暂无挂号记录" />
    </template>
  </el-table>
  <reg-modal :PayStatus="PayStatus" :cardInfo="cardInfo" :visible="visible" :width="width" :data="record" @close="close"
    @change="getList" @changeHisStatus="changeHisStatus" />
</template>
<script setup lang="ts">
import { ref, onMounted,watch} from 'vue';
import { ElMessage } from "element-plus";
import dayjs from 'dayjs';
import { getPatientHlwRegList } from '@/api/hlw';
import useModal from "@/hooks/useModal";

import elCommonColumn from "@/components/el-common-column/el-common-column.vue";
import regModal from './reg-modal.vue';

const PayStatus = {
  0: "已收费",
  1: "已退费",
  5: "未收费",
  x: "已作废"
}

const props = defineProps({
  date:{type: String, default:''},
  patientId:{ type:String, default:'' },
  cardInfo:{ type: Object, default: ()=> ({}) },
  storeId:{ type:String, default:'' },
})

const loading = ref(false);
const list =ref([]);
const record =ref({});
const { close, show, visible, width } = useModal(640);

function showDetail(row) {
  record.value = {...row}
  show()
}

async function getList() {
  if(!props.patientId) {
    list.value = [];
    return
  }
  if(loading.value ) return;
  loading.value = true;
  const startTime =props.date ?  dayjs(props.date).startOf('day').valueOf() : dayjs().startOf('day').valueOf()
  const endTime = props.date ? dayjs(props.date).endOf('day').valueOf(): dayjs().endOf('day').valueOf()
  const { success, data,message } = await getPatientHlwRegList({
    patientId: props.patientId,
    cardNum: props.cardInfo.CardNum || '',
    storeId: props.storeId,
    startTime,
    endTime
  })
  loading.value = false;
 list.value = data.data && Array.isArray(data.data) ? data.data.map(i=>({
  ...i,
  time: dayjs(i.createTime).format('YYYY-MM-DD HH:mm'),
 })) : [];
 if(!success) {
  ElMessage.error(message || '获取挂号记录失败')
 }
}   

function changeHisStatus(hisStatus) {
  const index = list.value.findIndex(i=>i._id === record.value._id);
  if(hisStatus && index >= 0 ) {
    list.value[index].hisStatus = hisStatus
  }
}

onMounted(()=> {
  if(props.patientId && props.cardNum && props.storeId) {
    getList()
  } else {
    list.value = []
  }
})
watch(()=>[props.patientId, props.date], n => {
  getList()
}, {immediate:true} )

defineExpose({refresh: getList})
</script>