<!-- 报案协助 -->
<template>
  <div>
    <MomTable
      ref="MomTable"
      row-key="id"
      :query-param="queryForm"
      :query-param-item="queryFormItem"
      :columns="tableColumns"
      :total="total"
      :page.sync="page"
      :data-source="tableData"
      :mega-extend="{ rowAction: false }"
      :show-enable-flag="false"
      @beforeSearch="beforeSearch"
      @search="searchPageData"
    >
      <div slot="toolbar" class="button-top-table">
        <a-button
          v-if="hasAuth('JOB_MANAGEMENT:EXPORT')"
          class="btn__green-1"
          icon="to-top"
          :disabled="!tableData.length"
          @click="handleExportExcel"
        >
          {{ $t("EXPORT") }}
        </a-button>
      </div>
      <!-- <template slot="status" slot-scope="text">
        <span :class="text === 'Y' ? 'text-success' : 'text-error'">
          {{ getAttrValue(statusList, text) }}
        </span>
      </template> -->
    </MomTable>
  </div>
</template>

<script>
import ApiConstant from "@/api/ApiConstant";
import { exportExcel } from "@/utils";

export default {
  data() {
    return {
      // 查询的表单的配置项
      queryForm: {
        time: null,
        userName: undefined,
        userIp: "",
        // status: "UNTREATED",
        isReport: "Y",
      },
      userNameList: [],
      statusList: [],
      page: 1,
      total: 0,
      tableData: [], // 表格数据
      tableAction: [
        (h, value, a, b) => {
          const { text, record } = value;
          if (record.status === "UNTREATED") {
            return (
              <span
                onClick={() => this.handleRemoteView(record)}
                style="cursor: pointer;"
                class="text-primary"
                title={this.$t("REMOTE_VIEW")}>
                <i
                  class="iconfont icon-shengchanguanli-shengchanguanli-zaizhipinguankong"
                  style="font-size: 18px"></i>
              </span>
            );
          }
          return null;
        },
        (h, value, a, b) => {
          const { text, record } = value;
          if (record.status === "UNTREATED") {
            return (
              <span
                onClick={() => this.handleUpdateState(record)}
                style="cursor: pointer;"
                class="text-primary"
                title={this.$t("FINISH_PROCESS")}>
                <i class="iconfont icon-baocun2" style="font-size: 22px"></i>
              </span>
            );
          }
          return null;
        },
      ],
    };
  },
  computed: {
    queryFormItem() {
      return this.$observable("queryFormItem", {
        time: {
          label: () => this.$t("ABNORMAL_DATE"),
          itemType: "range",
          valueFormat: "YYYY-MM-DD",
        },
        userName: {
          label: () => this.$t("USER_NAME"),
          itemType: "custom",
          customRender: () => {
            return (
              <a-select
                showSearch={true}
                showArrow={false}
                value={this.queryForm.userName}
                placeholder={this.$t("PLACESELECT")}
                style="width: 100%"
                onSearch={this.fetchUser}
                onChange={this.userNameChange}>
                {this.userNameList.map((item) => {
                  return (
                    <a-select-option key={item.id} value={item.userName}>
                      {item.userName}
                    </a-select-option>
                  );
                })}
              </a-select>
            );
          },
        },
        userIp: {
          label: () => `${this.$t("USER")}IP`,
        },
        // status: {
        //   label: () => this.$t("STATUS"),
        //   itemType: "select",
        //   options: [],
        //   optionsProps: {
        //     label: "label",
        //     value: "value",
        //   },
        // },
        isReport: {
          label: () => this.$t("IS_REPORT_CASE"),
          itemType: "select",
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
      });
    },
    tableColumns() {
      return [
        // 报案id
        {
          dataIndex: "id",
          title: () => `${this.$t("REPORT_CASE")}ID`,
          sorter: false,
          width: 180,
        },
        // 日志id
        {
          dataIndex: "logId",
          title: () => `${this.$t("LOG")}ID`,
          width: 180,
        },
        // 用户名
        {
          dataIndex: "userName",
          sorter: false,
          title: () => this.$t("USER_NAME"),
          width: 132,
        },
        // 用户IP
        {
          dataIndex: "userIp",
          title: () => `${this.$t("USER")}IP`,
          sorter: false,
          width: 180,
        },
        // 使用功能
        {
          dataIndex: "businessName",
          title: () => this.$t("USE_FUNCTION"),
          sorter: false,
          width: 140,
        },
        // 报错日志
        {
          dataIndex: "errorMsg",
          sorter: false,
          title: () => this.$t("ERROR_LOG"),
        },
        // 异常时间
        {
          dataIndex: "exceptionTime",
          title: () => this.$t("ABNORMAL_TIME"),
          sorter: false,
          width: 162,
        },
        // 状态
        // {
        //   dataIndex: "status",
        //   title: () => this.$t("STATUS"),
        //   sorter: false,
        //   scopedSlots: { customRender: "status" },
        //   width: 100,
        // },
      ];
    },
  },
  mounted() {},
  methods: {
    fetchUser(value) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/user/list`, {
          params: {
            isCancelApiLoad: true,
            userName: value,
            size: 10,
          },
        })
        .then((res) => {
          this.userNameList = res.data.data?.splice(0, 10);
        });
    },
    userNameChange(val) {
      this.queryForm.userName = val;
    },
    // 导出
    handleExportExcel() {
      const params = {
        page: this.page,
        size: this.$store.state.pagination.pageSize,
        ...this.queryForm,
      };
      this.$axios({
        url: `${ApiConstant.PREFIX_CORE}/api/sys/exception/export`,
        method: "get",
        params,
        responseType: "blob",
      }).then((res) => {
        exportExcel(res.data, `${this.$t("REPORT_ASSISTANCE")}.xls`);
      });
    },
    beforeSearch() {
      Promise.all([
        // 异常状态
        // this.getDictByCode("DIC:CORE:EXCEPTION_STATUS"),
        // 是否 Y/N
        this.getDictByCode("DIC:COMMON:WHETHER_CHAR"),
      ]).then((res) => {
        // this.statusList = res1.data.data;
        // this.queryFormItem.status.options = res1.data.data;
        this.queryFormItem.isReport.options = res[0].data.data;
      });
    },
    // 分页查询列表数据
    searchPageData(params) {
      const req = {
        ...params,
      };
      delete req.time;
      if (params.time instanceof Array && params.time?.length) {
        // eslint-disable-next-line prefer-destructuring
        req.startTime = `${params.time[0]} 00:00:00`;
        // eslint-disable-next-line prefer-destructuring
        req.endTime = `${params.time[1]} 23:59:59`;
      }
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/exception/search`, {
          params: req,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    handleRemoteView(row) {},
    handleUpdateState(row) {
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("DELETE_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "close-circle",
        onOk: () => {
          this.$axios
            .put(
              `${ApiConstant.PREFIX_CORE}/api/sys/exception/handle?id=${row.id}`
            )
            .then((res) => {
              this.$message.success(this.$t("SUBMITTED_FOR_DELETION"));
              this.$refs.MomTable?.query();
            });
        },
      });
    },
  },
};
</script>
