<template>
  <section class="not-complete-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond">
    </bread-crumb>
    <section class="not-complete-content screenSet">
      <h1 class="page-title">
        我的居民：共{{ pagination.totalRows ? pagination.totalRows : 0 }}人
      </h1>
      <div class="search-div">
        <div class="search-input">
          <el-form
            :model="searchData"
            ref="searchData"
            :inline="true"
            label-width="100px"
          >
            <el-form-item label="性别：" prop="patientName">
              <el-select
                v-model="searchData.sex"
                size="small"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in sexList"
                  :key="item.no"
                  :label="item.value"
                  :value="item.no"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄段：" prop="mobile">
              <el-select
                v-model="searchData.age"
                size="small"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in agesList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="诊断："
              prop="startDate"
              class="diagnose-select-style"
            >
              <!-- <el-select v-model="searchData.diseaseId" size="small" clearable :popper-append-to-body="false" placeholder="请选择或搜索诊断">
                      <el-option
                        v-for="item in diseaseList"
                        :key="item.diseaseId"
                        :label="item.diseaseName"
                        :value="item.diseaseId">
                      </el-option>
                    </el-select> -->
              <!-- new Start -->
              <el-select
                v-model="searchData.icdCodeList"
                multiple
                filterable
                remote
                size="small"
                collapse-tags
                reserve-keyword
                placeholder="请选择或搜索诊断"
                :remote-method="getDiseaseData"
                :loading="loading"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in options"
                  :key="item.icdCode"
                  :label="item.diseaseName"
                  :value="item.icdCode"
                >
                </el-option>
              </el-select>
              <!-- new End -->
            </el-form-item>
            <el-form-item label="分组：" prop="labelId">
              <el-select
                v-model="searchData.labelId"
                size="small"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in groupList"
                  :key="item.labelId"
                  :label="item.labelName"
                  :value="item.labelId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键词：" prop="searchCondition">
              <el-input
                v-model="searchData.searchCondition"
                size="small"
                clearable
                placeholder="请输入患者姓名/手机号"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
          <el-button
            class="button-green"
            type="primary"
            size="small"
            @click="searchPatientList"
            >查询</el-button
          >
          <el-button
            class="button-white"
            plain
            size="small"
            @click="resetSearchData('searchData')"
            >重置</el-button
          >
        </div>
      </div>
      <el-table :data="patientList" style="width: 100%">
        <el-table-column prop="nickname" width="150" label="姓名" lign="center">
        </el-table-column>
        <el-table-column prop="sex" width="80" label="性别" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.sex == 1">男</span>
            <span v-else-if="scope.row.sex == 2">女</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="80" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.age || scope.row.age == 0">{{
              scope.row.age
            }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="showLabelName"
          :show-overflow-tooltip="true"
          label="分组"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="showDiseaseNames"
          :show-overflow-tooltip="true"
          label="诊断"
          align="center"
        >
        </el-table-column>
        <el-table-column width="120" label="操作" align="center">
          <template v-slot="scope">
            <el-button type="text" @click="goToDetails(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../../assets/image/no-content1.png" />
              <p>暂无任何居民，去添加居民</p>
            </div>
          </div>
        </template>
      </el-table>
      <div class="pagination" v-if="patientList">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.pageNo"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.totalRows"
        >
        </el-pagination>
      </div>
    </section>
  </section>
</template>

<script>
import BreadCrumb from '../../../components/breadcrumb.vue'
import {
  getConstants,
  // getDiseasesList,
  getIcdList,
  getLabelList,
  getPatientList,
} from '../../../utils/patients/patientsapi'
export default {
  name: 'not-complete',
  components: {
    BreadCrumb,
  },
  data() {
    return {
      curmbFirst: '居民管理',
      curmbSecond: '我的居民',
      pagination: {
        pageNo: 1,
        pageSize: 15,
        totalRows: 0,
      },
      searchData: {},
      selectList: [],
      sexList: [], //性别
      agesList: [], //年龄
      diseaseList: [],
      groupList: [],
      patientList: [],
      options: [],
      loading: false,
    }
  },
  mounted() {
    this.getConstantData() //获取性别、年龄段常量
    this.getDiseaseData() //获取 搜索诊断
    this.getGroupList() //获取分组
    this.getPatients({
      ...this.searchData,
    }) //获取居民列表
  },
  methods: {
    getConstantData() {
      getConstants({
        numList: 'P006,P057',
      })
        .then((data) => {
          if (data.code == '000000') {
            this.sexList = data.data.P006
            this.agesList = data.data.P057
          }
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: 'error',
          })
        })
    },
    getDiseaseData(query) {
      // getDiseasesList().then((data) => {
      //   if(data.code == "000000") {
      //     this.diseaseList = data.data;
      //   }
      // }).catch((error) => {
      //   this.$message({
      //     message: error,
      //     type: 'error'
      //   });
      // });
      let params = {
        diseaseName: query ? query : '',
        pageNum: 1,
        pageSize: 200,
      }
      this.loading = true
      getIcdList(params)
        .then((data) => {
          this.loading = false
          if (data.code == '000000') {
            this.options = data.data
          }
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: 'error',
          })
        })
    },
    getGroupList() {
      getLabelList({
        type: 1,
        token: localStorage.getItem('token'),
      })
        .then((data) => {
          if (data.code == '000000') {
            this.groupList = data.data.labelNameList
          }
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: 'error',
          })
        })
    },
    getPatients(payload) {
      const { pageNo, pageSize } = this.pagination
      let searchParams = {}
      if (this.searchData.age) {
        let ageBegin = ''
        let ageEnd = ''
        if (this.searchData.age == '84+') {
          ageBegin = '84'
          ageEnd = '200'
        } else {
          const ageItem = this.searchData.age.split('-')
          ageBegin = ageItem[0]
          ageEnd = ageItem[1]
        }
        searchParams = {
          ...payload,
          ageBegin,
          ageEnd,
        }
      } else {
        searchParams = payload
      }
      getPatientList({
        pageNo,
        pageSize,
        ...searchParams,
      })
        .then((data) => {
          if (data.code == '000000') {
            this.patientList = data.data.patientList
            this.pagination.totalRows = data.data.totalRows
            if (this.patientList) {
              this.patientList.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.diseaseName)
                  })
                  item.showDiseaseNames = diseaseNames.join('、')
                } else {
                  item.showDiseaseNames = '-'
                }
              })
            }
          }
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: 'error',
          })
        })
    },
    handleSizeChange(val) {
      this.pagination.pageNo = 1
      this.pagination.pageSize = val
      this.getPatients({
        ...this.searchData,
      })
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getPatients({
        ...this.searchData,
      })
    },
    searchPatientList() {
      this.pagination.pageNo = 1
      this.getPatients({
        ...this.searchData,
      })
    },
    resetSearchData() {
      this.searchData = {}
      this.pagination.pageNo = 1
      this.getPatients({
        ...this.searchData,
      })
    },
    goToDetails(item) {
      this.$router.push({
        path: '/patients-manage/mypatients-manage/patient-detail',
        query: { patientId: item.patientId },
      })
    },
  },
}
</script>

<style lang="scss">
.not-complete-wrap {
  .not-complete-content {
    padding: 30px;
    background: #ffffff;
    .tip {
      font-size: 12px;
      padding: 30px 0;
      line-height: 32px;
    }
    .page-title {
      font-size: 20px;
      color: #F1E2F3D;
      padding-bottom: 20px;
      border-bottom: 1px solid #efefef;
    }
    .search-div {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 30px 0 10px 0;
      border-bottom: 1px solid #efefef;
      .search-input {
        flex: 1;
        .diagnose-select-style {
          .el-input__inner {
            height: 32px !important;
          }
          .el-select__tags-text {
            display: inline-block;
            max-width: 75px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .el-tag__close.el-icon-close {
            top: -6px;
          }
        }
      }
      .search-btn {
        text-align: right;
        width: 150px;
      }
    }
    .blank-wrap {
      @media screen and (min-width: 1240px) and (max-width: 1545px) {
        height: 300px;
      }
      @media screen and (min-width: 1545px) and (max-width: 1600px) {
        height: 500px;
      }
      @media screen and (min-width: 1600px) {
        height: 600px;
      }
      .blank-content {
        text-align: center;
        img {
          width: 100px;
        }
        p {
          font-size: 20px;
          color: #999;
        }
      }
    }
    .user-photo {
      border-radius: 50%;
      width: 40px;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
  /*重置输入框，选择框样式*/
  .el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner,
  .el-input__inner:focus {
    border-color: #449284;
  }
  .el-select-dropdown__item.selected {
    color: #449284;
  }
  .el-select .el-input__inner:focus {
    border-color: #449284;
  }
  /*重置表格选择框*/
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: #449284;
    background-color: #449284;
  }
  .el-checkbox__inner {
    border-color: #dcdfe6 !important;
  }
  .el-checkbox__input.is-focus,
  .el-checkbox__inner:hover,
  .el-checkbox__inner.is-focus {
    border-color: #449284 !important;
  }
  .el-button--text {
    color: #449284;
  }
  .fontGreen {
    color: #449284;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #449284 !important;
  }
}
</style>
