<template>
  <el-dialog
    title="编辑行按钮组配置"
    :visible.sync="dialogVisible"
    custom-class="dialog-style list-dialog"
    :show-close="true"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    width="520px"
    v-dialog-drag
    @close="handleClose"
  >
    <div class="cont">
      <el-form label-width="166px" class="edit-tree-button-group-form">
        <el-form-item label="新增按钮唯一名称">
          <el-input
            v-model="row.rowAddAuthName"
            class="all-width"
            placeholder="留空则不校验权限"
            clearable
          >
            <el-tooltip
              slot="suffix"
              :enterable="false"
              effect="dark"
              content="随机生成"
              placement="top"
            >
              <i
                class="el-input__icon el-icon-refresh-right"
                @click="createRandomRowAddAuthName"
              ></i>
            </el-tooltip>
          </el-input>
        </el-form-item>
        <el-form-item label="新增按钮编码" v-if="rowAddAuthCode">
          <div class="auth-code-text">
            <el-tooltip effect="light" content="复制">
              <a
                class="a-link"
                style="color: unset"
                @click="copyAuthCode(rowAddAuthCode, $event)"
              >
                <span
                  ><i
                    class="el-icon-copy-document"
                    style="margin-right: 2px"
                  ></i
                  >{{ rowAddAuthCode }}</span
                >
              </a>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item label="编辑按钮唯一名称">
          <el-input
            v-model="row.rowEditAuthName"
            class="all-width"
            placeholder="留空则不校验权限"
            clearable
          >
            <el-tooltip
              slot="suffix"
              :enterable="false"
              effect="dark"
              content="随机生成"
              placement="top"
            >
              <i
                class="el-input__icon el-icon-refresh-right"
                @click="createRandomRowEditAuthName"
              ></i>
            </el-tooltip>
          </el-input>
        </el-form-item>
        <el-form-item label="编辑按钮编码" v-if="rowEditAuthCode">
          <div class="auth-code-text">
            <el-tooltip effect="light" content="复制">
              <a
                class="a-link"
                style="color: unset"
                @click="copyAuthCode(rowEditAuthCode, $event)"
              >
                <span
                  ><i
                    class="el-icon-copy-document"
                    style="margin-right: 2px"
                  ></i
                  >{{ rowEditAuthCode }}</span
                >
              </a>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item label="新增按钮显隐条件定义">
          <a
            href="javascript:void(0);"
            class="a-link link-oneLind"
            @click="editRowShowScript('rowAddShow')"
          >
            <span>{{ row.rowAddShow }}</span>
            <i class="el-icon-edit"></i>
          </a>
        </el-form-item>
        <el-form-item label="编辑按钮显隐条件定义">
          <a
            href="javascript:void(0);"
            class="a-link link-oneLind"
            @click="editRowShowScript('rowEditShow')"
          >
            <span>{{ row.rowEditShow }}</span>
            <i class="el-icon-edit"></i>
          </a>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="button-sty" icon="el-icon-close" @click="handleClose">
        {{ i18nt("designer.hint.cancel") }}
      </el-button>
      <el-button
        type="primary"
        class="button-sty"
        icon="el-icon-check"
        @click="handleConfirm"
      >
        {{ i18nt("designer.hint.confirm") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n";
import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
import { generateId } from "../../../../../../components/xform/utils/util";
import Clipboard from "clipboard";

export default {
  name: "edit-tree-button-group-config-dialog",
  mixins: [i18n, eventMixin],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      required: true,
    },
  },
  inject: ["getReportTemplate"],
  data() {
    return {
      rowShowParams: ["dataId", "formCode", "tableParam"],
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    reportTemplate() {
      return this.getReportTemplate();
    },
    rowAddAuthName() {
      return this.getRowAddAuthName();
    },
    rowEditAuthName() {
      return this.getRowEditAuthName();
    },
    rowAddAuthCode() {
      return this.getRowAuthCode(this.rowAddAuthName);
    },
    rowEditAuthCode() {
      return this.getRowAuthCode(this.rowEditAuthName);
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.ensureRowAuthNames();
      }
    },
  },
  methods: {
    getRowAddAuthName() {
      return this.row.rowAddAuthName ?? this.row.treeRowAddName;
    },
    getRowEditAuthName() {
      return this.row.rowEditAuthName ?? this.row.treeRowEditName;
    },
    getRowAuthCode(authName) {
      if (!authName || !this.reportTemplate?.formCode) {
        return "";
      }
      return this.reportTemplate.formCode + ":" + authName;
    },
    createRowAuthName(type) {
      return `row${type}` + generateId();
    },
    ensureRowAuthNames() {
      if (!this.getRowAddAuthName()) {
        this.$set(this.row, "rowAddAuthName", this.createRowAuthName("Add"));
      }
      if (!this.getRowEditAuthName()) {
        this.$set(this.row, "rowEditAuthName", this.createRowAuthName("Edit"));
      }
    },
    createRandomRowAddAuthName() {
      this.$set(this.row, "rowAddAuthName", this.createRowAuthName("Add"));
      this.$message.success("生成成功");
    },
    createRandomRowEditAuthName() {
      this.$set(this.row, "rowEditAuthName", this.createRowAuthName("Edit"));
      this.$message.success("生成成功");
    },
    editRowShowScript(eventName) {
      this.editEventHandler(eventName, this.rowShowParams, {
        customCode: () => this.row[eventName] || "",
        callback: (code) => {
          this.$set(this.row, eventName, code);
        },
      });
    },
    copyAuthCode(content, clickEvent) {
      const clipboard = new Clipboard(clickEvent.target, {
        text: () => content,
      });
      clipboard.on("success", () => {
        this.$message.success("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        this.$message.error("复制失败");
        clipboard.destroy();
      });
      clipboard.onClick(clickEvent);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.$emit("confirm", this.getRowConfigSnapshot());
      this.dialogVisible = false;
    },
    getRowConfigSnapshot() {
      return {
        rowAddAuthName: this.row.rowAddAuthName,
        rowEditAuthName: this.row.rowEditAuthName,
        rowAddShow: this.row.rowAddShow,
        rowEditShow: this.row.rowEditShow,
      };
    },
  },
};
</script>

<style scoped lang="scss">
.edit-tree-button-group-form {
  ::v-deep .el-form-item {
    margin-bottom: 12px;
  }
  ::v-deep .el-form-item__label {
    line-height: 28px;
  }
  ::v-deep .el-form-item__content {
    line-height: 28px;
  }
  .auth-code-text {
    word-break: break-all;
    line-height: 1.5;
  }
}
</style>
