<template>
  <div>
    <el-form-item prop="keyName" v-if="optionModel.keyNameEnabled">
      <span slot="label">数据属性名称
        <el-tooltip effect="light" content="数据属性名称是指form-data对象中字段组件所对应的属性名称">
          <i class="el-icon-info"></i></el-tooltip>
      </span>
      <el-input type="text" v-model="optionModel.keyName" :disabled="hasConfig('keyNameSuffix')"></el-input>
    </el-form-item>
    <el-form-item prop="keyName" label="属性名称前缀" v-if="optionModel.keyNameEnabled && hasConfig('keyNameSuffix')">
      <span>{{ keyNamePrefixMap[selectedWidget.type] }}</span>
    </el-form-item>
    <el-form-item prop="keyName" label="属性名称后缀" v-if="optionModel.keyNameEnabled && hasConfig('keyNameSuffix')">
      <el-input
        class="search-input"
        max="200"
        v-model="optionModel.keyNameSuffix"
        @change="changeKeyNameSuffix"
      >
        <el-tooltip slot="suffix" :enterable="false" effect="dark" content="随机生成" placement="top">
          <i class="el-input__icon el-icon-refresh-right" @click="createRandomName"></i>
        </el-tooltip>
      </el-input>
    </el-form-item>
  </div>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n"
import propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin"
import {keyNamePrefixMap} from "../../../../../../components/xform/form-designer/widget-panel/widgetsConfig";

export default {
  name: "keyName-editor",
  mixins: [i18n, propertyMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      keyNamePrefixMap
    }
  },
  methods: {
    changeKeyNameSuffix(val) {
      this.optionModel.keyName = this.designer.createKeyName(this.selectedWidget.type, val);//生成属性名称
    },
    createRandomName() {
      this.$baseConfirm('您确定要生成属性名称后缀吗？').then(() => {
        this.optionModel.keyNameSuffix = this.designer.createKeyNameSuffix(this.selectedWidget.type);//生成后缀
        this.changeKeyNameSuffix(this.optionModel.keyNameSuffix)
        this.$message({
          type: "success",
          message: "success",
          duration: 1000
        })
      });
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
