<template>
  <div>
    <el-form-item prop="name" :rules="nameRequiredRule">
      <span slot="label"
        >{{ i18nt("designer.setting.uniqueName") }}
        <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
          <i class="el-icon-info"></i
        ></el-tooltip>
      </span>
      <template
        v-if="
          (!!selectedWidget.category && selectedWidget.type !== 'sub-form') || noFieldList
        "
      >
        <el-input
          type="text"
          v-model="optionModel.name"
          :readonly="widgetNameReadonly"
          @change="updateWidgetNameAndRef"
        ></el-input>
      </template>
      <template v-else>
        <el-select
          v-model="optionModel.name"
          allow-create
          filterable
          :disabled="true"
          @change="updateWidgetNameAndRef"
          :title="i18nt('designer.setting.editNameHelp')"
        >
          <el-option
            v-for="(sf, sfIdx) in serverFieldList"
            :key="sfIdx"
            :label="sf.label"
            :value="sf.name"
          ></el-option>
        </el-select>
      </template>
    </el-form-item>
    <el-form-item label="按钮编码" v-show="showAuthCode">
      <div style="word-break: break-all">
        <el-tooltip effect="light" content="复制">
          <a class="a-link" style="color: unset;" @click="copyAuthCode"><span><i class="el-icon-copy-document" style="margin-right:2px"></i>{{ authCode }}</span></a>
        </el-tooltip>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import i18n from "../../../../../components/xform/utils/i18n";
import { isEmptyStr } from "../../../../../components/xform/utils/util";
import Clipboard from 'clipboard'

export default {
  name: "name-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
    parentList: Array,
  },
  inject: ["serverFieldList", "getDesignerConfig", "isDataTableChildWidget"],
  data() {
    return {
      nameRequiredRule: [{ required: true, message: "name required" }],
    };
  },
  computed: {
    noFieldList() {
      return !this.serverFieldList || this.serverFieldList.length <= 0;
    },

    widgetNameReadonly() {
      return !!this.getDesignerConfig().widgetNameReadonly;
    },
    showAuthCode() {
      // return this.selectedWidget.category !== "container";
      return [
        "button",
        "a-text",
        "a-link",
        "a-link2",
        "search_button",
        "save_button",
        "reset_button",
        "table-export-button",
        "select-export-button",
        "add_button",
        "import-button",
        "import2-button",
        "print-button",
        "print-detail-button",
        "download-button",
        "copy_button",
        "tempStorage",
        "dropdown",
        "dropdown-item",
      ].includes(this.selectedWidget.type);
    },
    authCode() {
      return (
        this.designer.vueInstance?.reportTemplate?.formCode + ":" + this.optionModel.name
      );
    },
  },
  methods: {
    copyAuthCode(e){
      this.copyToClipboard(this.authCode, e, this.$message, '复制成功', '复制失败');
    },
    copyToClipboard(content, clickEvent, $message, successMsg, errorMsg) {
      const clipboard = new Clipboard(clickEvent.target, {
        text: () => content
      });

      clipboard.on('success', () => {
        $message.success(successMsg);
        clipboard.destroy();
      })

      clipboard.on('error', () => {
        $message.error(errorMsg);
        clipboard.destroy();
      });

      clipboard.onClick(clickEvent);
    },
    updateWidgetNameAndRef(newName) {
      let oldName = this.designer.selectedWidgetName;
      if (isEmptyStr(newName)) {
        this.selectedWidget.options.name = oldName;
        this.$message.info(this.i18nt("designer.hint.nameRequired"));
        return;
      }

      if (!!this.designer.formWidget) {
        let foundRef = this.designer.formWidget.getWidgetRef(newName); // 检查newName是否已存在！！

        if (!!foundRef) {
          if (this.isDataTableChildWidget()) {
            let parentList = this.parentList;
            for (let i; i < parentList.length; i++) {}
          } else {
            this.selectedWidget.options.name = oldName;
            this.$message.info(this.i18nt("designer.hint.duplicateName") + newName);
            return;
          }
        }

        let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName);
        if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
          widgetInDesign.registerToRefList(oldName); //注册组件新的ref名称并删除老的ref！！
          let newLabel = this.getLabelByFieldName(newName);
          this.designer.updateSelectedWidgetNameAndLabel(
            this.selectedWidget,
            newName,
            newLabel
          );
        }
      }
    },

    getLabelByFieldName(fieldName) {
      for (let i = 0; i < this.serverFieldList.length; i++) {
        if (this.serverFieldList[i].name === fieldName) {
          return this.serverFieldList[i].label;
        }
      }

      return null;
    },
  },
};
</script>

<style lang="scss" scoped></style>
