<template>
  <div>
    <div class="questionBox" style="width: 100%;">
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号">
              <el-input v-model="form.mobile" />
            </el-form-item>
          </el-col>
          
          <el-col :span="8" style="text-align: center;">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-col>
        </el-row>
        
      </el-form>
        <div class="card-titleFr"  v-if="btnFlag">
          <a :href="downLoadUrl" style="line-height: 32px; margin-right: 15px; margin-top: 15px;" download >下载导入模板</a>
          <el-upload
            style="text-align: center;"
            accept=".xlsx"
            v-model:file-list="fileList"
            :headers="headers"
            :data="upLoadParams" 
            :show-file-list="false"
            class="upload-demo"
            :action="uploadURL+planId"
            :on-success="handleExcelSuccess"
          >
            <el-button type="primary"  class="mt-4">导入患者</el-button>
          </el-upload>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="姓名" fixed="left" width="150"/>
          
          <el-table-column prop="seatCode" label="性别" width="100">
            <template #default="scope">
              {{ scope.row.sex===1 ?'男':scope.row.sex===2?'女':'' }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="100"/>
          <el-table-column prop="mobile" label="手机号" width="200">
            <template #default="scope">
              {{ userDecryptToAsterisk(scope.row.mobile)}}
            </template>
          </el-table-column>
          <el-table-column prop="hospitalNumber" label="住院次数" width="100"/>
          <el-table-column prop="jzks" label="出院科室" width="200"/>
          <el-table-column prop="zzys" label="主管医生" width="100"/>
          <el-table-column prop="zdjb" label="出院诊断" width="200"/>
          <el-table-column prop="zgqk" label="转归情况" width="100">
            <template #default="scope">
              <span :style="{color: getZhuanguiStatus(scope.row.zgqk)}">{{ scope.row.zgqk}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="随访状态" width="100">
            <template #default="scope">
              <el-tag :type="{color: taskStatusMap[scope.row.state]?.color}">{{ taskStatusMap[scope.row.state]?.title}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sfTime" label="随访时间" width="150"/>
          <el-table-column prop="seatName" label="外呼坐席" width="100">
            <template #default="scope">
              {{ scope.row.seatName?scope.row.seatName:''}} ({{ scope.row.seatCode ? scope.row.seatCode:''}})
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style=" margin-top: 15px;"
          v-show="total > 0"
          :total="total"
          @change="changePageHandle"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getPlanpatient"
        />
        
        
    </div>
    <!-- 创建工单 -->
  <el-dialog
    v-model="centerDialogVisibleAddWorkorder"
    title="导入"
    center
    width="70%"
    :modal="true"
    :show-close="true"
  >
  </el-dialog>
  </div>
</template>

<script setup>
import PageAdd from '@/components/page-add';
import { modalConfig } from './config/modal.config';
import { usePageModal } from '@/hooks/use-page-add';
import useSelectStore from '@/store/commonSelect/common';
import { createPageData, editPageData } from '@/api/main/system/system';
import { onMounted, ref, watch } from 'vue';
import { getToken } from '@/utils/auth';
import { getPageListData } from '@/api/main/system/system';
import { userDecryptToAsterisk } from '@/utils/aes'
import { getZhuanguiStatus } from '@/utils/index'
import { ArrayToMap } from '@/utils/tools'
import { taskStatus } from "@/utils/commonDic.js"

const taskStatusMap = ArrayToMap(taskStatus, 'value');

const { proxy } = getCurrentInstance();
const props = defineProps({
  planId: {
    type: Number,
    default: 0
  },
  btnFlag:{
    type:Boolean,
    default:false
  }
});
const downLoadUrl = new URL('@/assets/downLoad/随访计划患者导入模板.xlsx', import.meta.url).href
const form = ref({
  name: '',
  mobile: '',
})
const btnFlag = ref(false)
const planId = ref()
const total = ref(0)
const formData = ref({});
const workBasicData = ref({});
const callId = ref({});
const centerDialogVisibleAddWorkorder = ref(false);
const fileList = ref([]);
const headers = ref({
    Authorization: 'Bearer ' + getToken(),
  });
const upLoadParams = ref({});
const tableData = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  plId: undefined,

})
const uploadURL = ref(import.meta.env.VITE_APP_BASE_API + '/SfPlanPatient/sfplanpatient/importPatientExcel?plId=');
const handleExcelSuccess = (response, uploadFile, uploadFiles) => {
  proxy.$modal.msgSuccess('导入成功！');
  getPlanpatient()
};
const onAddItem = () => {
  centerDialogVisibleAddWorkorder.value = true;
}
function handleSearch() {
  queryParams.value.name = form.value.name
  queryParams.value.mobile = form.value.mobile
  getPlanpatient()
}
const handleClick = () => {}
watch(props, (nweProps) => {
  btnFlag.value = nweProps.btnFlag
  console.log(btnFlag.value);
  initMethod(nweProps);
});
onMounted(() => {
  btnFlag.value = props.btnFlag
  initMethod(props);
});
function initMethod(data) {
  planId.value = data.planId
  if (planId.value) {
    getPlanpatient()
  }
}
function changePageHandle(data) {
  queryParams.value.pageNum = data
  getPlanpatient()
}
function getPlanpatient() {
  queryParams.value.plId = planId.value
  getPageListData('/SfPlanPatient/sfplanpatient',queryParams.value).then((res)=>{
    tableData.value = []
    total.value = 0
    if (res.data.length>0) {
      tableData.value = res.data
      total.value = res.total
    }

  })
}


</script>
<style scoped lang="scss">
  .questionBox{
    position: relative;
    .card-titleFr {
      color: #409EFF;
      font-size: 14px;
      margin-right: 15px;
      display: flex;
      /*position: absolute;
       top: -25px;
      right: 0px;
      z-index: 11; */
      margin-bottom: 15px;
      text-align: right;
      float: right;
    }
  }
</style>
