<template>
  <page-layer>
    <template #header>
      <el-input style="width: 130px" placeholder="姓名" clearable v-model="psnName"></el-input>&nbsp;
      <el-input style="width: 180px" placeholder="身份证号（必填）" clearable v-model="socialNo"></el-input>
      <el-select v-model="psnAdmdvs" placeholder="参保区划" filterable style="width: 160px">
        <el-option v-for="item in admdvs" :key="item.code" :label="item.name" :value="item.code">
          <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button icon="Search" type="primary" @click="execQuery">查询</el-button>
      <el-button type="primary" @click="getCuminfo">累计信息</el-button>
      <el-button icon="Refresh" type="primary" @click="resetPage">清空页面</el-button>
    </template>
    <template #main>
      <el-tag type="info">基本信息</el-tag>
      <el-descriptions :column="4" border>
        <el-descriptions-item>
          <template #label> 人员编号 </template>
          {{ psnInfo.psnNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 证件类型 </template>
          {{ psnInfo.psnCertTypeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>证件号码 </template>
          {{ psnInfo.certno }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 人员姓名 </template>
          {{ psnInfo.psnName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 性别 </template>
          {{ psnInfo.gendName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 民族 </template>
          {{ psnInfo.natyName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 出生日期 </template>
          {{ psnInfo.brdy }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 年龄 </template>
          {{ psnInfo.age }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-tag type="info">参保信息</el-tag>
      <el-table :data="psnInfo.insuinfo">
        <el-table-column label="余额" prop="balc"></el-table-column>
        <el-table-column label="险种类型" prop="insutypeName"></el-table-column>
        <el-table-column label="人员类别" prop="psnTypeName"></el-table-column>
        <el-table-column label="参保状态" prop="psnInsuStasName"></el-table-column>
        <el-table-column label="个人参保日期" prop="psnInsuDate"></el-table-column>
        <el-table-column label="暂停参保日期" prop="pausInsuDate"></el-table-column>
        <el-table-column label="公务员标志" prop="cvlservFlagName"></el-table-column>
        <el-table-column label="参保地医保区划" prop="insuplcAdmdvs"></el-table-column>
        <el-table-column label="参保地名称" prop="insuplcAdmdvsName"></el-table-column>
        <el-table-column label="单位名称" prop="empName"></el-table-column>
      </el-table>
      <el-divider></el-divider>
      <el-tag type="info">身份信息</el-tag>
      <el-table :data="psnInfo.idetinfo">
        <el-table-column label="人员身份类别" prop="psnIdetTypeName"></el-table-column>
        <el-table-column label="人员类别等级" prop="psnTypeLv"></el-table-column>
        <el-table-column label="备注" prop="memo"></el-table-column>
        <el-table-column label="开始时间" prop="begntime"></el-table-column>
        <el-table-column label="结束时间" prop="endtime"></el-table-column>
      </el-table>
      <el-dialog title="人员累计信息查询" v-model="showCumInfo" width="50%">
        <Cuminfo :psn-no="psnInfo.psnNo" :admdvs="psnAdmdvs" />
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { ref } from 'vue'
import { obtainBasicPersonInfo } from '@/api/medical-insurance/si-query'
import { admdvses } from '@/data'
import Cuminfo from '@/components/medical-insurance/cuminfo/Index.vue'
import { ElMessage } from 'element-plus'
import PageLayer from "@/layout/PageLayer";
export default {
  components: {
    PageLayer,
    Cuminfo,
  },
  setup() {
    const psnName = ref('')
    const socialNo = ref('')
    const psnAdmdvs = ref('')
    const psnInfo = ref({ insuinfo: [] })
    const showCumInfo = ref(false)
    const nullPsninfo = () => {
      if (!psnInfo.value.psnNo) {
        ElMessage({
          message: '请先查询人员基本信息！',
          type: 'warning',
          duration: 2000,
          showClose: true,
        })
        return true
      }
      return false
    }
    const execQuery = () => {
      const param = {
        name: psnName.value,
        socialNo: socialNo.value,
        admdvs: psnAdmdvs.value,
        onlyQry: 1,
      }
      obtainBasicPersonInfo(param).then((res) => {
        psnInfo.value = res
      })
    }
    const resetPage = () => {
      psnName.value = ''
      socialNo.value = ''
      psnInfo.value = { insuinfo: [] }
    }
    const getCuminfo = () => {
      if (nullPsninfo()) {
        return
      }
      showCumInfo.value = true
    }
    return {
      admdvs: admdvses,
      psnName,
      socialNo,
      psnAdmdvs,
      psnInfo,
      showCumInfo,
      execQuery,
      resetPage,
      getCuminfo,
    }
  },
}
</script>
