<template>
    <div>
        <crumbs :title="title" :param="$route.params" linkTo="RecordInput"></crumbs>
        <div class="contents">
            <div class="content ">
                <el-form ref="form" :label-position="labelPosition" label-width="90px" class="add-record-form clearfix" :model="form">
                    <div class="contentBox clearfix">
                        <div class="left fl clearfix">
                            <div class="selectHospital">
                               <el-select v-model="form.hospitalCode" placeholder="请选择医院">
                                  <el-option
                                    v-for="item in hospitalList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                  </el-option>
                              </el-select>
                            </div>
                            <div class="checkBox">
                              <el-checkbox-group v-model="checkList"  @change="changeCheck">
                                <el-checkbox v-for="item in casesEntryListSelect" :label="item.id" :disabled="item.disabled" :key="item.id">{{item.name}}</el-checkbox>
                              </el-checkbox-group>
                            </div>
                            <div class="contentBox">
                              <el-form-item v-for="item in textList" :label="item.label+':'" :key="item.id" prop="recordInfo">
                                  <el-input
                                        v-model.trim="item.recordInfo"
                                        type="textarea"
                                        :rows="12"
                                        placeholder="请输入内容">
                                  </el-input>
                              </el-form-item>
                            </div>
                            
                        </div>
                        <div class="right fr clearfix">
                            <el-select v-model="form.casesId" placeholder="请选择" @change="changeSelectCase">
                              <el-option
                                v-for="item in caseLIst"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                              </el-option>
                            </el-select>
                            <div class="casesEntryList">
                                <el-checkbox-group v-model="form.checkedcasesEntrys" >
                                    <el-checkbox v-for=" casesEntry in casesEntryList" :label="casesEntry.id" :key="casesEntry.id">{{casesEntry.name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                    <p class="oper">
                        <el-button style="margin-right: 30px" size="small" type="primary" :disabled="!canSumbit" @click="confirm('form')">确定</el-button>
                        <el-button size="small" @click="cancel">取消</el-button>
                    </p>
                </el-form>
               
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
  import api from '@api/records.js';
  export default {
    name:'AddRecord',
    data(){
      return{
        // data:{},
        labelPosition:'left',
        /*zybljlList:[
          {name:'aaa',content:'333333'},
          {name:'vvv',content:'333sa'}
        ],*/
        caseLIst:[],
        caseRemarkList:[],
        hospitalList:[],
        casesEntryList:[],
        textList:[],
        casesEntryListSelect:[],
        checkList:[],
        title:'病例录入-添加病例',
        form:{
          casesId:'',
          checkedcasesEntrys:[],
          hospitalCode:'',
        },
        id:null,
        modifier:'',
        canSumbit: true

      }
    },
    created(){
      
      const userLoginDTO = JSON.parse(localStorage.getItem('userLoginDTO'));
      this.modifier = userLoginDTO && userLoginDTO.linkman;
      const { isEdit, data } = this.$route.params;
      this.getRecordHopitalList();
      if(isEdit) {
          this.title = '病例录入-修改病例';
          this.id= data.id
          this.form.casesId = data.qcInputcasesMapping[0].casesId
          this.form.hospitalCode = data.hospitalId
          // this.form.recordInfo = data.text
          let checkedcasesEntrys = []
           Promise.all([this.getRecordInpModule(), this.getRecordCases()])
          //  this.getRecordInpModule()
           .then(()=>{
             console.log(' this.caseRemarkList', this.caseRemarkList)
            // this.changeSelectCase(this.form.casesId)
            this.casesEntryList = this.caseLIst.filter(item => item.id === this.form.casesId)[0].qcCasesEntry
            const caseListCopy =JSON.parse(JSON.stringify(this.caseLIst)) 
             const casesEntryListSelect = []
            for(let i = 0; i < caseListCopy.length; i++){
              if(caseListCopy[i].id != this.form.casesId) {
                casesEntryListSelect.push({
                  id: caseListCopy[i].id,
                  name: caseListCopy[i].name, 
                  disabled: false
                })
              }else{
                casesEntryListSelect.push({
                  id: caseListCopy[i].id,
                  name: caseListCopy[i].name, 
                  disabled: true
                })
              }
            }
            this.casesEntryListSelect = casesEntryListSelect

           
            let casesEntryIdList = this.getIdList(this.casesEntryList)
            for(let i = 0; i <  data.qcInputcasesMapping.length; i++) {
              if( data.qcInputcasesMapping[i].pass == '-1'){
              checkedcasesEntrys.push(data.qcInputcasesMapping[i].casesEntryId)
              } 
            }
            this.form.checkedcasesEntrys = checkedcasesEntrys
            const keys = Object.keys(data)
            for(let i = 0; i < keys.length; i++){
              const hasItem = this.caseRemarkList.find(item => item.remark == keys[i])
              if(hasItem&&data[hasItem.remark]){
                this.checkList.push(hasItem.id)
                this.textList.push({
                  id: hasItem.id,
                  label: hasItem.name,
                  remark: hasItem.remark,
                  recordInfo: data[hasItem.remark]
                })
              }
            }
          })
      }else {
        this.getRecordCases();
        this.getRecordInpModule()
      }

    },
    methods:{
      getRecordInpModule(){
        return api.getRecordInpModule({}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.caseLIst = result.data
          }else{
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },
      getRecordHopitalList(){
        return api.getRecordHopitalList({}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.hospitalList = result.data
          }else{
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },
      getRecordCases(){
         return api.getRecordCases({}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.caseRemarkList = result.data
          }else{
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },
      changeSelectCase(value){
        this.form.checkedcasesEntrys = []
        this.casesEntryList = this.caseLIst.filter(item => item.id === value)[0].qcCasesEntry
        const casesEntryListSelect = []
        const caseListCopy =JSON.parse(JSON.stringify(this.caseLIst)) 
        this.checkList = []
        this.textList= []
        for(let i = 0; i < caseListCopy.length; i++){
          if(caseListCopy[i].id !=value) {
            casesEntryListSelect.push({
              id: caseListCopy[i].id,
              name: caseListCopy[i].name, 
              disabled: false
            })
          }else{
            casesEntryListSelect.push({
              id: caseListCopy[i].id,
              name: caseListCopy[i].name, 
              disabled: true
            })
          }
        }
        this.casesEntryListSelect = casesEntryListSelect
        this.checkList.push(value)
        const selectCase = this.caseRemarkList.find(item => item.id == value)
        this.textList.push({
          id: selectCase.id,
          label: selectCase.name,
          remark: selectCase.remark,
          recordInfo: ''
        })
        
      },
      changeCheck(value){
        let textListId = []
        for(let i = 0; i < this.textList.length; i++){
          textListId.push(this.textList[i].id)
        }
        let noId = this.getArrDifference(textListId,value)[0]
        const noIndex = this.textList.findIndex(item => item.id == noId)
        if(noIndex > -1){
          this.textList.splice(noIndex,1)
        }else{
          const selectCase = this.caseRemarkList.find(item => item.id == noId)
            this.textList.push({
              id: selectCase.id,
              label: selectCase.name,
              remark: selectCase.remark,
              recordInfo: ''
            })
        }
      },
      cancel(){
        this.$router.push({
          name: 'RecordInput',
          params: Object.assign({}, this.$route.params)
        });
      },
      getArrDifference(arr1, arr2) {
          return arr1.concat(arr2).filter(function(v, i, arr) {
              return arr.indexOf(v) === arr.lastIndexOf(v);
          });
      },
      getIdList(arr){
        let  casesEntryIdList = []
        for(let i = 0; i < arr.length; i++){
          casesEntryIdList.push( arr[i].id)
        }
        return casesEntryIdList
      },
      confirm(form){
        const {hospitalCode, casesId, checkedcasesEntrys} = this.form
         if(!hospitalCode){
            this.warning('请选择医院')
           return
         }
         if(casesId === '') {
          this.warning('请选择模块ID')
           return
        }
        let qcInputMappingSaveVO = []
        let casesEntryIdList = this.getIdList(this.casesEntryList)
        let  noCheckList = this.getArrDifference(casesEntryIdList,checkedcasesEntrys)
        for(let i = 0; i < noCheckList.length; i++) {
          qcInputMappingSaveVO.push({
            casesEntryId: noCheckList[i],
            casesId: casesId,
            pass: 0
          })
        }
        for(let i = 0; i < checkedcasesEntrys.length; i++) {
          qcInputMappingSaveVO.push({
            casesEntryId: checkedcasesEntrys[i],
            casesId: casesId,
            pass: -1
          })
        }
        let param = {
          creator: this.modifier,
          hospitalId: this.form.hospitalCode,
          qcInputMappingSaveVO,
        }
        for(let i = 0; i < this.textList.length; i++){
          param[this.textList[i].remark] = this.textList[i].recordInfo
        }
        if(this.id){
          param = Object.assign(param,{id: this.id})
        }
        this.canSumbit = false
        api.addRecordInp(param).then((res)=>{
            this.canSumbit = true
            if(res.data.code==0){
                if(this.id){
                  this.warning('修改成功', 'success')
                }else{
                  this.warning('添加成功', 'success')
                }
                //返回带搜索条件的首页
                this.$router.push({
                  name: 'RecordInput',
                  // params: Object.assign({}, this.$route.params)
                });
            }else{
                this.warning(res.data.msg)
               
            }
        })
      },
      warning(msg,type){
        this.$message({
          showClose: true,
          message:msg,
          type:type||'warning'
        })
      },
    }
  }
</script>
<style lang="less">
    @import "../../less/admin.less";
    .content{
        background: #fff;
        padding: 20px 20px 50px;
        color: #545455;
        min-width: 980px;
        position: relative;
        .left,.right{
          width: 50%;
          // height: 450px;
          .el-select{
            width: 100%;
          }
        }
        .checkBox{
          margin: 20px 0 0 0;
          .el-checkbox{
            position: relative;
            margin: 0 30px  0 0px;
            line-height: 30px;
            .el-checkbox__input{
              position: absolute;
              top: 9px;
            }
            .el-checkbox__label{
              padding: 0 0 0 20px;
              white-space: normal;
              line-height: 30px;
            }
          }
        }
        .right{
          width: 45%;
          margin-left: 5%;
          .el-select{
            width: 80%;
          }
        }
        .contentBox{
          margin: 20px 0 0 0;
        }
        .casesEntryList{
          margin-top: 20px;
          padding: 10px 0;
          width: 80%;
          border: 1px solid #dcdfe6;
          height: 410px;
          overflow-y: auto;
          .el-checkbox{
            position: relative;
            display: block;
            width: calc(100% - 60px);
            margin-left: 30px;
            line-height: 30px;
            .el-checkbox__input{
              position: absolute;
              top: 9px;
            }
            .el-checkbox__label{
              padding: 0 0 0 20px;
              white-space: normal;
              line-height: 30px;
            }
          }
        }
        .short-inp{
            width: 200px;
        }
        .sub-title{
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 20px;
        }
        .oper{
          margin: 30px 0 0 0;
            padding-right: 80px;
            text-align: right;
        }
        .treatments{
          .el-input{
              width:200px;
              display: inline-block;
          }
        }
    }

</style>