<template>
  <span>
    <span @click="showModal">
      <slot>
        <a-button type="primary">
          <i class="iconfont icon-tianjia"></i>
          {{ $t("FIELD_AUTH") }}
        </a-button>
      </slot>
    </span>
    <MegaDrawer
      wrap-class-name="field-auth-modal"
      :width="1000"
      :title="$t('FIELD_AUTH')"
      :visible="visible"
      @close="handleCancel"
      @cancel="handleCancel"
      @ok="handleSave"
    >
      <a-card
        slot="main"
        :tab-list="tableNameList"
        :bordered="false"
        :active-tab-key="activeTabKey"
        @tabChange="(key) => onTabChange(key)"
      >
        <MomTable
          :key="activeTabKey"
          row-key="fieldName"
          :columns="columns"
          :data-source="tableSource"
          :show-util-operator="false"
          :pagination="false"
          :mega-extend="{
            rowAction: false,
          }"
        >
          <span slot="i18nCode" slot-scope="item">{{ $t(item) }}</span>
          <span slot="enableFlag" slot-scope="text, record, index, col">
            <a-switch
              :checked="text === 'Y'"
              @change="(e) => handleCellChange(e, index, col.dataIndex)"
            />
          </span>
        </MomTable>
      </a-card>
    </MegaDrawer>
  </span>
</template>
<script>
import { Drawer as MegaDrawer } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: {
    MegaDrawer,
  },
  props: {
    tableNameList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeTabKey: "",
      tabData: [],
      tableSource: [],
      visible: false,
    };
  },
  computed: {
    columns() {
      return [
        {
          dataIndex: "fieldName", // 字段名
          sorter: false,
          title: () => this.$t("FIELD_NAME"),
        },
        {
          dataIndex: "i18nCode", // 国际化
          sorter: false,
          title: () => this.$t("I18N"),
          scopedSlots: { customRender: "i18nCode" },
        },
        // {
        //   dataIndex: "fieldComment", // 字段说明
        //   sorter: false,
        //   title: () => `${this.$t("FIELD")}${this.$t("DESCRIBE")}`,
        // },
        {
          dataIndex: "enableFlag", // 是否显示
          sorter: false,
          title: () => this.$t("IS_SHOW"),
          scopedSlots: { customRender: "enableFlag" },
          width: 120,
        },
      ];
    },
  },
  watch: {
    "tableNameList.length": {
      handler() {
        this.queryAuthFieldDetail();
      },
      immediate: true,
    },
  },
  methods: {
    queryAuthFieldDetail() {
      this.$axios({
        method: "get",
        url: `${ApiConstant.PREFIX_CORE}/api/sys/field-visible/list-column-batch-by-module`,
        params: {
          tableNameList: this.tableNameList[0]?.key,
          moduleCode: this.$store.state.activatedModule,
        },
      }).then((res) => {
        this.tabData = res.data.data;
        this.onTabChange(this.activeTabKey || this.tableNameList[0]?.key);
      });
    },
    onTabChange(key) {
      this.activeTabKey = key;
      this.tableSource =
        this.tabData.find((item) => item.tableName === this.activeTabKey)
          ?.fieldList || [];
    },
    showModal() {
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    handleCellChange(value, index, attr) {
      this.tableSource[index][attr] = value ? "Y" : "N";
    },
    // 字段授权 保存
    handleSave() {
      const data = {
        moduleCode: this.$store.state.activatedModule,
        paramList: [
          {
            fieldList: [].concat(this.tableSource),
            tableName: this.activeTabKey,
          },
        ],
      };
      this.$axios({
        method: "post",
        url: `${ApiConstant.PREFIX_CORE}/api/sys/field-visible/save-batch-by-module`,
        data,
      }).then(() => {
        this.$message.success(this.$t("EDIT_SUCCESS"));
        this.visible = false;
        this.$emit("update");
      });
    },
  },
};
</script>

<style lang="less">
.field-auth-modal {
  .ant-card .ant-card-body {
    padding: 0;
  }
  .ant-card-head {
    min-height: 36px;
  }
  .ant-tabs .ant-tabs-large-bar .ant-tabs-tab {
    padding: 4px 16px 8px;
  }
}
</style>
