11111111

<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" style="display:flex;">
            <el-autocomplete
              v-model="hospitalInfo"
              class="my-input"
              :fetch-suggestions="querySearch"
              placeholder="请输入医院名称关键词"
              :trigger-on-focus="false"
              @select="handleSelect"
            />
            <el-select v-if="isShowGradeSelect" v-model="gradeInfo" class="my-select" @change="chooseHospitalGrade">
              <el-option
                v-for="(item, index) in hospitalGradeList"
                :key="index"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
            <i v-if="isShowGradeSelect" class="el-icon-circle-plus-outline" @click="addHospitalInfo"></i>
          </div>
          <!-- <p v-if="!isEdit" style="cursor:pointer;">
            <span v-for="(item, index) in hospitalList" :key="index" class="no-edit" @dblclick="editHospitalInfo(item.id)">
              <span class="my-input">{{ item.hospitalName }}</span>
              <span class="my-select">{{ item.grade }}</span>
              <i class="el-icon-circle-close" @click="delHospitalInfo(item.id)"></i>
            </span>
          </p> -->
          <p v-for="(item, index) in hospitalList" :key="index" style="display:flex;">
            <span v-if="isEdit && editId === item.id">
              <el-input id="my-edit-pipeline" v-model="item.hospitalName" class="my-input" @change="editName" @blur="blurFun" @focus="focusFun" />
              <el-select v-model="item.grade" class="my-select" @change="editGrade">
                <el-option
                  v-for="(itm, idx) in hospitalGradeList"
                  :key="idx"
                  :label="itm.label"
                  :value="itm.label"
                />
              </el-select>
              <i class="el-icon-circle-close my-edit" @click="delHospitalInfo(item.id)"></i>
            </span>
            <span v-else>
              <span class="no-edit" @dblclick="editHospitalInfo(item.id)">
                <span class="my-input">{{ item.hospitalName }}</span>
                <span class="my-select">{{ item.grade }}</span>
                <i class="el-icon-circle-close" @click="delHospitalInfo(item.id)"></i>
              </span>
            </span>
          </p>
        </el-card>
      </el-col>
      <el-col :span="8"></el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ConfigManage',
  data () {
    return {
      hospitalList: [], // 已配置的医院列表
      hospitalGradeList: [{ // 医院等级列表
        value: 0,
        label: '一甲'
      }, {
        value: 1,
        label: '一乙'
      }, {
        value: 2,
        label: '一丙'
      }, {
        value: 3,
        label: '二甲'
      }, {
        value: 4,
        label: '二乙'
      }, {
        value: 5,
        label: '二丙'
      }, {
        value: 6,
        label: '三甲'
      }, {
        value: 7,
        label: '三乙'
      }, {
        value: 8,
        label: '三丙'
      }],
      hospitalInfo: '',
      gradeInfo: '',
      options: [], // 医院名称联想列表
      // loading: false,
      // list: [],
      // states: [],
      isEdit: false, // input框是否处于编辑状态
      isShowGradeSelect: false, // 是否展示医院等级选择下拉框
      hospitalNameList: [],
      currentPage: 1,
      editId: ''

    }
  },
  mounted () {

  },
  created () {
    this.getHospitalData()
    this.getHospitalNameList()
  },
  methods: {
    // remoteMethod(query) {
    //   if (query !== '') {
    //     this.loading = true
    //     setTimeout(() => {
    //       this.loading = false
    //       this.options = this.list.filter(item => {
    //         return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
    //       })
    //       this.isShowGradeSelect = true
    //     }, 200)
    //   } else {
    //     this.options = []
    //     this.isShowGradeSelect = false
    //   }
    // },
    querySearch (queryString, callback) { // queryString是input框改变后的值，querySearch与input事件相似，当input框内的值改变即会触发
      console.log(queryString)
      var hospitalNameList = this.hospitalNameList
      var results = queryString ? hospitalNameList.filter(this.createFilter(queryString)) : hospitalNameList
      console.log(results)
      if (results.length === 0) {
        this.isShowGradeSelect = true
      } else {
        this.isShowGradeSelect = false
      }
      // 调用 callback 返回建议列表的数据
      callback('请求返回的联想数据列表')
    },
    // 可不要
    createFilter (queryString) {
      return (hospitalNameList) => {
        return (hospitalNameList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    // 可不要
    getHospitalNameList () {
      this.hospitalNameList = [
        { value: '瑞金北院' },
        { value: '昌平中西医结合医院' }
      ]
    },
    handleSelect (item) {
      console.log(item)
    },

    // 选择医院等级
    chooseHospitalGrade (value) {
      console.log(value)
    },
    // 获取医院配置
    getHospitalData () {
      const params = {
        hospitalName: this.hospitalInfo,
        page: this.currentPage,
        size: 10
      }
      console.log(params)
      const res = {
        code: 200,
        msg: 'success',
        data: [{
          id: '1',
          hospitalName: '瑞金北院',
          grade: '三甲'
        }, {
          id: '2',
          hospitalName: '昌平中西医结合医院',
          grade: '三甲'
        }]
      }
      if (res.code === 200 && res.data.length > 0) {
        // 发请求获取数据
        // ... ...
        this.hospitalList = res.data
        console.log(this.hospitalList)
        // const arr = []
        // res.data.forEach((item, index) => {
        //   arr.push(item.hospitalName)
        // })
        // console.log(arr)
        // this.states = arr
        // this.list = this.states.map(item => {
        //   return { value: item, label: item }
        // })
      }
    },
    // 添加医院配置
    addHospitalInfo () {
      if (this.hospitalInfo === '') {
        this.$message('请输入医院名称')
        return false
      } else if (this.isShowGradeSelect && this.gradeInfo === '') {
        this.$message('请选择医院等级')
        return false
      } else {
        this.hospitalList.push({
          hospitalName: this.hospitalInfo,
          grade: this.gradeInfo
        })
        // 发请求
        const params = {
          hospitalName: this.hospitalInfo,
          grade: this.gradeInfo
        }
        console.log(params)
        // 如果医院已经存在，则不添加
        // 。。。。。。
        this.hospitalInfo = ''
        this.gradeInfo = ''
        this.isShowGradeSelect = false
      }
    },
    // 删除医院配置
    delHospitalInfo (id) {
      console.log(id)
    },
    // 编辑医院配置
    editHospitalInfo (id) {
      console.log(id)
      this.isEdit = true
      this.editId = id
      // console.log(this.isEdit)
      // this.$nextTick(() => {
      //   const edit_pipeline = document.getElementById('my-edit-pipeline')
      //   console.log(edit_pipeline)
      //   edit_pipeline.focus()
      // })
    },
    editName (val) {
      console.log(val)
    },
    editGrade (val) {
      console.log(val)
    },
    blurFun () {
      this.isEdit = false
      console.log('失焦了')
      this.$notify.success({
        title: '成功',
        message: '保存成功'
      })
    },
    focusFun () {
      console.log('聚焦了')
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 15px;
  .box-card {
    .my-input {
      width: 480px;
      margin-right: 8px;
    }
    .my-select {
      width: 100px;
      margin-right: 8px;
    }
    .no-edit {
      display: flex;
      margin-bottom: 8px;
      line-height: 21px;
    }
    .el-icon-circle-plus-outline {
      color:#1890ff;
      font-size: 25px;
      margin-top: 3px;
      float: right;
      cursor: pointer;
    }
    .el-icon-circle-close {
      color:#EE6363;
      font-size: 18px;
      cursor: pointer;
    }
    .my-edit {
      margin-top: 7px;
    }
  }
}
</style>