<template>
    <div>
        <crumbs :title="title" :param="$route.params" linkTo="QCTypeMang"></crumbs>
        <div class="contents">
            <div class="content">
                <el-form ref="form" :label-position="labelPosition" label-width="125px" :model="form" :rules="rules">
                    <el-form-item label="所属医院：" prop="hospitalId">
                        <el-select v-model="form.hospitalId"
                                   placeholder="请选择"
                                   :disabled="!!this.form.id||copy"
                                   @change="changeHospital"
                                   size="small">
                            <el-option
                                    v-for="item in hisTypes"
                                    :key="item.val"
                                    :label="item.name"
                                    :value="item.val">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="质控类型：" prop="name">
                        <el-input type="text" placeholder="请输入质控类型" v-model="form.name"></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="qcItem" :class="spread?'qcitem-list':'qcitem-list-up'">
                        <el-collapse>
                            <el-collapse-item v-for="(item,i) in qcItemList" :title="i" :name="i">
                                <el-table
                                        :data="item">
                                    <el-table-column
                                            label="操作"
                                            align="center"
                                            width="90">
                                        <template slot-scope="scope">
                                            <el-checkbox v-model="scope.row.sel" :checked="scope.row.sel?true:false" true-label="1" false-label="0"></el-checkbox>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            width="460"
                                            label="质控条目">
                                    </el-table-column>
                                    <el-table-column
                                            width="100"
                                            label="终末质控">
                                        <template slot-scope="scope">
                                            {{scope.row.isUsed==="1"?"是":"否"}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            width="100"
                                            label="运行质控">
                                        <template slot-scope="scope">
                                            {{scope.row.isUsedRun==="1"?"是":"否"}}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                        </el-collapse>
                    </el-form-item>
                    <img v-if="spread" src="../../images/up.png" class="spread-icon" @click="toggleSpread" title="收起" alt="收起"/>
                    <img v-if="!spread" src="../../images/spread.png" class="spread-icon" @click="toggleSpread" title="展开" alt="展开"/>
                    <el-form-item label="其他质控类型：" prop="typeIdList" class="formItem widthLarge">
                    </el-form-item>
                    <OtherQcTypePour :hospital="form.hospitalId"
                                     :moduleName="form.entryId"
                                     :typeId="form.id"
                                     @changeActionData="moduleTypeChange"
                                     :selectedTag="form.qcTypeSimpDTOList"></OtherQcTypePour>
                    <el-button class="disclButn" size="small" type="primary" :disabled = 'saveDisable' @click="comfirn('form')">确定</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
  import api from '@api/qualityControl.js';
  import OtherQcTypePour from './OtherQcTypePour.vue';
  export default {
    name:'AddQcType',
    data(){
      return{
        // data:{},
        list:[],
        labelPosition:'left',
        title:'质控类型维护-添加质控类型',
        spread:false,
        hisTypes:[],
        form:{
          id:'',
          hospitalId:'',
          name:'',
          qcTypeCasesEntryVOList:[],
          qcTypeSimpDTOList:[],
          entryId:'',     //兼容
          typeIdList:[],//其他质控类型id
          // defaultModule: 0
        },
        rules:{
          hospitalId:{ required: true, message: '请选择所属医院', trigger: ['blur', 'change']},
          //qcItem:{ required: true, message: '请选择质控条目', trigger: ['blur', 'change']},
          name:[{ required: true, message: '请输入质控类型', trigger: ['blur', 'change']},{
            validator:(rule, value, callback)=>{
              if(!value.trim()){
                callback(new Error('请输入质控类型'));
              }else{
                callback();
              }
            }, trigger: 'blur'
          }],
        },
        showInfo: '否',
        copy:null,
        saveDisable: false,  //保存按钮禁止点击
        qcItemList:{},
      }
    },
    components:{
      OtherQcTypePour
    },
    created(){
      this.getAllTypes();
      let {isCopy,info} = this.$route.params;
      this.copy=isCopy;
      if(info){
        const infoCopy =  Object.assign({},info);
        this.title=isCopy?"质控类型维护-复制质控类型":'质控类型维护-修改质控类型';
        this.qcItemList=infoCopy.entryMap;
        this.form = {
          id:isCopy?"":infoCopy.id,
          hospitalId:''+infoCopy.hospitalId,
          name:infoCopy.name,
          qcTypeCasesEntryVOList:[],
          qcTypeSimpDTOList:isCopy?[]:infoCopy.qcTypeSimpDTOList,
          // defaultModule:+infoCopy.defaultModule
        };
        //this.getQcTypeItem({hospitalId:info.hospitalId});
      }else{
        const that = this;
        setTimeout(()=>{
          let hospitalId = that.hisTypes[0].val;
          that.form.hospitalId = hospitalId;
          that.getQcTypeItem({hospitalId:hospitalId});
        },100)
      }
    },
    watch:{
      "qcItemList":{
        handler:function(val){
          let list = [];
          for(let it in val){
            val[it].map((t)=>{
              if(t.sel==='1'){
                list.push({caseEntryId:t.id});
              }
            })
          }
          this.form.qcTypeCasesEntryVOList=list;
        },
        deep:true
      }
    },
    methods:{
      handleTemChange() {},
      toggleSpread(){
        this.spread=!this.spread;
      },
      moduleTypeChange(list){
        this.form.typeIdList=[...list];
      },
      changeHospital(val){
        localStorage.setItem("qcSelectHospital",val);
        this.getQcTypeItem({hospitalId:val});
      },
      getQcTypeItem(){
        const { hospitalId,name } = this.form;
        if(hospitalId === ''){
          return
        }
        const param={hospitalId:hospitalId,input:name,size:500};
        api.getQcTypeItem(param).then((res)=>{
          if(res.data.code==="0") {
            const data = res.data.data;
            this.qcItemList = data;
          }else{
            this.warning("获取缺陷条目失败");
          }
        });
      },
      getAllTypes(){
        /*if(localStorage.getItem("qcHospitalTypes")){
          this.hisTypes = JSON.parse(localStorage.getItem("qcHospitalTypes"));
          return ;
        }*/
        //获取枚举信息
        api.getQcTypes().then((res)=>{
          if(res.data.code==="0"){
            const data = res.data.data;
            this.hisTypes =data[13];
            /*localStorage.setItem("qcFieldTypes",JSON.stringify(data[11]));
            localStorage.setItem("qcModuleTypes",JSON.stringify(data[12]));
            localStorage.setItem("qcHospitalTypes",JSON.stringify(data[13]));*/
          }else{
            this.warning("获取枚举信息失败");
          }
        });
      },
      comfirn(form){
        this.$refs[form].validate((valid) => {
          if (valid) {
            if(this.form.id){//修改
              let param = Object.assign({},this.form,{qcTypeSimpDTOList:undefined});
              param.name=param.name.trim();
              this.saveDisable = true;  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
              api.addQcType(param).then((res)=>{
                if(res.data.code==0){
                  this.$message({
                    message:"修改成功",
                    type:'success'
                  });
                  //返回带搜索条件的首页
                  this.$router.push({
                    name: 'QCTypeMang',
                    params: Object.assign({}, this.$route.params, {currentPage: 1})
                  });
                }else{
                  this.$message({
                    message:res.data.msg,
                    type:'warning'
                  });
                }
                this.saveDisable = false
              })
            }else{//添加
              let params = Object.assign({},this.form);
              params.name=params.name.trim();
              this.saveDisable = true;  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
              api.addQcType(params).then((res)=>{
                if(res.data.code==0){
                  this.$message({
                    message:"添加成功",
                    type:'success'
                  });
                  this.$router.push({name: 'QCTypeMang'});
                }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'
        })
      },
    }
  }
</script>
<style>
    .content .el-form-item.is-success .el-input__inner{
        border-color: #ccc;
    }
    .content .el-form-item.is-success .el-input__inner:focus{
        border-color: #48C5D7;
    }
</style>
<style lang="less" scoped>
    .content {
        background: #fff;
        padding: 20px 20px 50px;
        color: #545455;
        min-width: 980px;
        position: relative;
    .el-checkbox{
        display: inline-block;
        margin: 0;
    }
    }
    .el-form-item{
        width: 900px;
    }
    .el-select.big-select{
        width: 360px;
    }
    .showInfo {
      margin-left: 16px;
    }
    .qcitem-list-up{
        max-height: 150px;
        overflow-y: hidden;
    }
    .spread-icon{
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-left: 448px;
    }
</style>