<template>
  <div>
    <div class="questionBox" style="width: 100%;">
      
        <div class="card-titleFr">
          <a :href="downLoadUrl" style="line-height: 32px; margin-right: 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" v-if="btnFlag"  class="mt-4">导入患者</el-button>
          </el-upload>
          
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="seatCode" label="工号"/>
          <el-table-column prop="mobile" label="手机号" >
            <template #default="scope">
              {{ userDecryptToAsterisk(scope.row.mobile)}}
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          style=" margin-top: 15px;"
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @change="getPlanpatient"
        /> -->
        <el-pagination
        style=" margin-top: 15px;"
          v-show="total > 0"
        v-model:page-size="queryParams.pageSize"
        :small="small"
        :total="total"
        @current-change="handleCurrentChange"
      />
        
        
    </div>
    <!-- 创建工单 -->
  <el-dialog
    v-model="centerDialogVisibleAddWorkorder"
    title="导入"
    center
    width="70%"
    :modal="true"
    :show-close="true"
  >
  <!-- <page-add @dataChange="getWorkBasicData" ref="pageModalRef" :defaultInfo="defaultInfo"
          :modalConfig="modalConfigRef"></page-add> -->
  </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'

const { proxy } = getCurrentInstance();
const props = defineProps({
  planId: {
    type: Number,
    default: 0
  },
  btnFlag:{
    type:Boolean,
    default:true
  }
});
const downLoadUrl = new URL('@/assets/downLoad/随访计划患者导入模板.xlsx', import.meta.url).href

const btnFlag = ref(true)
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({});
let tableData = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  plId: undefined,

})

const handleCurrentChange = (val) => {
  console.log(val, 'handleCurrentChange');
  queryParams.value.pageNum = val
  getPlanpatient()
}

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;
}
const handleClick = () => {}
// watch(props, (nweProps) => {
//   btnFlag.value = nweProps.btnFlag
//   console.log('props-initMethod', nweProps);
//   if (nweProps.planId !== props.planId) initMethod(nweProps);
// });
onMounted(() => {
  initMethod(props);
});

function initMethod(data) {
  planId.value = data.planId
  if (planId.value) {
    getPlanpatient()
  }
}
function getPlanpatient() {
  console.log(queryParams.value, '12312')
  queryParams.value.plId = planId.value
  queryParams.value.display = 1
  tableData.value = []
  getPageListData('/SfPlanPatient/sfplanpatient',queryParams.value).then((res)=>{
    console.log(res.data, 'res.data');
    
    total.value = res.total
    if (res.data.length>0) {
      tableData.value = res.data
      
    }
  })
}
const modalConfigRef = computed(() => {
  //  来源
  const processorSourceItem = modalConfig.formItems.find((item) => item.field === 'source');
  processorSourceItem.options = useSelectStore().dictSourceList;
  return modalConfig;
});

// 工单基础信息
const getWorkBasicData = (item) => {
  workBasicData.value = item;
};
defineExpose({
  getWorkBasicData,
});

// 1.处理逻辑
const newCallback = () => { };
const editCallback = () => { };
usePageModal(newCallback, editCallback);
// 2.动态添加部门和角色列表

// 3.调用hook获取公共变量和函数
const [pageModalRef, defaultInfo] = usePageModal(newCallback, editCallback);
</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>
