<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 === 96">
            <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">{{ 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 {
  data() {
    return {
      btnLoading: false,
      inputLabelVisible: false,
      visible: false,
      customField: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dynamicLabels: [],
      inputLabelValue: '',
      projectId: 0,
      field: {},
      fieldType: 0,
      fieldId: 0,
      row: {},
      selected: []
    }
  },
  mounted() {
  },
  methods: {
    getList() {
      this.$api.getProjectCustomFieldById(this.fieldId).then(response => {
        this.customField = response.data
      })
      this.$api.getPatentIndexSetting({ id: this.row.id, fieldId: this.fieldId, projectId: this.projectId, type: this.fieldType }).then(response => {
        switch (this.fieldType) {
          case 0:
          case 1:
          case 2:
            if (response.data.length) {
              this.selected = response.data
            } else {
              this.selected.push({
                label: '',
                value: -1,
              })
            }
            break
          case 3:
          case 4:
            this.selected = response.data.length === 0 ? null : response.data[0].value
            break
          case 5:
          case 6:
            this.selected = response.data.map(item => item.value)
            break
        }
      })
    },
    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: ''
      })
    },
    open(projectId, row, field) {
      this.projectId = projectId
      this.field = field
      this.row = row
      this.visible = true
      this.selected = []
      if (field.key !== 'label') {
        this.fieldType = parseInt(field.type)
        this.fieldId = parseInt(field.key)
        this.getList()
      } else {
        this.customField = {
          name: '标签'
        }
        this.fieldType = 96
        this.dynamicLabels = row.label.map(item => item.name)
      }
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    submit() {
      this.btnLoading = true
      if (this.fieldType === 96) {
        let data = {
          projectId: this.projectId,
          patentId: this.row.id,
          type: this.fieldType,
          field: this.fieldId,
          selected: []
        }
        data.selected = this.dynamicLabels
        this.$api.updatePatentLabel(data).then(response => {
          this.$message.success('操作成功')
          this.visible = false
          this.btnLoading = false
          this.$emit('submit')
        }).catch(error => {
          this.btnLoading = false
        })
      } else {
        let selected = []
        switch (this.fieldType) {
          case 0:
          case 1:
          case 2:
            selected = this.selected
            break
          case 3:
          case 4:
            selected = [{
              label: "",
              value: this.selected
            }]
            break
          case 5:
            this.selected.map(item => selected.push({
              value: item,
              label: ''
            }))
            break;
          case 6:
            const keys = this.$refs.tree.getCheckedKeys()
            keys.map(item => selected.push({
              value: item,
              label: ''
            }))
            break
        }
        let data = {
          id: this.row.id,
          fieldId: this.fieldId,
          projectId: this.projectId,
          type: this.fieldType,
          selected: selected
        }
        this.$api.updatePatentIndexSetting(data).then(response => {
          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>