<template>
    <div class="app-container" ref="layout">
      <div ref="topform" class="form">
        <SearchFilter :labelWidths="310"  labelWidth="90px" size="small" @search="handleQuery"
          @reset="resetQuery" @minShowCtrol="getMaxTableHeight" @handleRules="handleRules">
          <el-form-item label="姓名" prop="patientName">
            <el-input v-model="queryParams.patientName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery"
              style="width: 200px" />
          </el-form-item>
          <el-form-item label="联系电话" prop="patientPhone">
            <el-input v-model="queryParams.patientPhone" placeholder="请输入联系电话" clearable @keyup.enter.native="handleQuery"
              style="width: 200px" />
          </el-form-item>
          <!-- <el-form-item label="诊断" prop="mainDiagnosis">
            <el-input v-model="queryParams.mainDiagnosis" placeholder="请输入诊断" clearable style="width: 200px"
              @keyup.enter.native="handleQuery" />
          </el-form-item> -->
          <!-- <el-form-item label="患者来源" prop="patientSource">
            <el-select v-model="queryParams.patientSource" placeholder="请选择患者来源" clearable style="width: 200px">
              <el-option v-for="dict in dict.type.patient_source" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="就诊方式" prop="visitMethod">
            <el-select v-model="queryParams.visitMethod" placeholder="请选择就诊方式" clearable style="width: 200px">
              <el-option v-for="dict in dict.type.visit_method" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="就诊时间" prop="visitDateStart">
            <el-date-picker v-model="visitDate" type="daterange" range-separator="至" start-placeholder="开始日期"
              style="width: 200px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item label="医院" prop="hospitalAgencyId">
            <el-select v-model="queryParams.hospitalAgencyId" filterable placeholder="请选择医院" style="width: 200px"
              clearable @clear="clearhospitalAgency" @change="changehospitalAgency">
              <el-option v-for="item in hospitalAgencylist" :key="item.id" :label="item.agencyName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="院区" prop="campusAgencyId">
            <el-select v-model="queryParams.campusAgencyId" filterable placeholder="请选择院区" style="width: 200px" clearable
              @clear="clearcampusAgency" @change="changecampusAgency">
              <el-option v-for="item in campusAgencylist" :key="item.id" :label="item.agencyName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="科室" prop="departmentId">
            <el-select v-model="queryParams.departmentId" filterable placeholder="请选择科室" style="width: 200px" clearable
              @clear="cleardepartment" @change="changedepartment">
              <el-option v-for="item in departmentlist" :key="item.id" :label="item.departmentName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="病区" prop="wardId">
            <el-select v-model="queryParams.wardId" filterable placeholder="请选择病区" style="width: 200px" clearable>
              <el-option v-for="item in wardlist" :key="item.id" :label="item.departmentName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="主治医生" prop="attendingPhysicianId">
            <el-select v-model="queryParams.attendingPhysicianId" style="width: 200px" filterable placeholder="请选择主治医生"
              clearable>
              <el-option v-for="item in attendingPhysicianlist" :key="item.userId" :label="item.nickName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item> -->
        </SearchFilter>
        

      </div>
      <div ref="table">
        <el-table :max-height="maxTableHeight" v-loading="loading" :data="patientInfoList">
          <el-table-column label="序号" type="index" width="48" align="center" />
          <el-table-column label="姓名" align="center" prop="patientName" />
          <el-table-column label="联系电话" align="center" prop="patientPhone"/>
          <el-table-column label="年龄" align="center" prop="age" />
          <el-table-column label="医院" align="center" prop="hospitalAgencyName"/>
          <el-table-column label="科室名称" align="center" prop="departmentName" />
          <el-table-column label="导入日期" align="center" prop="visitDate">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.Timeimport, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="诊断" align="center" prop="mainDiagnosis" />



          <!-- <el-table-column label="性别" align="center" prop="sex">
            <template slot-scope="scope">
              {{ scope.row.sex == "MALE" ? "男" : "" }}
              {{ scope.row.sex == "FEMALE" ? "女" : "" }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="出生日期" align="center" prop="birthDate" width="130" />

          <el-table-column label="院区" align="center" prop="campusAgencyName" width="130" />
          <el-table-column label="病区名称" align="center" prop="wardName" width="130" />
          <el-table-column label="住院/门诊号" align="center" prop="inHospitalNumber" width="130" />
          <el-table-column label="主治医生" align="center" prop="attendingPhysicianName" />
          <el-table-column label="就诊方式" align="center" prop="visitMethod">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.visit_method" :value="scope.row.visitMethod" />
            </template>
          </el-table-column>
          <el-table-column label="患者来源" align="center" prop="patientSource">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.patient_source" :value="scope.row.patientSource" />
            </template>
          </el-table-column>
          <el-table-column label="住址" align="center" prop="address" /> -->
          <el-table-column label="操作" align="center" fixed="right" width="110" >
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['manage:patientInfo:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['manage:patientInfo:remove']">删除</el-button> -->
              <el-button size="mini" type="text" @click="handOutbound(scope.row)">外呼</el-button>
              <el-button size="mini" type="text" @click="handleAuthRole(scope.row)">详情</el-button>
              <!-- <el-button size="mini" type="text" @click="handleedit(scope.row)">画像编辑</el-button> -->

            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <myPagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize"
        :indexFromWrap="queryParams.pageNum" :indexFrom="indexFrom" @updateCPage="updateCPage"></myPagination> -->
    </div>
  </template>
  
  <script>
  import { getPatientList } from "@/api/manage/patientInfo";
  import { getAge } from "@/utils/age";
  import {
    selectAgencyList,
    getDepartmentList,
    getAgencyList,
  } from "@/api/manage/selectAgencyList";
  import { usergetList } from "@/api/unitconfig/patientConfiguration";
  import SearchFilter from "../../components/SearchForm.vue";
  import cardlist from "../components/cardlist.vue";
  export default {
    name: "PatientInfo",
    dicts: ["patient_type", "visit_method", "sign_status", "patient_source"],
    components: { SearchFilter, cardlist },
    data() {
      return {
        indexFrom: 100,
        searchData: {},
        maxTableHeight: undefined,
        attendingPhysicianlist: [],
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 患者信息表格数据
        patientInfoList: [],
        // 查询参数
        queryParams: {
        //   pageNum: 1,
        //   pageSize: 100,
          sn:this.$route.query.sn,
          patientName: null,
          patientPhone: null,
          birthDate: null,
          patientType: null,
          visitMethod: null,
          mainDiagnosis: null,
          attendingPhysicianId: null,
          hospitalAgencyId: null,
          hospitalAgencyName: null,
          campusAgencyId: null,
          campusAgencyName: null,
          departmentId: null,
          departmentName: null,
          wardId: null,
          wardName: null,
          surgicalName: null,
          admissionTimeStart: null,
          admissionTimeEnd: null,
          outpatientNumber: null,
          visitDateStart: null,
          visitDateEnd: null,
          dischargeMethod: null,
          patientSource: null,
        },
        visitDate: [],
        admissionTime: [],
        //医院list
        hospitalAgencylist: [],
        // 院区list
        campusAgencylist: [],
        //科室list
        departmentlist: [],
        //病区list
        wardlist: [],
      };
    },
    watch: {
      type: {
        handler(val) {
        //   if (val == "table") {
        //     this.queryParams.pageSize = 10;
        //     this.indexFrom = "";
        //   } else if (val == "card") {
        //     this.indexFrom = 100;
        //   }
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      this.getList();
      this.selectAgencyinfo();
      console.log(this.$route.query,'qu')
    },
    mounted() {
      this.getMaxTableHeight();
      this.screenChange();
    },
    methods: {
      updateCPage(index, size) {
        this.queryParams.pageNum = index;
        this.queryParams.pageSize = size;
        this.getList();
      },
      //主治医生
      usergetListinfo() {
        usergetList({
          hospitalAgencyId: this.queryParams.hospitalAgencyId,
          postName: "DOCTOR",
        }).then((res) => {
          this.attendingPhysicianlist = res.data;
        });
      },
      /** 详情操作 */
      handleAuthRole(row) {
        this.$router.push({
          path: "/patient/patientdetails",
          query: {
            path: "/patient/patientInfo",
            patientId: row.id,
            patientName: row.patientName,
            patientPhone: row.patientPhone,
            familyMemberPhone: row.familyMemberPhone,
            cardNo: row.cardNo,
            address: row.address,
            mainDiagnosis: row.mainDiagnosis,
            hospitalAgencyName: row.hospitalAgencyName,
            campusAgencyName: row.campusAgencyName,
            departmentName: row.departmentName,
            wardName: row.wardName,
            certificateIssuingDoctorName: row.certificateIssuingDoctorName,
            appointmentTreatmentGroup: row.appointmentTreatmentGroup,
            responsibleNurse: row.responsibleNurse,
            registrationNo: row.registrationNo,
            registrationDate: row.registrationDate,
            appointmentDate: row.appointmentDate,
            sex: row.sex,
            birthDate: row.birthDate,
            patientSource: row.patientSource,
            createTime: row.createTime,
            age:row.age,
          },
        });
      },
      handOutbound(row){
        this.$router.push({
          path: "/patient/ManuallyCreatingTasks",
          query: {
            path: "/patient/ImportDetails",
            signPatientRecordId: row.signPatientRecordId ? row.signPatientRecordId : '',
            patientId: row.id ?row.id : '',
            patientName: row.patientName ? row.patientName : '',
            departmentId: row.departmentId ? row.departmentId : '',
            departmentName: row.departmentName ? row.departmentName : '',
          },
        });

      },
      // 画像编辑
      handleedit(row) {
        this.$router.push({
          path: "/patient/Portraitedit",
          query: {
            path: "/patient/patientInfo",
            patientId: row.id,
            cardNo: row.cardNo,
            patientName: row.patientName,
            patientPhone: row.patientPhone,
            sex: row.sex,
            birthDate: row.birthDate,
            familyMemberPhone: row.familyMemberPhone,
            address: row.address,
            patientSource: row.patientSource,
            createTime: row.createTime,
            hospitalAgencyName: row.hospitalAgencyName,
            mainDiagnosis: row.mainDiagnosis,
            age: row.age,
          },
        });
      },
      /** 查询患者信息列表 */
      getList() {
        this.loading = true;
        this.queryParams.params = {};
        const loading = this.$loading({
          lock: true,
          text: "数据加载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        getPatientList(this.queryParams).then((response) => {
          response.rows.forEach((e) => {
            e.birthDate ? (e.age = getAge(e.birthDate)) : e.age;
          });
          response.rows.forEach((e) => {
            e.Timeimport=this.$route.query.Timeimport
          });
  
          this.patientInfoList = response.rows;
          this.total = response.total;
          loading.close();
          this.loading = false;
        });
      },
      handleRules(){
        this.getList()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if (this.visitDate?.length > 0) {
          this.queryParams.visitDateStart = this.visitDate[0];
          this.queryParams.visitDateEnd = this.visitDate[1];
        } else {
          this.queryParams.visitDateStart = null;
          this.queryParams.visitDateEnd = null;
        }
        if (this.admissionTime?.length > 0) {
          this.queryParams.admissionTimeStart = this.admissionTime[0];
          this.queryParams.admissionTimeEnd = this.admissionTime[1];
        } else {
          this.queryParams.admissionTimeStart = null;
          this.queryParams.admissionTimeEnd = null;
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
            pageNum: 1,
            pageSize: 10,
          };
        // if (this.type == "card") {
        //   this.queryParams = {
        //     pageNum: 1,
        //     pageSize: 100,
        //   };
        // } else {
        //   this.queryParams = {
        //     pageNum: 1,
        //     pageSize: 10,
        //   };
        // }
  
        this.admissionTime = [];
        this.queryParams.admissionTimeStart = null;
        this.queryParams.admissionTimeEnd = null;
        this.visitDate = [];
        this.queryParams.visitDateStart = null;
        this.queryParams.visitDateEnd = null;
        this.handleQuery();
      },
      selectAgencyinfo() {
        let query = {
          agencyStatus: "ON",
          nodeType: "HOSPITAL",
        };
        selectAgencyList(query).then((res) => {
          this.hospitalAgencylist = res.data;
        });
      },
      //获取下级单位
      getAgencyListinfo(nodeType, id) {
        let query = {
          nodeType: nodeType,
        };
        if (nodeType == "HOSPITAL") {
          query.hospitalId = id;
        } else if (nodeType == "CAMPUS") {
          query.campusId = id;
        } else if (nodeType == "DEPARTMENT") {
          query.departmentId = id;
        }
        getAgencyList(query).then((res) => {
          if (nodeType == "HOSPITAL") {
            this.campusAgencylist = res.data.campusList;
            this.departmentlist = res.data.departmentList;
          } else if (nodeType == "CAMPUS") {
            this.departmentlist = res.data.departmentList;
          }
          this.wardlist = res.data.wardList;
        });
      },
      //选中医院获取院区
      changehospitalAgency(id) {
        this.getAgencyListinfo("HOSPITAL", id);
        // let query = {
        //   agencyStatus: 'ON',
        //   nodeType: 'CAMPUS',
        //   parentId: id,
        // }
        // selectAgencyList(query).then(res => {
        //   this.campusAgencylist = res.data
        this.queryParams.campusAgencyId = null;
        this.queryParams.departmentId = null;
        this.queryParams.wardId = null;
        this.queryParams.attendingPhysicianId = null;
        // })
        //医生
        this.usergetListinfo();
      },
      //选中院区获取科室
      changecampusAgency(id) {
        this.getAgencyListinfo("CAMPUS", id);
        // let query = {
        //   nodeType: 'DEPARTMENT',
        //   hospitalAgencyId: id,
        // }
        // getDepartmentList(query).then(res => {
        //   this.departmentlist = res.data
        this.queryParams.departmentId = null;
        this.queryParams.wardId = null;
        // })
      },
      //选中科室获取病区
      changedepartment(id) {
        this.getAgencyListinfo("DEPARTMENT", id);
        // let query = {
        //   nodeType: 'WARD',
        //   parentDepartmentId: id,
        // }
        // getDepartmentList(query).then(res => {
        //   this.wardlist = res.data
        this.queryParams.wardId = null;
        // })
      },
      //清空医院
      clearhospitalAgency() {
        this.queryParams.campusAgencyId = null;
        this.queryParams.departmentId = null;
        this.queryParams.wardId = null;
        this.queryParams.attendingPhysicianId = null;
        setTimeout(() => {
          this.attendingPhysicianlist = [];
        }, 1000);
      },
      //清空院区
      clearcampusAgency() {
        this.queryParams.departmentId = null;
        this.queryParams.wardId = null;
        this.getAgencyListinfo("HOSPITAL", this.queryParams.hospitalAgencyId);
      },
      //清空科室
      cleardepartment() {
        this.queryParams.wardId = null;
        if (this.queryParams.departmentId) {
          this.getAgencyListinfo("DEPARTMENT", this.queryParams.departmentId);
        } else if (this.queryParams.campusAgencyId) {
          this.getAgencyListinfo("CAMPUS", this.queryParams.campusAgencyId);
        } else if (this.queryParams.hospitalAgencyId) {
          this.getAgencyListinfo("HOSPITAL", this.queryParams.hospitalAgencyId);
        }
      },
      // 获取表格最高高度
      getMaxTableHeight() {
        const windowInnerHeight = window.innerHeight; // 屏幕可视高度
        const layoutDiv = this.$refs.layout;
        const formDiv = this.$refs.topform;
        const mb8Div = this.$refs.mb8;
        this.maxTableHeight =
          windowInnerHeight -
          134 -
          this.getBoxPadding(layoutDiv) -
          this.getBoxHeight(mb8Div) -
          this.getBoxHeight(formDiv);
      },
      // 屏幕resize监听
      screenChange() {
        // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
        window.addEventListener("resize", this.getMaxTableHeight, true);
        // 将屏幕监听事件移除
        // 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
        // 或者将这里的方法直接写在beforeDestroy函数中也可以
        this.$once("hook:beforeDestroy", () => {
          window.removeEventListener("resize", this.getMaxTableHeight, true);
        });
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .cardlist {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
  }
  
  .carditem {
    margin-right: 10px;
    margin-bottom: 10px;
    width: 260px;
    min-height: 200px;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
  }
  
  ::v-deep .el-table__body-wrapper {
    overflow: auto;
  }
  ::v-deep .el-form{
    width: 100%;


  }
  
  .form {
    display: flex;
    width: 100%;
  }
  
  // ::v-deep .el-table {
  //   overflow: hidden;
  // }
  </style>
  