<template>
 <!-- Modal -->
 <a-modal v-model:visible="modalVisible" fullscreen title="医生账户详情" title-align="start" :footer="false"
       @cancel="handleClose" >
      <a-form :model="modalForm"    ref="modalFormRef" :auto-label-width="true">
        <div class="titlebox">
          <div class="bar"></div>
          <div class="name">关联订单</div>
        </div>
        <a-row style="margin-top: 35px;">
          <a-form :model="queryForm"  ref="queryFormRef" layout="inline">

<a-form-item field="patient_name" label="患者姓名">
  <a-input :style="{ width: '182px' }" v-model="queryForm.patient_name" placeholder="请输入患者姓名" @press-enter="handleQuery" />
</a-form-item>
<a-form-item field="mobile" label="电话号码">
  <a-input :style="{ width: '182px' }" v-model="queryForm.mobile" placeholder="请输入患者电话号码" @press-enter="handleQuery" />
</a-form-item>
<a-form-item field="inquiry_status" label="订单状态">
  <a-select  v-model="queryForm.inquiry_status" placeholder="请订单状态" :style="{ width: '182px' }">
    <!-- 1:待支付 2:待分配 3:待接诊 4:已接诊 5:已完成 6:已结束 7:已取消 -->
    <a-option :value="1">待支付</a-option>
    <a-option :value="2">待分配</a-option>
    <a-option :value="3">待接诊</a-option>
    <a-option :value="4">已接诊</a-option>
    <a-option :value="5">已完成</a-option>
    <a-option :value="6">已结束</a-option>
    <a-option :value="7">已取消</a-option>
  </a-select>
</a-form-item> 

<a-row>
        <a-form-item field="pay_range_time" label="支付时间范围">
        <a-range-picker style="width: 330px;" v-model="queryForm.pay_range_time" />
      </a-form-item>
      <a-form-item field="complete_range_time" label="完成时间范围">
        <a-range-picker style="width: 330px;" v-model="queryForm.complete_range_time" />
      </a-form-item>
      <a-form-item field="end_range_time" label="结束时间范围">
        <a-range-picker style="width: 330px;" v-model="queryForm.end_range_time" />
      </a-form-item>
      <a-form-item field="cancel_range_time" label="取消时间范围">
        <a-range-picker
          style="width: 330px"
          v-model="queryForm.cancel_range_time"
        />
      </a-form-item>
      <a-form-item field="reception_range_time" label="接诊时间范围">
        <a-range-picker
          style="width: 330px"
          v-model="queryForm.reception_range_time"
        />
      </a-form-item>
      <a-form-item field="create_range_time" label="创建时间范围">
        <a-range-picker
          style="width: 330px"
          v-model="queryForm.create_range_time"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
          <a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
        </a-space>
      </a-form-item>
      </a-row>
</a-form>
<a-divider /> 
        </a-row>
        <a-row :gutter="24" >
          <a-col :span="24">
            <a-form-item field="idCard" hide-label="true" >
       <div class="tablebox"   style="width:100%">
                   <!-- table -->
    <a-table :columns="columns" :data="tableData" 
     :scroll="{ x:1500 }"
   
      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
      :pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
      row-key="order_inquiry_id" @selection-change="(selection) => {console.log(selection)}"
      @page-change="handlePageChange" @page-size-change="handlepage_sizeChange">
      <template #doctor_id="{record,rowIndex}">
        <div>{{(rowIndex+1)+(pager.page-1)*pager.page_size}}</div>
      </template>
      <template #inquiry_pay_channel="{record}">
          <div v-if="record.inquiry_pay_channel==1">小程序支付</div>
          <div v-else-if="record.inquiry_pay_channel==2">微信扫码</div>
          <div v-else-if="record.inquiry_pay_channel==3">模拟支付</div>
      </template>
      <!-- 1:待支付 2:待分配 3:待接诊 4:已接诊 5:已完成 6:已结束 7:已取消） -->
      <template #inquiry_status="{record}">
          <div v-if="record.inquiry_status==1">待支付</div>
          <div v-else-if="record.inquiry_status==2">待分配</div>
          <div v-else-if="record.inquiry_status==3">待接诊</div>
          <div v-else-if="record.inquiry_status==4">已接诊</div>
          <div v-else-if="record.inquiry_status==5">已完成</div>
          <div v-else-if="record.inquiry_status==6">已结束</div>
          <div v-else-if="record.inquiry_status==7">已取消</div>
      </template>
      
      <template #payment_amount_total="{ record }">
        {{record.payment_amount_total}}元
      </template>
      <template #doctor_amount="{ record }">
        {{Math.floor(record.amount_total*0.75*100)/100}}元
      </template>
  
      <template #patient_name_mask="{ record }">
        <div class="ta-patient" :title="record.patient_name_mask">{{record.patient_name_mask}}({{record.patient_sex==1?'男，':'女，'}}{{record.patient_age}}岁)</div>
      </template>
      
      <template #reception_time="{ record }">
        {{ parseTime(record.reception_time) }}
      </template>
      <template #inquiry_type="{ record }">
        {{ formatInquiryType(record.inquiry_type) }}
      </template>
      <template #cancel_reason="{ record }">
        {{ formatOrderCancelReason(record.cancel_reason) }}
      </template>
      <template #entry_status="{ record }">
        {{ formatEnteyStatus(record.entry_status) }}
      </template>
      <!-- <template #action="{ record }">
        <a-space>
          <a-button v-has="'admin:sysOrderList:detail'" type="text"
            @click="handleDetail(record)"><icon-book />详情</a-button>
        </a-space>
      </template> -->
    </a-table>
       </div>
            </a-form-item>
          </a-col>
        </a-row>
       
      </a-form>
    </a-modal>
   
</template>
<script setup>
import {ref,toRefs,watch,reactive,getCurrentInstance} from 'vue';
import {getAccountOrder} from "@/api/finance/account"
import { parseTime } from '@/utils/parseTime';
import {formatInquiryType,formatOrderCancelReason,formatEnteyStatus} from "@/utils/format"
import { Message } from '@arco-design/web-vue';
const props = defineProps({
  // 是否显示
  modalVisible: {
    type: Boolean,
    default: false,
  },
  modalForm: {
    type: Object,
  },
});
const { proxy } = getCurrentInstance();
const doctor_id=ref('');
const currentPage = ref(1);
const pager = {
    total: 1,
    page: 1,
    page_size: 10,
  };
   // form
   const queryForm = reactive({});
const emits = defineEmits(['familyVisibleChange']);
const {modalVisible,modalForm} = toRefs(props);
//切换小眼睛
  const showEye = ref(false);
  const id_card_num = ref('');
  watch(()=>props.modalForm.doctor_id,()=>{
    if(props.modalForm.doctor_id){
      doctor_id.value=props.modalForm.doctor_id;
      handleGetOrder(props.modalForm.doctor_id,{...pager})
    }else{
      doctor_id.value='';
    }
  })

  watch(()=>queryForm.end_range_time,(value)=>{
  if(value){
    let[startTime,endTime]=value
    queryForm.finish_time=startTime+"&"+endTime;
  }else{
    queryForm.finish_time=''
  };
  console.log(queryForm.finish_time)
})
watch(()=>queryForm.pay_range_time,(value)=>{
  if(value){
    let[startTime,endTime]=value
    queryForm.pay_time=startTime+"&"+endTime;
  }else{
    queryForm.pay_time=''
  };
})
watch(()=>queryForm.complete_range_time,(value)=>{
  if(value){
    let[startTime,endTime]=value
    queryForm.complete_time=startTime+"&"+endTime;
  }else{
    queryForm.complete_time=''
  };
})
watch(()=>queryForm.cancel_range_time,(value)=>{
  if(value){
    let[startTime,endTime]=value
    queryForm.cancel_time=startTime+"&"+endTime;
  }else{
    queryForm.cancel_time=''
  };
})
watch(()=>queryForm.reception_range_time,(value)=>{
  if(value){
    let[startTime,endTime]=value
    queryForm.reception_time=startTime+"&"+endTime;
  }else{
    queryForm.reception_time=''
  };
})
watch(()=>queryForm.create_range_time,(value)=>{
  if(value){
    let[startTime,endTime]=value
    queryForm.created_at=startTime+"&"+endTime;
  }else{
    queryForm.created_at=''
  };
})
 
   // Table Columns
   const columns = [
    { title: '编号', dataIndex: 'doctor_id', slotName: 'doctor_id', width: '90' },
    { title: '订单编号', dataIndex: 'inquiry_no',width:200 },
  { title: '医生姓名', dataIndex: 'doctor_name',width:100  },
  { title: '就诊人', dataIndex: 'patient_name_mask',slotName:'patient_name_mask',width:200},
  { title: '实付金额', dataIndex: 'payment_amount_total',slotName:'payment_amount_total',width:100 },
  { title: '医生收益', dataIndex: 'doctor_amount',slotName:'doctor_amount',width:100 },
  { title: '支付方式', dataIndex: 'inquiry_pay_channel',slotName:  'inquiry_pay_channel'},
  { title: '订单状态', dataIndex: 'inquiry_status', slotName:'inquiry_status' },
  { title: '入账状态', dataIndex: 'entry_status', slotName:'entry_status' },
  { title: '理由', dataIndex: 'cancel_reason', slotName: 'cancel_reason' },
  { title: '接诊时间', dataIndex: 'reception_time', slotName: 'reception_time',width:200 },
  // { title: '操作', slotName: 'action',fixed: "right", width: 100  },
]
// Akiraka 20230210 关闭弹窗
const handleClose = () => {
  emits('familyVisibleChange', false);
};
const tableData=ref([]);
const handleGetOrder=(id,params={})=>{
  getAccountOrder(id,params).then(res=>{
    if(res.code==200){
      let data=res.data; 
      tableData.value=data.data;
      Object.assign(pager, { total: data.total, page: data.page, page_size: data.page_size });
    }
  })
}
  /**
   * 分页改变
   * @param {Number} [page]
   */
   const handlePageChange = (page) => {
    pager.page = page;
    // 修改当前页码
    currentPage.value = page;
    handleGetOrder(doctor_id.value,{ ...pager});
  };

  // 每页数据量
  const handlepage_sizeChange = (page_size) => {
   
    pager.page_size = page_size;
    handleGetOrder(doctor_id.value,{ ...pager});
  };
const handleQuery = async () => {
    pager.page = 1;
    const params = {
      page: pager.page,
      page_size: pager.page_size,
      ...queryForm,
    };

    handleGetOrder(doctor_id.value,params);
  };

  // 重置搜索
  const handleResetQuery = () => {
    proxy.$refs.queryFormRef.resetFields();
    handleGetOrder(doctor_id.value,queryForm);
  }
  
</script>
<style scoped>
  .cardNum {
    width: 150px;
  }
 .arco-form-item-layout-horizontal:first-child,
  .arco-form-item-layout-horizontal:nth-child(2) {
    align-items: center;
  }
  .cellbox{
    margin-top: 35px;
  }
  .cellbox .cell{
    width:50%;
    border-bottom:1px dashed #efefef;
    margin-bottom: 20px;
  }
  .cellbox .cell:first-child{
    border: none;
  }
 
  .box {
    display: flex;
    align-items: center;
  }

  .cert .arco-form-item-label-col {
    flex: 0 0 8px !important;
  }

</style>