<template>
  <div>
    <MomTable
      ref="MomTable"
      row-key="id"
      :columns="tableColumns"
      :data-source="menuList"
      :query-param="queryParam"
      :query-param-item="queryParamItem"
      :mega-extend="{
        rowIndex: false,
      }"
      :action-buttons="tableAction"
      :pagination="false"
      :expanded-row-keys="expandedRowKeys"
      @expand="expandedOnClickIcon"
      @reset="handleReset"
      @search="search"
    >
      <span slot="menuName" slot-scope="text">{{ $t(text) }}</span>
      <div slot="configName" slot-scope="text">
        <span>{{ $t(text) }}</span>
      </div>
      <div slot="precondition" slot-scope="text">
        <span>{{ $t(text) }}</span>
      </div>
      <div slot="configValue" slot-scope="text">
        <span
          v-if="text"
          :class="[
            text === 'Y' ? 'text-success normal' : 'text-error disabled',
          ]"
          >{{ text === "Y" ? $t("STARTED") : $t("CLOSED") }}</span
        >
      </div>
    </MomTable>
  </div>
</template>
<script>
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";

export default {
  data() {
    return {
      // eslint-disable-next-line
      loading: false, // 表格loading
      menuList: [],
      expandedRowKeys: [],
      // 查询的表单的配置项
      queryParam: {
        moduleId: "",
        menuIdList: [],
      },
      tableAction: [
        (h, { record }) =>
          this.hasAuth("EPMS:REPAIR_EQP:RECEIVE") &&
          record.configValue && (
            <a-button type="link" onClick={() => this.handleStatus(record)}>
              <span style={record.configValue === "Y" ? "color: red" : ""}>
                {record.configValue === "N"
                  ? this.$t("START")
                  : this.$t("CLOSE")}
              </span>
            </a-button>
          ),
      ],
    };
  },
  computed: {
    ...mapState({
      menus: (state) => state.account.menus,
    }),
    queryParamItem() {
      return this.$observable("queryParamItem", {
        moduleId: {
          itemType: "select",
          label: () => this.$t("MENU"),
          labelWidth: 60,
          options: [],
          optionsProps: {
            label: "label",
            value: "id",
          },
        },
        menuIdList: {
          itemType: "select",
          label: () => this.$t("FIRST_LEVEL_MENU"),
          mode: "multiple",
          labelWidth: 60,
          options: [],
          optionsProps: {
            label: "label",
            value: "id",
          },
        },
      });
    },
    tableColumns() {
      return this.$observable("tableColumns", [
        {
          dataIndex: "menuName",
          sorter: false,
          ellipsis: true,
          scopedSlots: { customRender: "menuName" },
          title: () => this.$t("FIRST_LEVEL_MENU"), // 一级菜单
        },
        {
          dataIndex: "configName",
          ellipsis: true,
          sorter: false,
          scopedSlots: { customRender: "configName" },
          title: () => this.$t("SUB_FUN_POINT"), // 子功能点
        },
        {
          dataIndex: "precondition",
          ellipsis: true,
          sorter: false,
          scopedSlots: { customRender: "precondition" },
          title: () => this.$t("PRECONDITION"), // 前置条件
        },
        {
          dataIndex: "configValue",
          ellipsis: true,
          sorter: false,
          scopedSlots: { customRender: "configValue" },
          title: () => this.$t("STATUS"), // 子功能点
        },
      ]);
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getMenuI18(this.menus);
      const moduleList = this.menus.filter(
        (item) => item.menuName === "MODULE_EPM"
      );
      this.queryParamItem.moduleId.options = moduleList;
      this.queryParam.moduleId = moduleList[0].id;
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/ebs/switch-config/search`)
        .then((res) => {
          const menuList = res.data.data;
          this.getMenuI18(menuList);
          this.queryParamItem.menuIdList.options = menuList;
          menuList.forEach((item) => {
            this.expandedRowKeys.push(item.id);
          });
        });
    },
    getMenuI18(list) {
      list.forEach((item) => {
        const data = item;
        data.label = this.$t(data.menuName);
        if (data.children && data.children.length) {
          this.getMenuI18(data.children);
        }
      });
    },
    expandedOnClickIcon(expanded, record) {
      if (expanded) {
        this.expandedRowKeys.push(record.id);
      } else {
        const index = this.expandedRowKeys.findIndex((e) => e === record.id);
        index !== -1 && this.expandedRowKeys.splice(index, 1);
      }
    },
    handleReset() {
      this.getMenuI18(this.menus);
      const moduleList = this.menus.filter(
        (item) => item.menuName === "MODULE_EPM"
      );
      this.queryParamItem.moduleId.options = moduleList;
      this.queryParam.moduleId = moduleList[0].id;
      this.$refs.MomTable?.search();
    },
    // 模块切换，获取菜单
    search(params) {
      const data = {
        ...params,
        menuIdList: params.menuIdList.join(","),
      };
      this.loading = true;
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/ebs/switch-config/search`, {
          params: data,
        })
        .then((res) => {
          this.menuList = res.data.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 关闭开启
    handleStatus(record) {
      const params = {
        configValue: record.configValue === "Y" ? "N" : "Y",
        id: record.id,
      };
      this.$confirm({
        title: record.configValue === "Y" ? this.$t("CLOSE") : this.$t("START"),
        content:
          record.configValue === "Y"
            ? this.$t("CLOSE_DATA_INFO")
            : this.$t("START_DATA_INFO"),
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "exclamation-circle",
        onOk: () => {
          this.$axios
            .put(
              `${ApiConstant.PREFIX_CORE}/api/epm/ebs/switch-config/`,
              params
            )
            .then((res) => {
              this.$message.success(this.$t("E0000000"));
              this.$refs.MomTable?.search();
            });
        },
      });
    },
  },
};
</script>
