<template>
  <div>
    <MomTable
      ref="MomTable"
      row-key="id"
      :row-selection="rowSelection"
      :query-param="queryForm"
      :query-param-item="queryFormItem"
      :columns="tableColumns"
      :data-source="dataSource"
      :total="total"
      :page.sync="page"
      :action-buttons="actionButtons"
      :mega-extend="{
        rowIndex: false,
      }"
      @search="search"
    >
      <!-- <div slot="checkProcessType" slot-scope="text, record">
        <span>{{ formatData(errorCodeTypeList, record.checkProcessType) }}</span>
      </div> -->
    </MomTable>
  </div>
</template>

<script>
import { uniqBy } from "lodash";
import ApiConstant from "@/api/ApiConstant";
import { Icon } from "ant-design-vue";

export default {
  data() {
    return {
      loading: false, // 表格loading
      confirmLoading: false,
      // 查询的表单的配置项
      queryForm: {
        searchKey: "",
      },
      total: 0,
      page: 1,
      actionButtons: [
        (h, { record }) =>
          this.hasAuth("EPMS:EXAMINE:VIEW") && (
            <a-button
              title={this.$t("EXAMINE")}
              type="link"
              onClick={() => this.handleView(record)}
            >
              {this.$t("EXAMINE")}
            </a-button>
          ),
      ],
      dataSource: [],
      typeList: [],
      selectedRowKeys: [], // 选中行 key 数据
      selectedRows: [], // 选中行 数据
      errorCodeTypeList: [], // 代码类型列表
      viewId: "",
      flowList: [],
    };
  },
  computed: {
    // 表格搜索配置
    queryFormItem() {
      return this.$observable("queryFormItem", {
        searchKey: {
          label: () => this.$t("AUDIT_SHEET_NAME"),
          placeholder: () => this.$t("PLACEENTER"),
        },
      });
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys;
          if (this.selectedRowKeys.length) {
            this.selectedRows = uniqBy(this.selectedRows.concat(selectedRows));
          } else {
            this.selectedRows = selectedRows;
          }
        },
      };
    },
    tableColumns() {
      return this.$observable("tableColumns", [
        {
          dataIndex: "name", // 审核单名称
          title: () => this.$t("AUDIT_SHEET_NAME"),
          ellipsis: true,
          width: 300,
        },
        {
          dataIndex: "checkStatusName",
          align: "left",
          sorter: false,
          ellipsis: true,
          width: 200,
          title: () => this.$t("STATUS"), // 状态
        },
        // {
        //   dataIndex: "checkProcessType", // 审核单类别
        //   title: () => this.$t("APPROVAL_FORM_CATEGORY"),
        //   ellipsis: true,
        //   width: 200,
        //   scopedSlots: { customRender: "checkProcessType" },
        // },
        {
          dataIndex: "applyUserName", // 申请人员
          sorter: false,
          ellipsis: true,
          title: () => this.$t("APPLY_PERSONNEL"),
        },
        {
          dataIndex: "applyTime", // 申请时间
          ellipsis: true,
          title: () => this.$t("APPLICATION_TIME"),
        },
      ]);
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:CHECK_PROCESS_TYPE`
        ), // 管控方式
      ]).then(([flowRes]) => {
        const arr = [{ label: "全部", value: "ALL" }];
        this.flowList = [...arr, ...flowRes.data.data];
      });
    },
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    search(params) {
      this.selectedRowKeys = [];
      this.selectedRows = [];
      const searchParams = {
        ...params,
      };
      this.loading = true;
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/ebs/epm-check-todo/search`, {
          params: searchParams,
        })
        .then((res) => {
          this.dataSource = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 监听详情点击事件
    handleView({ id, checkProcessType }) {
      this.$router.push({
        query: {
          id,
          checkProcessType,
        },
        path: "/eam/to_do/examine/view",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/css/status_epms.less";
/deep/ .el-upload__input {
  display: none !important;
}
/deep/ .error-type .ant-form-item-children {
  display: flex;
}
/deep/ .btn_operate {
  color: @primary-color;
}
</style>
