<template>
  <div @click="closeSearch">
    <crumbs :title="title" :param="$route.params" linkTo="QualityControlTemp"></crumbs>
    <div class="contentWrapper">
      <div class="content">
        <el-form :model="form" :rules="rules" ref="form" class="selectHospital">
          <el-form-item label="所属医院：" prop="hospital" class="formItem">
            <el-select
              v-model="form.hospital"
              placeholder="请选择医院"
              :disabled="isEdit||isCopy"
              class="selectHospital"
              @change="changeHsopital"
            >
              <el-option
                v-for="item in hospitalList"
                :key="item.id"
                :label="item.name"
                :value="item.val"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属模块：" prop="moduleName" class="formItem">
            <el-select
              v-model="form.moduleName"
              placeholder="请选择所属模块"
              :disabled="isEdit||isCopy"
              class="selectModule"
              @change="changeModule"
            >
              <el-option
                v-for="item in moduleList"
                :key="item.id"
                :label="item.name"
                :value="item.val"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板名称：" prop="tempName" class="formItem widthLarge">
            <el-input v-model.trim="form.tempName" placeholder="请输入模板名称"></el-input>
          </el-form-item>

          <el-form-item label="默认标准模板：" class="formItem widthLarge">
            <el-switch
              v-model="form.defaultModule"
              :active-value="1"
              :inactive-value="0"
              active-color="#4BC4D7"
              inactive-color="#BBBBBB"
              @change="handleTemChange($event,form.defaultModule)"
            ></el-switch>
            <span class="showInfo">{{form.defaultModule==1?'是':'否'}}</span>
          </el-form-item>

          <el-form-item label="模块类型：" prop="moduleTypes" class="formItem widthLarge"></el-form-item>
          <QCTypePour
            :hospital="form.hospital"
            :moduleName="form.moduleName"
            @changeActionData="moduleTypeChange"
            :selectedTag="form.recordAnalyzeList"
          ></QCTypePour>
          <el-form-item label="模块内容：" prop="moduleInfo" class="formItem addCon">
            <div class="moduleInfoItem" v-for="(item,index) in moduleInfoList">
              <div class="orderBox">
                <span class="el-icon-arrow-up order" @click="upUnit(index)"></span>
                <span class="el-icon-arrow-down order" @click="downUnit(index)"></span>
              </div>
              <div class="searchBox">
                <el-input
                  v-model.trim="item.searchName"
                  placeholder="搜索字段单元"
                  @click="stopClick"
                  @input="searchFiled(index)"
                ></el-input>
                <ul
                  v-if="searchIndex == index &&  item.searchResult.length > 0"
                  class="searchResultBox"
                >
                  <li
                    class="searchItem"
                    v-for="searchItem in item.searchResult"
                    :title="searchItem.tagName"
                    @click="selectSearchFiled(searchItem,index)"
                  >{{searchItem.tagName}}</li>
                </ul>
              </div>
              <div>
                <p>已选择字段：</p>
                <div class="selectFiledBox">
                  <div class="orderBox">
                    <span class="el-icon-arrow-up order" @click="upFiled(index)"></span>
                    <span class="el-icon-arrow-down order" @click="downFiled(index)"></span>
                  </div>
                  <div class="selectFiled" v-for="(it,ii) in item.selectFiled">
                    <span
                      class="filedName"
                      :class="{activeFiledName: item.activeIndex == ii}"
                      @click="setActiveIndex(index,ii)"
                    >
                      {{it.tagName}}
                      <span
                        class="el-icon-circle-close delFiled"
                        @click="delSelected(ii,index)"
                      ></span>
                    </span>
                  </div>
                </div>
              </div>
              <span class="el-icon-circle-close delUnit" @click="delUnit(index)"></span>
            </div>
            <span class="addUnit">
              <el-button size="small" type="primary" @click="addUnit">+单元组</el-button>
            </span>
          </el-form-item>
        </el-form>
        <el-button
          class="disclButn"
          size="small"
          type="primary"
          :disabled="saveDisable"
          @click="confirm('form')"
        >确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@api/qualityControl.js';
import QCTypePour from './QCTypePour.vue';
export default {
  name: 'AddQualityControlTemp',
  data: function() {
    return {
      title: '模板维护-添加',
      isEdit: false,
      isCopy: false,
      saveDisable: false,
      form: {
        tempName: '',
        hospital: '',
        moduleName: '',
        moduleTypes: [],
        recordAnalyzeList: [],
        nameType: '',
        defaultModule: 0
      },
      rules: {
        tempName: {
          required: true,
          message: '请输入模块名称',
          trigger: ['blur', 'change']
        },
        hospital: {
          required: true,
          message: '请选择医院',
          trigger: ['blur', 'change']
        },
        moduleName: {
          required: true,
          message: '请选择所属模块',
          trigger: ['blur', 'change']
        },
        moduleTypes: {
          required: true,
          message: '请选择模块类型   ',
          trigger: ['blur', 'change']
        }
        /*name:[{ required: true, message: '请输入显示名称',trigger: ['blur', 'change'] }],*/
      },
      searchIndex: -1,

      hospitalList: [],
      moduleList: [],
      moduleInfoList: [],
      showInfo: '否'
    };
  },
  created() {
    this.getAllTypes();
    const { isCopy, isEdit, data } = this.$route.params;
    if (isEdit || isCopy) {
      this.form.hospital = '' + data.hospitalId;
      this.form.moduleName = '' + data.modeId;
      this.form.defaultModule = +data.defaultModule;
      if (isEdit) {
        this.isEdit = isEdit;
        this.id = data.id;
        this.title = '模板维护-修改';
        this.form.tempName = data.name;
        this.form.recordAnalyzeList = data.recordAnalyzeList;
      }
      if (isCopy) {
        this.isEdit = isEdit;
        this.isCopy = isCopy;
        this.id = '';
        this.title = '模板维护-复制';
        this.form.tempName = '';
        this.form.moduleTypes = [];
        //this.form.example=""
      }
      const moduleDetail = data.moduleDetail;
      const keysList = Object.keys(moduleDetail);
      for (let i = 0; i < keysList.length; i++) {
        let selectFiled = [];
        for (let j = 0; j < moduleDetail[keysList[i]].length; j++) {
          const item = moduleDetail[keysList[i]][j];
          selectFiled.push(item.questionDTO);
        }
        this.moduleInfoList.push({
          searchName: '',
          activeIndex: -1,
          searchResult: [],
          selectFiled: selectFiled
        });
      }
    }
  },
  methods: {
    // 切换默认标准模板
    handleTemChange(data) {
      console.log(data,7777777)
    },

    moduleTypeChange(list) {
      this.form.moduleTypes = [...list];
    },
    closeSearch() {
      if (this.searchIndex > -1) {
        this.moduleInfoList[this.searchIndex].searchName = '';
        this.moduleInfoList[this.searchIndex].searchResult = [];
        this.searchIndex = -1;
      }
    },
    getAllTypes() {
      /*if (localStorage.getItem('qcModuleTypes')) {
        this.hospitalList = JSON.parse(localStorage.getItem('qcHospitalTypes'));
        this.moduleList = JSON.parse(localStorage.getItem('qcModuleTypes'));
        return new Promise(function(resolve, reject) {
          resolve();
        });
      }*/
      //获取枚举信息
      return api.getQcTypes().then(res => {
        if (res.data.code === '0') {
          const data = res.data.data;
          /*localStorage.setItem('qcFieldTypes', JSON.stringify(data[11]));
          localStorage.setItem('qcModuleTypes', JSON.stringify(data[12]));
          localStorage.setItem('qcHospitalTypes', JSON.stringify(data[13]));*/
          this.hospitalList = data[13];
          this.moduleList = data[12];
        } else {
          this.warning('获取枚举信息失败');
        }
      });
    },
    stopClick(e) {
      console.log('11111');
      // e.stopPropagation()
    },
    changeHsopital() {
      this.form.moduleTypes = [];
    },
    changeModule() {
      this.form.moduleTypes = [];
    },
    addUnit() {
      const { hospital, moduleName, tempName, moduleTypes } = this.form;
      if (!hospital) {
        this.warning('请先选择所属医院');
        return;
      }
      if (!moduleName) {
        this.warning('请选择所属模块');
        return;
      }
      if (!tempName.trim()) {
        this.warning('请输入模块名称');
        return;
      }
      if (!moduleTypes.length) {
        this.warning('请先选择模块类型');
        return;
      }
      this.moduleInfoList.push({
        searchName: '',
        activeIndex: -1,
        searchResult: [],
        selectFiled: []
      });
    },
    searchFiled(index) {
      this.searchIndex = index;
      const searchName = this.moduleInfoList[index].searchName;
      if (!searchName) {
        return;
      }
      const param = {
        tagName: searchName,
        hospitalId: this.form.hospital,
        modeId: [this.form.moduleName]
      };
      api
        .getQCName(param)
        .then(res => {
          if (res.data.code == '0') {
            this.moduleInfoList[index].searchResult = [];
            this.moduleInfoList[index].searchResult.push(...res.data.data);
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    selectSearchFiled(searchItem, index) {
      this.moduleInfoList[index].selectFiled.push(searchItem);
      this.searchIndex = -1;
      this.moduleInfoList[index].searchName = '';
      this.moduleInfoList[index].searchResult = [];
    },
    setActiveIndex(index, ii) {
      let activeIndex = this.moduleInfoList[index].activeIndex;
      if (ii === activeIndex) {
        this.moduleInfoList[index].activeIndex = -1;
      } else {
        this.moduleInfoList[index].activeIndex = ii;
      }
    },
    upUnit(index) {
      if (index == 0) {
        return;
      }
      const current = this.moduleInfoList[index];
      const currentPre = this.moduleInfoList[index - 1];
      this.moduleInfoList.splice(index - 1, 2, current, currentPre);
    },
    downUnit(index) {
      if (index == this.moduleInfoList.length - 1) {
        return;
      }
      const current = this.moduleInfoList[index];
      const currentNext = this.moduleInfoList[index + 1];
      this.moduleInfoList.splice(index, 2, currentNext, current);
    },
    upFiled(index) {
      let activeIndex = this.moduleInfoList[index].activeIndex;
      if (activeIndex == 0 || activeIndex == -1) {
        return;
      }
      const current = this.moduleInfoList[index].selectFiled[activeIndex];
      const currentPre = this.moduleInfoList[index].selectFiled[
        activeIndex - 1
      ];
      this.moduleInfoList[index].selectFiled.splice(
        activeIndex - 1,
        2,
        current,
        currentPre
      );
      this.moduleInfoList[index].activeIndex--;
    },
    downFiled(index) {
      let activeIndex = this.moduleInfoList[index].activeIndex;
      if (
        activeIndex == this.moduleInfoList[index].selectFiled.length - 1 ||
        activeIndex == -1
      ) {
        return;
      }
      const current = this.moduleInfoList[index].selectFiled[activeIndex];
      const currentNext = this.moduleInfoList[index].selectFiled[
        activeIndex + 1
      ];
      this.moduleInfoList[index].selectFiled.splice(
        activeIndex,
        2,
        currentNext,
        current
      );
      this.moduleInfoList[index].activeIndex++;
    },
    delSelected(ii, index) {
      this.moduleInfoList[index].selectFiled.splice(ii, 1);
    },
    delUnit(index) {
      this.moduleInfoList.splice(index, 1);
    },
    confirm(form) {
      // this.$refs[form].validate((valid) => {
      //     if (valid) {
      const {
        tempName,
        hospital,
        moduleName,
        moduleTypes,
        defaultModule
      } = this.form;
      let moduleDetail = [],
        moduleInfoList = this.moduleInfoList;
      for (let i = 0; i < moduleInfoList.length; i++) {
        for (let j = 0; j < moduleInfoList[i].selectFiled.length; j++) {
          let item = {
            groupId: i,
            questionId: moduleInfoList[i].selectFiled[j].id
          };
          moduleDetail.push(item);
        }
      }
      if (!hospital) {
        this.warning('请选择所属医院');
        return;
      }
      if (!moduleName) {
        this.warning('请选择所属模块');
        return;
      }
      if (!tempName) {
        this.warning('请输入模块名称');
        return;
      }
      if (!moduleTypes.length) {
        this.warning('请选择模块类型');
        return;
      }

      if (moduleDetail.length === 0) {
        this.warning('请添加模块内容');
        return;
      }
      let param = {
        defaultModule: defaultModule,
        defineType: 0,
        name: tempName,
        modeId: moduleName,
        hospitalId: hospital,
        moduleDetail: moduleDetail,
        remark: '',
        recordIdList: moduleTypes
      };
      if (this.isEdit) {
        param = Object.assign({}, param, { id: this.id });
      }
      if (this.id && !this.isCopy) {
        //修改

        this.saveDisable = true; //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
        api.saveOrUpdateQCTemp(param).then(res => {
          //   console.log(res,'请求结果');
          if (res.data.code === '-1') {
            // 默认标准类型存在,是否替换
            this.$alert('默认标准模版已存在，是否替换？', '提示', {
              confirmButtonText: '确定',
              type: 'warning'
            })
              .then(() => {
                param = { ...param, defineType: 1 };
                api.saveOrUpdateQCTemp(param).then(res => {
                  if (res.data.code == 0) {
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    });
                    //返回带搜索条件的首页
                    this.$router.push({
                      name: 'QualityControlTemp',
                      params: Object.assign({}, this.$route.params, {
                        currentPage: 1
                      })
                    });
                  } else {
                    this.$message({
                      message: res.data.msg,
                      type: 'warning'
                    });
                  }
                });
              })
              .catch(() => {});
          } else if (res.data.code == 0) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            //返回带搜索条件的首页
            this.$router.push({
              name: 'QualityControlTemp',
              params: Object.assign({}, this.$route.params, { currentPage: 1 })
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
          this.saveDisable = false;
        });
      } else {
        //添加
        this.saveDisable = true; //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
        api.saveOrUpdateQCTemp(param).then(res => {
          if (res.data.code === '-1') {
            // 默认标准类型存在,是否替换
            this.$alert('默认标准模版已存在，是否替换？', '提示', {
              confirmButtonText: '确定',
              type: 'warning'
            })
              .then(() => {
                param = { ...param, defineType: 1 };
                api.saveOrUpdateQCTemp(param).then(res => {
                  if (res.data.code == 0) {
                    this.$message({
                      message: '添加成功',
                      type: 'success'
                    });
                    this.$router.push({ name: 'QualityControlTemp' });
                  } else {
                    this.$message({
                      message: res.data.msg,
                      type: 'warning'
                    });
                  }
                });
              })
              .catch(() => {});
          } else if (res.data.code == 0) {
            // 不互斥
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.$router.push({ name: 'QualityControlTemp' });
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
          this.saveDisable = false;
        });
      }
      //     } else {
      //         return false;
      //     }
      // });
    },
    warning(msg, type, time) {
      this.$message({
        showClose: true,
        message: msg,
        type: type || 'warning',
        duration: time || '3000'
      });
    }
  },
  components: {
    QCTypePour
  }
};
</script>
<style lang="less" scoped>
.contentWrapper {
  padding: 50px 20px 0;
}
.content {
  background: #fff;
}
.formItem {
  /deep/.el-form-item__label {
    width: 150px;
  }
}
/deep/.el-form-item__content {
  display: inline-block;
}
/deep/.el-input__inner {
  height: 30px;
  line-height: 30px;
  // width: 200px;
}
/deep/.widthLarge .el-input__inner {
  width: 350px;
}
/deep/.addCon .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
.formExam {
  /deep/.el-form-item__content {
    width: calc(100% - 185px);
  }
}
.exampleTxt {
  display: inline-block;
  position: relative;
  width: 100%;
  max-height: 200px;
  padding: 0 20px 0 0;
  height: 100%;
  word-break: break-all;
  overflow-y: auto;
}
.moduleInfoItem {
  width: 500px;
  min-height: 200px;
  padding: 0 50px 0 50px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  margin-bottom: 20px;
  position: relative;
}
.addUnit {
  display: inline-block;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  width: 80px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
}

.searchBox {
  width: 500px;
  position: relative;
}
.searchResultBox {
  position: absolute;
  width: 500px;
  box-sizing: border-box;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  z-index: 2;
  border: 1px solid #48c5d7;
}
.searchItem {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.searchItem:hover {
  background-color: #f5f7fa;
}
.selectFiled {
  position: relative;
}
.orderBox {
  position: absolute;
  left: -50px;
  top: 50%;
  width: 50px;
  height: 84px;
  margin-top: -42px;
}
.selectFiledBox {
  position: relative;
  min-height: 120px;
}
.order {
  display: inline-block;
  width: 30px;
  height: 30px;
  font-size: 30px;
  margin-left: 5px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
}
.firstItem {
  margin-left: 28px;
}
.delUnit,
.delFiled {
  position: absolute;
  top: -8px;
  right: -6px;
  cursor: pointer;
}
.delFiled {
  top: -7px;
  right: -9px;
}
.filedName {
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px 10px;
  display: inline-block;
  line-height: 20px;
}
.activeFiledName {
  border: 1px solid #48c5d7;
}
.showInfo {
  margin-left: 16px;
}
</style>