<template>
  <div class="box-main">
    <MomTable
      ref="MomTable"
      :loading="loading"
      :columns="tableColumns"
      :data-source="tableData"
      :query-param="queryForm"
      :query-param-item="queryFormItem"
      row-key="id"
      :page.sync="page"
      :total="total"
      :action-buttons="actionButtons"
      @search="searchPageData"
    >
      <template slot="dataType" slot-scope="text, record">
        <span>{{ $t(formatData(typeList, record.dataType)) }}</span>
      </template>
      <template slot="pushStatus" slot-scope="text, record">
        <span>{{ formatData(stateList, record.pushStatus) }}</span>
      </template>
      <template slot="businessReceiveStatus" slot-scope="text, record">
        <span>{{ formatData(stateList, record.businessReceiveStatus) }}</span>
      </template>
      <template slot="targetSystemCode" slot-scope="text, record">
        <span>{{ formatData(menuAllList, record.targetSystemCode) }}</span>
      </template>
    </MomTable>
  </div>
</template>

<script>
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  name: "Material",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Icon,
  },
  data() {
    return {
      loading: false,
      // 查询的表单的配置项
      queryForm: {
        dataType: "",
        systemCode: "",
        pushStatus: "",
        businessReceiveStatus: "",
      },
      sortParams: null,
      // 表格的配置项
      tableData: [],
      page: 1, // 页码
      total: 0,
      typeList: [],
      stateList: [],
      menuAllList: [],
      actionButtons: [
        (h, value, a, b) => (
          <div>
            {value.record.pushStatus === "FAIL" ||
              (value.record.businessReceiveStatus === "FAIL" && (
                <span
                  type="text"
                  onClick={() => this.handleEvent(value.record)}
                >
                  <Icon
                    type="icon-cur-reload"
                    size={15}
                    style="color:#01baea;cursor: pointer;"
                    title={this.$t("REFRESH")}
                  />
                </span>
              ))}
          </div>
        ),
      ],
    };
  },
  computed: {
    queryFormItem() {
      return this.$observable("queryFormItem", {
        dataType: {
          label: () => this.$t("DATA_TYPE"), // 数据类型
          itemType: "custom",
          customRender: () => {
            return (
              <a-select
                v-model={this.queryForm.dataType}
                placeholder={this.$t("PLACEENTER")}
              >
                {this.typeList.map((item) => (
                  <a-select-option key={item.value} value={item.value}>
                    {this.$t(item.label)}
                  </a-select-option>
                ))}
              </a-select>
            );
          },
        },
        systemCode: {
          label: () => this.$t("SYSTEM_NAME"), // 系统名称
          itemType: "select",
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
        pushStatus: {
          label: () => this.$t("PUSH_STATUS"), // 推送状态
          itemType: "select",
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
        businessReceiveStatus: {
          label: () => this.$t("RECEIVING_STATUS"), // 接收状态
          itemType: "select",
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
      });
    },
    tableColumns() {
      return [
        {
          dataIndex: "dataType",
          key: "dataType",
          title: () => this.$t("DATA_TYPE"),
          width: 120,
          scopedSlots: { customRender: "dataType" },
        },
        {
          dataIndex: "eventType",
          title: () => this.$t("EVENT_TYPE"),
          width: 120,
        },
        {
          dataIndex: "dataId",
          title: () => this.$t("DATA_CODEING"),
          width: 220,
        },
        {
          dataIndex: "targetSystemCode",
          title: () => this.$t("SYSTEM_NAME"),
          scopedSlots: { customRender: "targetSystemCode" },
          width: 150,
        },
        {
          dataIndex: "pushStatus",
          key: "pushStatus",
          title: () => this.$t("PUSH_STATUS"),
          scopedSlots: { customRender: "pushStatus" },
          width: 120,
        },
        {
          dataIndex: "businessReceiveStatus",
          key: "businessReceiveStatus",
          title: () => this.$t("RECEIVING_STATUS"),
          scopedSlots: { customRender: "businessReceiveStatus" },
          options: [],
          width: 120,
        },
        {
          dataIndex: "pushFailReason",
          title: () => this.$t("PUSH_FAIL_REASON"),
          options: [],
          width: 300,
        },
        {
          dataIndex: "businessFailReason",
          title: () => this.$t("RECEIVING_FAIL_STATUS"),
          minWidth: 300,
          options: [],
        },
        {
          dataIndex: "updateBy", // 更新人员
          title: () => this.$t("UPDATE_BY"),
          width: 120,
        },
        {
          dataIndex: "updateTime", // 更新时间
          title: () => this.$t("UPDATE_TIME"),
          width: 168,
        },
      ];
    },
  },
  created() {
    this.init();
  },
  methods: {
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    init() {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/data-push-config/get-data-type-list`
        )
        .then((res) => {
          this.typeList = res.data.data.map((item) => {
            return {
              label: item.i18nCode,
              value: item.code,
            };
          });
        });
      this.getDictByCode("DIC:CORE:SUB_SYSTEM").then((res) => {
        this.menuAllList = res.data.data;
        this.queryFormItem.systemCode.options = res.data.data;
      });
      this.getDictByCode("DIC:CORE:SYS_DATA_PUSH_STATUS").then((res) => {
        this.queryFormItem.pushStatus.options = res.data.data;
        this.queryFormItem.businessReceiveStatus.options = res.data.data;
        this.stateList = res.data.data;
      });
    },
    handleEvent(row) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/data-push-history/retry`, {
          params: { id: row.id },
        })
        .then((res) => {
          this.$message.success(this.$t("TIPS:COMMON:RETRY_SUCCESS"));
          this.$refs.MomTable?.query();
        });
    },
    // 后台分页查询
    searchPageData(data) {
      this.loading = true;
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/data-push-history/search`, {
          params: data,
        })
        .then((res) => {
          this.loading = false;
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
  },
};
</script>
