<template>
  <div class="select-patient-dialog">
    <el-dialog
      title="选择居民"
      v-model="showSelectPatient"
      v-if="isShowSelectPatient"
      :before-close="clickClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="950px"
      top="2%"
      center
    >
      <div class="finish-content">
        <el-form
          ref="searchData"
          :model="searchData"
          :inline="true"
          class="select-width"
          size="small"
        >
          <el-form-item>
            <el-select v-model="searchData.sex" @change="changeSex">
              <el-option
                v-for="(item, index) in sexOptions"
                :key="index"
                :label="item.value"
                :value="item.no"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchData.ageRange" @change="changeAge">
              <el-option
                v-for="(item, index) in ageOptions"
                :key="index"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchData.diseaseId" @change="changeDisease">
              <el-option
                v-for="(item, index) in diseaseOptions"
                :key="index"
                :label="item.diseaseName"
                :value="item.diseaseId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchData.labelId" @change="changeLabel">
              <el-option
                v-for="(item, index) in labelOptions"
                :key="index"
                :label="item.labelName"
                :value="item.labelId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width: 160px">
            <el-input
              v-model="searchData.searchCondition"
              placeholder="请输入姓名或手机号"
            >
              <template v-slot:prefix>
                <el-icon class="el-input__icon" style="cursor: pointer"
                  ><el-icon-search
                /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-table
          :data="patientsData"
          ref="multipleTable"
          center
          style="width: 100%; margin-top: 20px"
          height="280"
          :row-key="getRowKeys"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
            :reserve-selection="true"
            :selectable="checkboxInit"
          >
          </el-table-column>
          <el-table-column prop="nickname" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="sexStr" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column
            prop="mobilePhone"
            label="手机"
            align="center"
            min-width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="showDiseaseNames"
            label="基础疾病"
            align="center"
            width="200"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="showLabelName"
            label="分组"
            align="center"
            width="200"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" class="margin-top20">
          <el-pagination
            background
            v-if="patientsData.length"
            @size-change="handleSizeChangePre"
            @current-change="handleCurrentChangePre"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="paginationSet.pageNum"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="paginationSet.pageSize"
            :total="paginationSet.total"
          >
          </el-pagination>
        </el-row>
      </div>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="clickClose" size="small" plain>取 消</el-button>
          <el-button type="primary" size="small" @click="sureClick"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Search as ElIconSearch } from '@element-plus/icons'
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
import { mapState, mapActions } from 'vuex'
import {
  getBasicData,
  getPlanPatientsList,
  getAllDiseases,
  getAllLabels,
} from '@/utils/followup/followapis'
export default {
  components: {
    ElIconSearch,
  },
  name: 'select-patient',
  data() {
    return {
      showSelectPatient: true,
      allSelects: [],
      // eachSelects: [],//仅仅是操作选择的总人员
      //        totalSelect: [],// 当前所选的人
      labelId: '',
      diseaseId: '',
      age: '',
      sex: '',
      ageBegin: '',
      ageEnd: '',
      srvPackageId: '',
      searchCondition: '',
      patientsData: [],
      searchData: {
        sex: '性别',
        ageRange: '年龄范围',
        ageBegin: '',
        ageEnd: '',
        diseaseId: '基础疾病',
        labelId: '分组',
        searchCondition: '',
      },
      paginationSet: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      sexOptions: [
        {
          no: '',
          value: '性别',
        },
      ],
      ageOptions: [
        {
          no: '',
          value: '年龄范围',
        },
      ],
      diseaseOptions: [
        {
          diseaseId: '',
          diseaseName: '基础疾病',
        },
      ],
      labelOptions: [
        {
          labelId: '',
          labelName: '分组',
        },
      ],
      newSelects: [], //新选中的人
      getRowKeys(row) {
        //  console.log('sshkdhdk',row)
        return row.patientId
      },
    }
  },
  props: {
    isShowSelectPatient: Boolean, //是否显示model,
    patientIdList: Array, // 确定已经选过的居民
    oldPatientIdList: Array, // 确定已经选过的居民
  },
  watch: {
    isShowSelectPatient(val) {
      if (val) {
        this.getPatientsList()
        // 获取常量 性别、年龄
        getBasicData({
          numList: 'P057,P006',
        }).then((res) => {
          this.sexOptions = [
            {
              no: '',
              value: '性别',
            },
          ]
          this.sexOptions = this.sexOptions.concat(res.data.P006) //性别
          this.ageOptions = [
            {
              no: '',
              value: '年龄范围',
            },
          ]
          this.ageOptions = this.ageOptions.concat(res.data.P057) //年龄段
        })

        // 获取所有疾病
        getAllDiseases().then((res) => {
          this.diseaseOptions = [
            {
              diseaseId: '',
              diseaseName: '基础疾病',
            },
          ]
          this.diseaseOptions = this.diseaseOptions.concat(res.data)
        })

        // 获取所有分组
        getAllLabels({ type: 1 }).then((res) => {
          this.labelOptions = [
            {
              labelId: '',
              labelName: '分组',
            },
          ]
          this.labelOptions = this.labelOptions.concat(res.data.labelNameList)
        })
      }
    },
  },
  methods: {
    checkboxInit(row, index) {
      if (row.disableNum == undefined) {
        return 1
      } else {
        return row.disableNum
      }
    },
    getPatientsList() {
      const data = {
        pageSize: this.paginationSet.pageSize,
        pageNo: this.paginationSet.pageNum,
        labelId: this.labelId,
        diseaseId: this.diseaseId,
        age: this.age,
        sex: this.sex,
        ageBegin: this.ageBegin,
        ageEnd: this.ageEnd,
        srvPackageId: this.srvPackageId,
        searchCondition: this.searchCondition,
      }
      getPlanPatientsList(data).then((res) => {
        if (res.data.patientList) {
          this.patientsData = res.data.patientList //接口获取的当页居民
          this.getSex()
          this.paginationSet.total = res.data.totalRows
          // 设置所请求的当页人员是否成为选中状态
          // console.log('传入的已选居民',this.patientIdList)

          this.patientsData.forEach((item) => {
            item.disableNum = 1
            let diseaseNames = []
            let groupNames = []
            //转化分组
            if (item.labelModels) {
              item.labelModels.forEach((item) => {
                groupNames.push(item.label)
              })
              item.showLabelName = groupNames.join('、')
            } else {
              item.showLabelName = '-'
            }

            //转化疾病
            if (item.patientTypeModels) {
              item.patientTypeModels.forEach((item) => {
                diseaseNames.push(item.name)
              })
              item.showDiseaseNames = diseaseNames.join('、')
            } else {
              item.showDiseaseNames = '-'
            }

            if (this.patientIdList.length > 0) {
              if (this.patientIdList.includes(item.patientId)) {
                // 如果已经选过居民
                this.$nextTick(() => {
                  this.$refs.multipleTable.toggleRowSelection(item, true)
                })
              }
            }
            if (
              this.oldPatientIdList != undefined &&
              this.oldPatientIdList.length
            ) {
              this.patientsData.forEach((item) => {
                if (this.oldPatientIdList.includes(item.patientId)) {
                  // 如果已经选过居民
                  item.disableNum = 0
                } else {
                  item.disableNum = 1
                }
              })
            }
          })

          //  console.log(this.oldPatientIdList)
        } else {
          this.patientsData = []
        }
      })
    },
    getSex() {
      this.patientsData.forEach((item, index) => {
        if (item.sex == 1) {
          this.patientsData[index].sexStr = '男'
        } else if (item.sex == 2) {
          this.patientsData[index].sexStr = '女'
        } else {
          this.patientsData[index].sexStr = '未知'
        }
      })
    },
    // 对选中的居民进行去重
    removeDuplicates(list) {
      return Array.from(new Set(list))
    },
    // 选择居民
    handleSelectionChange(val) {
      const _this = this
      _this.newSelects = []
      val.forEach((item) => {
        if (item.disableNum == 1) {
          _this.newSelects.push(item)
        }
      })
    },
    // 切换分页
    handleCurrentChangePre(val) {
      this.paginationSet.pageNum = val
      this.getPatientsList()
    },
    clickClose() {
      $emit(this, 'closeSelectPatient', false)
    },
    sureClick() {
      if (this.newSelects.length) {
        $emit(this, 'sureSelectPatient', false, this.newSelects)
      } else {
        this.$message.warning('请先选择!')
      }
    },
    handleSizeChangePre(val) {
      //        console.log('handleSizeChangePre')
      this.paginationSet.pageSize = val
      this.getPatientsList()
    },
    changeSex(val) {
      this.sex = val
      this.paginationSet.pageNum = 1
      this.getPatientsList()
    },
    changeAge(val) {
      if (val == '年龄范围') {
        val = null
      }
      this.age = val
      this.ageBegin = this.ageDate(val).ageBegin
      this.ageEnd = this.ageDate(val).ageEnd
      this.paginationSet.pageNum = 1
      this.getPatientsList()
    },
    changeDisease(val) {
      this.diseaseId = val
      this.paginationSet.pageNum = 1
      this.getPatientsList()
    },
    changeLabel(val) {
      this.labelId = val
      this.paginationSet.pageNum = 1
      this.getPatientsList()
    },
    searchHandler() {
      const searchCondition = this.searchData.searchCondition
      this.searchCondition = searchCondition
      this.paginationSet.pageNum = 1
      this.getPatientsList()
    },
    ageDate(val) {
      let ageObj
      if (!val) {
        ageObj = {
          ageBegin: '',
          ageEnd: '',
        }
      } else if (val.indexOf('+') > -1) {
        ageObj = {
          ageBegin: 84,
          ageEnd: 200,
        }
      } else {
        let ageItem = val.split('-')
        ageObj = {
          ageBegin: ageItem[0],
          ageEnd: ageItem[1],
        }
      }
      return ageObj
    },
  },
  emits: ['closeSelectPatient', 'sureSelectPatient'],
}
</script>

<style lang="scss">
.select-patient-dialog {
  .el-dialog__wrapper {
    overflow: hidden;
    .el-dialog--center {
      height: 580px;
      .el-table--scrollable-y,
      .el-table__body-wrapper {
        &::-webkit-scrollbar {
          width: 5px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: rgba(0, 0, 0, 0.1);
        }
      }
      /*.el-dialog__body {
          max-height: 80%;
          overflow: hidden;
          .finish-content {
            height: 100%;
            .el-table {
              .el-table--scrollable-y .el-table__body-wrapper {
                height: 80%;
              }
            }

          }
        }*/
    }
  }
  .select-width .el-form-item {
    width: 130px;
  }
  .margin-top20 {
    margin-top: 20px;
  }
}
</style>
