// import i18n from '@/i18n'

export default {
  name: "TableOperations",
  props: {
    injectData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      btnTypes: {
        add: "primary",
        delete: "danger",
        detail: "info",
        // add more...
      },
      colors: {
        delete: "#FF5454",
        preview: "#f09843",
        design: "#99089f",
        "destroy-order": "#FF5454",
        "confirm-order": "#37d97f",
        "end-order": "#f09843",
        "move-to-top": "#8833ff",
        "move-to-bottom": "#8833ff",
        // 'view-trend': 'red'
        // add more...
      },
      text: {
        // TODO: i18n
        // edit: i18n.t('edit'),
        // detail: i18n.t('detail'),
        // delete: i18n.t('delete'),
        // viewAttr: i18n.t('viewattr'),
        // preview: i18n.t('preview'),
        // design: i18n.t('design'),
        copy: "复制",
        edit: "编辑",
        detail: "详情",
        delete: "删除",
        viewAttr: "查看属性",
        preview: "预览",
        view: "查看",
        design: "设计",
        "view-trend": "查看趋势",
        "add-sub": "添加子类",
        // add more...
      },
    };
  },
  // mounted() {
  //   console.log('inject data', this.injectData)
  // },
  methods: {
    // 发射事件
    emit(opt) {
      let emitFull = false;
      let eventType = "default";
      let customField;
      if (typeof opt === "object") {
        eventType = opt.name;
        customField = opt.emitField || "id";
        emitFull = opt.emitFull || false;
      } else {
        eventType = opt;
      }

      /** 处理 toRouter */
      let payload = { type: eventType, data: emitFull ? this.injectData : customField ? this.injectData[customField] : this.injectData.id };
      if ("url" in opt) {
        payload.url = this.injectData.url;
      }
      if ("toRouter" in opt) {
        payload.toRouter = opt.toRouter;
      }
      // this.$emit('emit-data', { type: eventType, data: emitFull ? this.injectData : customField ? this.injectData[customField] : this.injectData.id, url: this.injectData.url, toRouter: opt.toRouter })
      this.$emit("emit-data", payload);
    },
  },
  render: function (h) {
    let btns = [];
    for (const opt of this.injectData.head?.options) {
      const optIsObj = typeof opt === "object";

      if (optIsObj) {
        // 注意：为空字符串或null/undefined都会不验证权限
        if (!opt.permission || (opt.permission && this.$hasPermission(opt.permission))) {
          // 检查可用状态
          let shouldDisabled = false;
          if ("enable" in opt && typeof opt.enable === "function") {
            shouldDisabled = opt.enable(this.injectData);
          }
          btns.push(
            h(
              "el-button",
              {
                props: {
                  type: opt.type ?? "text",
                  icon: opt.icon ? `el-icon-${opt.icon}` : "",
                  title: opt.label ?? opt.name,
                  disabled: shouldDisabled,
                },
                style: { color: opt.color || this.colors[opt.name] || "#0b58ff" },
                on: { click: this.emit.bind(null, opt) },
              },
              opt.icon ? (opt.showText ? this.text[opt.name] ?? opt.label : "") : opt.label ?? this.text[opt.name]
            )
          );
        }
      } else {
        // 此时 opt 是一个 string，且默认有操作权限
        btns.push(
          h(
            "el-button",
            {
              props: { type: "text" },
              style: { color: this.colors[opt] || "#0b58ff" },
              on: { click: this.emit.bind(null, opt) },
            },
            this.text[opt] ?? opt
          )
        );
      }
    }
    return h("span", null, btns);
  },
};