<template>
  <div>
    <el-dialog class="no-body-padding-dialog" title="编辑标引" :visible.sync="visible" width="450px" append-to-body destroy-on-close :before-close="close" top="10vh">
      <el-container class="patent-index-setting">
        <el-header>
          <div class="patent-index-setting-title">
            <span>字段名称:</span>
            <span class="padding-left_10">{{ customField.name }}</span>
          </div>
        </el-header>
        <el-main class="patent-index-setting-main">
          <div class="patent-label" v-if="fieldType == 10">
            <el-tag v-for="label in dynamicLabels" closable :disable-transitions="false" @close="handleCloseLabel(label)">{{ label }}</el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputLabelVisible"
                v-model="inputLabelValue"
                ref="saveLabelInput"
                size="small"
                @keyup.enter.native="handleInputLabelConfirm"
                @blur="handleInputLabelConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInputLabel">添加标签</el-button>
          </div>
          <div v-else>
            <template v-if="fieldType == 0 || fieldType == 2 || fieldType == 1">
              <div v-for="(item, index) in selected" class="custom-input">
                <el-date-picker v-if="fieldType === 1" v-model="item.label" value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                <el-input v-else type="textarea" v-model="item.label" placeholder="请输入内容" size="small"></el-input>
              </div>
            </template>
            <template v-if="fieldType == 4">
              <el-radio-group v-model="selected">
                <div v-for="option in customField.option">
                  <el-radio :label="option.id" @click.native.prevent="clickItem(option)">{{ option.name }}</el-radio>
                </div>
              </el-radio-group>
            </template>
            <template v-if="fieldType == 5">
              <el-checkbox-group v-model="selected">
                <div v-for="option in customField.option">
                  <el-checkbox :label="option.id">{{ option.name }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </template>
            <template v-if="fieldType === 6">
              <el-tree
                  ref="tree"
                  :data="customField.option"
                  check-strictly
                  :default-checked-keys="selected"
                  show-checkbox
                  node-key="id"
                  :props="defaultProps"
              ></el-tree>
            </template>
          </div>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:{
    projectId:{
      default:null
    },
    taskId:{
      default:null
    }
  },
  data() {
    return {
      btnLoading: false,
      inputLabelVisible: false,
      visible: false,
      customField: {},
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      dynamicLabels: [],
      inputLabelValue: '',
      field: {},
      fieldType: 0,
      fieldId: 0,
      row: {},
      selected: [],
      patent:{},
      search:{},
    }
  },
  mounted() {
  },
  methods: {
    clickItem(option){
      if(option.id == this.selected){
        this.$set(this,'selected',null)
      }else{
        this.$set(this,'selected',option.id)
      }
    },
    handleCloseLabel(label) {
      this.dynamicLabels.splice(this.dynamicLabels.indexOf(label), 1);
    },
    handleInputLabelConfirm() {
      let inputLabelValue = this.inputLabelValue;
      if (inputLabelValue) {
        this.dynamicLabels.push(inputLabelValue);
      }
      this.inputLabelVisible = false;
      this.inputLabelValue = '';
    },
    showInputLabel() {
      this.inputLabelVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveLabelInput.$refs.input.focus();
      });
    },
    handleDeleteInput(index) {
      this.selected.splice(index, 1)
    },
    handleAddInput(item) {
      if (!item.label) {
        this.$message.error('请录入内容')
        return false
      }
      item.value = 0
      this.selected.push({
        value: -1,
        label: ''
      })
    },
    //获取已选中选项值、已添加的值
    getSelected(item) {
      let params = {
        projectId: this.projectId,
        // taskId: this.taskId,
        fieldType: item.type,
        fieldId: item.id,
        patentNo: this.patent.patentNo,
      }
      this.$api.getCustomFieldValues(params).then(response => {
        if (response.code == 200) {
          // item.selected = response.data.data
          this.$set(item,'selects',response.data.data)
          switch (item.type) {
            case '0'://数字，日期，文字
            case '1':
            case '2':
              var value = [
                {
                  label:(item.selects && item.selects.length > 0) ? item.selects[0].value : ''
                }
              ]
              this.$set(this, 'selected', value)
              break;
            case '4'://单选
              this.$set(this, 'selected', (item.selects && item.selects.length > 0) ? item.selects[0].valueId : '')
              break;
            case '6'://多选和树
            case '5':
              var a = []
              // item.selectedValue = []
              a = (item.selects && item.selects.length > 0) ? item.selects.map(item => item.valueId) : []
              this.$set(this, 'selected', a)
              break;

            default:
              break;
          }

        }
      }).catch(error => {
        this.selected = []
      })
    },
    getOption(item) {
      switch (item.type) {
        case '0':
        case '1':
        case '2':
          break;
        case '4':
        case '5':
          this.getCustomOption(item)
          break;
        case '6':
          this.queryProductCategory(item, 4)
          break;
        case '7'://接口传值类型：1产品类别，2产品，3技术分类，4自定义树
          this.queryProductCategory(item, 2)
          break;
        case '8':
          this.queryProductCategory(item, 1)
          break;
        case '9':
          this.queryProductCategory(item, 3)
          break;
      }
    },
    //查询自定义栏位选项
    getCustomOption(item) {
      var params = {
        customFieldId: item.id
      }
      this.$api.queryCustomOption(params).then(response => {
        if (response.code == 200) {
          this.$set(item, 'option', response.data.data)
        }
      }).catch(error => {
        this.$set(item, 'option', [])
      })
    },
    //获取产品或产品类别架构以及技术分类
    queryProductCategory(item, type) {
      let params = {
        projectId: this.projectId,
        taskId: this.taskId,
        type: type,//类型：1产品类别，2产品，3技术分类，4自定义树
        typeId: item.id,//产品或类别id
      }
      this.$api.queryTreeNodeTree(params).then(res => {
        if (res.code == 200) {
          this.$set(item, 'option', res.data.data)
        }
      }).catch(err => {
        this.$set(item, 'option', [])
      })
    },
    //获取标签
    getPatentField(){
      var params = {
        projectId : this.projectId,
        patentNos:[this.patent.patentNo],
        innerFields:[
          {
            fieldType:10,
            fieldId:0
          }
        ]
      }
      this.$api.getPatentFields(params).then(response=>{
        if(response.code == 200){
          var data = response.data.data
          if(data && data.length>0){
            var inner = data[0].innerClassFields
            if(inner && inner.length>0){
              this.dynamicLabels = inner[0].fieldValueVOS.map(item=>item.value)
            }else{
              this.dynamicLabels = []
            }
            
          }else{
            this.dynamicLabels = []
            } 
        }
      })
    },
    open(obj,patent, field) {
      this.field = field
      this.patent = patent
      this.search = obj
      this.visible = true
      this.selected = []
      this.fieldType = parseInt(field.type)
      if (field.type !== '10') {
        this.fieldId = parseInt(field.value)
        this.customField = {
          id:field.value,
          name:field.name,
          type:field.type
        }
        this.getSelected(this.customField)
        this.getOption(this.customField)
      } else {
        this.customField = {
          name: '标签'
        }
        this.getPatentField()
        
      }
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    submit() {
      this.btnLoading = true
      if (this.fieldType === 10) {
        let data = {
          projectId: this.projectId,
          patentNo:this.patent.patentNo,
          labels:this.dynamicLabels
        }
        this.$api.addPatentLabel(data).then(response => {
          this.$message.success('操作成功')
          this.visible = false
          this.btnLoading = false
          this.$emit('submit')
        }).catch(error => {
        })
      } else {
        let selected = []
        switch (this.fieldType) {
          case 0:
          case 1:
          case 2:
            selected = [
              {
                projectId:this.projectId,
                taskId:this.taskId,
                fieldType:this.fieldType,
                fieldId:this.fieldId,
                fieldValue:this.selected.map(item=>item.label),
                optionType:2
              }
            ]
            break
          case 3:
            // selected = [{
            //     projectId:this.projectId,
            //     taskId:this.taskId,
            //     fieldType:this.fieldType,
            //     fieldId:this.fieldId,
            //     fieldValue:[this.selected]
            // }]
            break
          case 4:
            selected = [{
              projectId:this.projectId,
                taskId:this.taskId,
                fieldType:this.fieldType,
                fieldId:this.fieldId,
                fieldValue:this.selected?[this.selected]:[],
                optionType:2
            }]
            break
          case 5:
              selected = [{
                projectId:this.projectId,
                taskId:this.taskId,
                fieldType:this.fieldType,
                fieldId:this.fieldId,
                fieldValue:this.selected,
                optionType:2
              }]
            break;
          case 6:
            const keys = this.$refs.tree.getCheckedKeys()
            // keys.map(item => selected.push({
            //   value: item,
            //   label: ''
            // }))
              selected = [{
                projectId:this.projectId,
                taskId:this.taskId,
                fieldType:this.fieldType,
                fieldId:this.fieldId,
                fieldValue:keys,
                optionType:2
              }]
            break
        }

        let params = {
          projectId: this.projectId,
          ...this.search,//选择的信息
          esCustomFieldDTOS: selected,
          taskId: this.taskId,
        }
        this.$api.batchAddCustomField(params).then(res => {
          if (res.code == 200) {
            this.$message.success('标引成功')
            this.visible = false
            this.btnLoading = false
            this.$emit('submit')
          }
        }).catch(error => {
          this.btnLoading = false
        })

      }
    }
  }
}
</script>

<style lang="scss">
.patent-index-setting {
  padding: 0 20px;
  height: 400px !important;
  .patent-index-setting-title {
    font-size: 17px;
  }
  .patent-index-setting-main {
    padding: 0;
    margin: 10px 0;
  }
  .patent-label {
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
  .custom-field-title {
    font-size: 17px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #c4c4c4;
  }
  .custom-input {
    margin-bottom: 10px;
    .el-input {
    }
    .el-button {
      float: right;
    }
  }
  .el-checkbox, .el-radio {
    line-height: 30px;
  }
}
</style>