<template>
  <div class="page-wrapper">
    <MomTable
      ref="MomTable"
      row-key="id"
      :query-param="queryParam"
      :query-param-item="queryParamItem"
      :columns="columns"
      :data-source="dataSource"
      :total="total"
      :page.sync="page"
      :action-buttons="actionButtons"
      :mega-extend="{
        rowAction: false,
        rowIndex: false,
      }"
      @beforeSearch="beforeSearch"
      @search="search"
      @reset="handleReset"
    >
      <div slot="repairType" slot-scope="text">
        {{ getAttrValue(typeList, text) }}
      </div>
    </MomTable>
    <div class="page-bottom-op">
      <a-button @click="handleCancel()">
        <i class="iconfont icon-quxiao" />
        {{ $t("BACK") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import ApiConstant from "@/api/ApiConstant";

export default {
  data() {
    return {
      loading: false, // 表格loading
      // 查询的表单的配置项
      queryParam: {
        dateArr: [],
      },
      columns: [
        {
          dataIndex: "repairType", // 名称
          title: () => this.$t("FIX_MODE"),
          ellipsis: true,
          width: 200,
          scopedSlots: { customRender: "repairType" },
        },
        {
          dataIndex: "partnerName", // 维修供应商
          title: () => this.$t("REPAIR_SUPPLIER"),
          width: 200,
          ellipsis: true,
          sorter: false,
        },
        {
          dataIndex: "repairUserName", // 维修人员
          title: () => this.$t("EPMS_REPAIR_PERSONNEL"),
          width: 200,
          ellipsis: true,
          sorter: false,
        },
        {
          dataIndex: "repairTime", // 维修时间
          title: () => this.$t("REPAIR_TIME"),
          ellipsis: true,
        },
      ],
      total: 0,
      page: 1,
      actionButtons: [],
      dataSource: [],
      stateList: [],
      typeList: [],
      selectedRows: [], // 选中行 数据
    };
  },
  computed: {
    // 表格搜索配置
    queryParamItem() {
      return this.$observable("queryParamItem", {
        dateArr: {
          itemType: "range",
          label: () => this.$t("REPAIR_TIME"),
        },
      });
    },
  },
  created() {
    this.init();
  },
  methods: {
    // 重置搜索监听事件
    handleReset() {
      this.$refs.MomTable?.search();
    },
    // 初始化数据
    init() {
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:COMMON_REPAIR_TYPE`
        ), // 维修方式
      ]).then(([typeRes]) => {
        this.typeList = typeRes.data.data;
      });
    },
    beforeSearch() {},
    // 监听搜索事件
    search(params) {
      const { dateArr } = this.queryParam;
      const startDate = dateArr?.length
        ? moment(dateArr[0]).format("YYYY-MM-DD")
        : "";
      const endDate = dateArr?.length
        ? moment(dateArr[1]).format("YYYY-MM-DD")
        : "";
      const searchParams = {
        ...params,
        startDate,
        endDate,
        moldId: this.$route.query.id,
      };
      this.loading = true;
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/epm/mam/mold-repair/search-preview`,
          {
            params: searchParams,
          }
        )
        .then((res) => {
          const { records, total } = { ...res?.data?.data };
          this.dataSource = records;
          this.total = total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 监听取消点击事件
    handleCancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: {
          path: "/eam/mold_management/mold_repair",
        },
        vm: this,
      });
    },
  },
};
</script>
<style lang="less">
@import "@/assets/css/status_epms.less";
</style>
