<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 slot-scope="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 slot-scope="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 slot-scope="scope">
            <el-button type="text" @click="goToDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../../assets/image/no-content1.png">
            <p>暂无任何居民，去添加居民</p>
          </div>
        </div>
      </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>
