<template>
  <div class="box-main">
    <MomTable
      ref="MomTable"
      row-key="id"
      :columns="tableColumns"
      :data-source="tableData"
      :query-param="queryForm"
      :query-param-item="queryFormItem"
      :total="total"
      :page.sync="page"
      :action-buttons="actionButtons"
      @beforeSearch="beforeSearch"
      @search="searchPageData"
    >
      <template slot="status" slot-scope="text">
        <span :class="text === 'SUCCESS' ? 'text-success' : 'text-error'">
          {{ formatData(statusList, text) }}
        </span>
      </template>
      <template slot="archiveMode" slot-scope="text">
        <span>
          {{ formatData(archiveList, text) }}
        </span>
      </template>
      <template slot="archivePolicy" slot-scope="text">
        <span>
          {{ formatData(archivePolicyList, text) }}
        </span>
      </template>
    </MomTable>
    <MegaModal
      class="dictDialog"
      :title="$t('VIEW_LOG')"
      :visible="logVisible"
      :centered="true"
      :mask-closable="false"
      :destroy-on-close="true"
      @cancel="handleClose"
    >
      <p v-html="logMsg"></p>
      <template slot="footer">
        <a-button class="iconfont icon-quxiao" @click="handleClose">
          {{ $t("CLOSE") }}
        </a-button>
      </template>
    </MegaModal>
  </div>
</template>
<script>
import ApiConstant from "@/api/ApiConstant";
import { Icon, Modal as MegaModal } from "@mega-design/ui-vue";

export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { Icon, MegaModal },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$route.query.jobName) {
        // 执行器
        // eslint-disable-next-line
        vm.queryForm.jobName = vm.$route.query.jobName.toString();
        // eslint-disable-next-line
        vm.queryForm.jobCode = vm.$route.query.jobCode.toString();
      }
    });
  },
  data() {
    return {
      logVisible: false,
      tableData: [], // 表格数据
      page: 1, // 分页第几页
      total: 0, // 数据表格总条数
      statusList: [], // 状态列表
      archiveList: [], // 归档方式列表
      archivePolicyList: [], // 归档策略
      // 查询的表单的配置项
      queryForm: {
        jobCode: "",
        jobName: "",
        datasourceId: undefined,
        archiveMode: undefined,
      },
      logMsg: "",
      actionButtons: [
        (h, { record }) => (
          <span
            class="text-primary"
            title={this.$t("VIEW")}
            style="cursor: pointer;"
            onClick={() => this.handView(record)}>
            <Icon type="icon-cur-file-text" size={16} title={this.$t("VIEW")} />
          </span>
        ),
      ],
    };
  },
  computed: {
    queryFormItem() {
      return this.$observable("queryFormItem", {
        jobCode: {
          label: () => this.$t("TASK_CODE"),
        },
        jobName: {
          label: () => this.$t("TASK_NAME"),
        },
        datasourceId: {
          itemType: "select",
          options: [],
          optionsProps: {
            label: "dataSourceName",
            value: "id",
          },
          label: () => this.$t("DATA_SOURCE"),
        },
        archiveMode: {
          itemType: "select",
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
          label: () => this.$t("FILING_METHOD"),
        },
      });
    },
    tableColumns() {
      return [
        {
          dataIndex: "jobCode",
          title: this.$t("TASK_CODE"),
          sorter: false,
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "jobName",
          title: this.$t("TASK_NAME"),
          ellipsis: true,
          width: 180,
        },
        {
          dataIndex: "datasourceName",
          ellipsis: true,
          title: () => this.$t("DATA_SOURCE_NAME"),
          width: 180,
        },
        {
          dataIndex: "dbType",
          ellipsis: true,
          title: () => this.$t("DATA_SOURCE_TYPE"),
          width: 180,
        },
        {
          dataIndex: "archivePolicy",
          ellipsis: true,
          title: () => this.$t("ARCHIVE_POLICY"),
          scopedSlots: { customRender: "archivePolicy" },
          minWidth: 180,
        },
        {
          dataIndex: "tableName",
          ellipsis: true,
          title: () => this.$t("TABLE_NAME"),
          minWidth: 180,
        },
        {
          dataIndex: "orderField",
          ellipsis: true,
          title: () => this.$t("SORT_FIELD"),
          minWidth: 180,
        },
        {
          dataIndex: "archiveMode",
          ellipsis: true,
          title: () => this.$t("FILING_METHOD"),
          scopedSlots: { customRender: "archiveMode" },
          width: 180,
        },
        {
          dataIndex: "execTime",
          ellipsis: true,
          title: () => this.$t("HANDLE_TIME"),
          width: 200,
        },
        {
          dataIndex: "status",
          sorter: false,
          title: () => this.$t("STATUS"),
          scopedSlots: { customRender: "status" },
          width: 120,
        },
      ];
    },
  },
  methods: {
    beforeSearch() {
      return Promise.all([
        this.getDictByCode(`DIC:CORE:ARCHIVE_EXEC_STATUS`), // 启用状态
        this.getDictByCode(`DIC:DVOPS:ARCHIVE_MODE`), // 归档方式
        this.getDictByCode(`DIC:DVOPS:ARCHIVE_POLICY`), // 归档策略
        this.$axios.get(`${ApiConstant.PREFIX_CORE}/api/sys/datasource/list`), // 数据源的下拉
      ]).then(
        ([
          enableStatusRes,
          archiveModeRes,
          archivePolicyRes,
          dataSourceRes,
        ]) => {
          this.statusList = enableStatusRes.data.data;
          this.queryFormItem.archiveMode.options = archiveModeRes.data.data;
          this.archiveList = archiveModeRes.data.data;
          this.archivePolicyList = archivePolicyRes.data.data;
          this.queryFormItem.datasourceId.options = dataSourceRes.data.data;
        }
      );
    },
    formatData(data, curItem) {
      const result = data.find((item) => item.value === curItem);
      return result ? result.label : "";
    },
    searchPageData(params) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/devops/archive-log/search`, {
          params,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = parseFloat(res.data.data.total);
        });
    },
    handleClose() {
      this.logVisible = false;
    },
    handView(row) {
      this.logVisible = true;
      this.logMsg = row.logMsg;
    },
    formatDate(value) {
      const date = new Date(value);
      const y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? `0${MM}` : MM;
      let d = date.getDate();
      d = d < 10 ? `0${d}` : d;
      return `${y}-${MM}-${d}`;
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .ant-modal-body {
  max-height: 600px;
  overflow-y: auto;
}
</style>
