<template>
  <div class="customize-field-dialog">
    <el-dialog
      :title="$t('pages.specialIdRoleManagement.customizeField.dialogTitle')"
      :visible="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <div class="form-dialog-api-sing">
        <el-form label-width="80px" :model="addAttributeForm" style="margin-right: 20px;">

          <el-row v-for="(item, index) in addAttributeForm.attributes" :key="index" :gutter="10">
            <el-col :span="12">
              <el-form-item :label="$t('pages.specialIdRoleManagement.customizeField.key')">
                <el-input v-model="item.key" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('pages.specialIdRoleManagement.customizeField.value')">
                <el-input v-model="item.value" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cleanSingAttribute">{{ $t('pages.specialIdRoleManagement.customizeField.clear') }}</el-button>
        <el-button @click="addAttribute">{{ $t('pages.specialIdRoleManagement.customizeField.add') }}</el-button>
        <el-button @click="recommendAttribute">{{ $t('pages.specialIdRoleManagement.customizeField.recommend') }}</el-button>
        <el-button type="primary" @click="submitAddSingAttribute">{{ $t('common.submit') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CustomizeField',
  props: {
    customizeField: {
      type: Object,
      require: false,
      default: () => {}
    }
  },
  data() {
    return {
      addAttributeForm: {
        attributes: [
          { key: '', value: '' }
        ]
      },
      submitApiSignFormLoading: false,
      apiSingParamContent: null
    }
  },
  watch: {
    customizeField: {
      immediate: true,
      handler(newVal) {
        if (!newVal) {
          return
        }
        this.addAttributeForm.attributes = []
        for (var key in newVal) {
          this.addAttributeForm.attributes.push({ key, value: newVal[key] })
        }

        if (this.addAttributeForm.attributes.length <= 0) {
          this.addAttributeForm.attributes.push({ key: '', value: '' })
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    recommendAttribute() {
      const attr = {
        'fontColor': '',
        'level': ''
      }
      for (var key in attr) {
        this.addAttributeForm.attributes.push({ key, value: attr[key] })
      }
    },
    cleanSingAttribute() {
      this.addAttributeForm.attributes = [{ key: '', value: '' }]
    },
    submitAddSingAttribute() {
      const attributes = this.addAttributeForm.attributes
      const resultModel = {}
      for (let index = 0; index < attributes.length; index++) {
        const attribute = attributes[index]
        if (!attribute.key || !attribute.value) {
          continue
        }
        resultModel[attribute.key] = attribute.value
      }
      this.$emit('submit', resultModel)
    },

    addAttribute() {
      this.addAttributeForm.attributes.push({ key: '', value: '' })
    }
  }
}
</script>

<style scoped lang="scss">
.sgin-content {
  background: rgb(243, 240, 240);
  padding: 20px;
}
</style>
