<template>
  <el-row>
    <el-col :span="24">
      <el-form
        :model="diseaseForm"
        ref="diseaseForm"
        class="sub-form"
        :validate-on-rule-change="false"
      >
        <el-form-item label="疾病别称" label-width="110px" prop="alias">
          <el-input
            v-model.trim="diseaseForm.alias"
            placeholder="请输入疾病别称"
            @blur="handleValue('alias')"
          ></el-input>
        </el-form-item>
        <el-form-item label="疾病分类" label-width="110px" prop="category">
          <el-select
            v-model="diseaseForm.category"
            placeholder="请选择疾病分类"
            clearable
            @change="handleValue('category')"
            style="width: 100%"
          >
            <el-option label="一类疾病" :value="1"></el-option>
            <el-option label="二类疾病" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年龄范围" label-width="110px" prop="minAge">
              <el-input
                v-model.number="diseaseForm.minAge"
                placeholder="请输入最小值"
                @blur="handleValue('minAge')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="turns">——</div>
          </el-col>
          <el-col :span="10">
            <el-form-item label label-width="0px" prop="maxAge">
              <el-input
                v-model.number="diseaseForm.maxAge"
                placeholder="请输入最大值"
                @blur="handleValue('maxAge')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="所属科室" label-width="110px" prop="dept">
          <el-input
            v-model.trim="diseaseForm.dept"
            placeholder="请输入所属科室"
            @blur="handleValue('dept')"
          ></el-input>
        </el-form-item>-->
        <el-form-item label="所属科室" label-width="110px" prop="dept">
          <el-select
            style="width:100%"
            v-model="diseaseForm.dept"
            filterable
            remote
            clearable
            :loading="showDrop"
            loading-text="加载中..."
            @change="handleValue('dept')"
            @visible-change="handleVisible"
            placeholder="请输入所属科室"
            :remote-method="searchTerms"
            reserve-keyword
          >
            <el-option
              v-for="(item,idx) in deptNames"
              :key="idx"
              :label="item"
              :value="item"
              :title="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" label-width="110px" prop="planName">
          <el-select
            v-model="diseaseForm.gender"
            placeholder="请选择性别"
            clearable
            @change="handleValue('gender')"
            style="width: 100%"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import api from '@api/cdss.js';
export default {
  name: 'diseaseForm',
  props: ['data'],
  data() {
    return {
      diseaseForm: {
        alias: '',
        category: '',
        dept: '',
        minAge: '',
        maxAge: '',
        gender: ''
      },
      deptNames: [],
      showDrop: false //下拉框显示文字
    };
  },
  computed: {},
  created() {
    this._initData();
  },
  mounted() {},
  methods: {
    _initData() {
      this.diseaseForm.alias = this.data.alias;
      this.diseaseForm.category = this.data.category;
      this.diseaseForm.dept = this.data.dept;
      this.diseaseForm.minAge = this.data.minAge;
      this.diseaseForm.maxAge = this.data.maxAge;
      this.diseaseForm.gender = this.data.gender;
    },

    // 传值
    handleValue(from) {
      this.$emit('handleInput', {
        type: from,
        value: this.diseaseForm[from]
      });
    },

   
    handleVisible(flag) {
      if (!flag) {
        this.deptNames = [];
      }
    }, // 搜索列表
    searchTerms(query) {
      if (!query) {
        this.deptNames = [];
        return;
      }
      // this.searchInfo = query;
      this.showDrop = true;
      let params = {
        inputStr: query,
        size: '',
        type: 7
      };
      api.retrievalSearch(params).then(res => {
        this.showDrop = false;
        if (res.data.code === '0') {
          this.deptNames = res.data.data && res.data.data.deptNames;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.turns {
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #dcdfe6;
}
</style>