<template>
  <div>
    <MomTable
      ref="MomTable"
      row-key="id"
      :auto-adaptive-width="false"
      :query-param="queryForm"
      :query-param-item="queryFormItem"
      :columns="tableColumns"
      :data-source="dataSource"
      :total="total"
      :page.sync="page"
      :action-buttons="actionButtons"
      :mega-extend="{
        rowIndex: false,
      }"
      @reset="onReset"
      @search="search"
    >
      <div slot="pcFrmName" slot-scope="text, record">
        <span class="name_link" :title="text" @click="handleView(record)">
          {{ text }}
        </span>
      </div>
    </MomTable>
  </div>
</template>

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

export default {
  data() {
    return {
      loading: false, // 表格loading
      confirmLoading: false,
      // 查询的表单的配置项
      queryForm: {
        pcFrmName: "",
        planDate: "",
      },
      actionButtons: [
        (h, { record, index }) =>
          this.hasAuth("EPMS:CHECK_TASK:VIEW") && (
            <span
              class="cursor-pointer btn_operate"
              title={this.$t("SPOT_CHECK")}
              onClick={() => this.handleView(record)}
            >
              {this.$t("SPOT_CHECK")}
            </span>
          ),
      ],
      total: 0,
      page: 1,
      dataSource: [],
      typeList: [], // 类型列表
      stateList: [],
    };
  },
  computed: {
    // 表格搜索配置
    queryFormItem() {
      return this.$observable("queryFormItem", {
        pcFrmName: {
          label: () => this.$t("CHECK_FORM_NAME"),
          placeholder: () => this.$t("ENTER_CHECK_FORM_NAME_KEYWORD"),
        },
        planDate: {
          itemType: "date",
          label: () => this.$t("DATE"),
        },
      });
    },
    tableColumns() {
      return this.$observable("tableColumns", [
        {
          dataIndex: "pcObjectName", // 点检对象名称
          title: () => this.$t("CHECK_OBJECT_NAME"),
          ellipsis: true,
        },
        {
          dataIndex: "pcFrmName", // 点检表单名称
          title: () => this.$t("CHECK_FORM_NAME"),
          ellipsis: true,
          scopedSlots: { customRender: "pcFrmName" },
        },
        {
          dataIndex: "planStartTime", // 计划开始时间
          sorter: false,
          ellipsis: true,
          width: 160,
          title: () => this.$t("START_TIME"),
        },
        {
          dataIndex: "planEndTime", // 计划结束时间
          ellipsis: true,
          width: 200,
          title: () => this.$t("END_TIME"),
        },
      ]);
    },
  },
  created() {
    this.queryForm.planDate = moment(new Date()).format("YYYY-MM-DD");
    this.init();
  },
  methods: {
    init() {
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:PC_CHECK_STYLE`
        ), // 来源类型数据字典
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/sys/dict-data/DIC:EPM:ENABLE_STATUS`
        ), // 类型数据字典
      ]).then(([typeRes, enableStatus]) => {
        this.typeList = typeRes.data?.data;
        this.stateList = enableStatus.data?.data;
      });
    },
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    // 监听明细点击事件
    handleView({ id }) {
      this.$router.push({
        path: "/eam/eqp_check/check_task/view",
        query: {
          id,
        },
      });
    },
    onReset() {
      this.queryForm.planDate = moment(new Date()).format("YYYY-MM-DD");
      this.queryForm.pcFrmName = "";
    },
    search(params) {
      this.selectedRowKeys = [];
      this.selectedRows = [];
      const searchParams = {
        ...params,
      };
      this.loading = true;
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/pcm/pc-task/app-search`, {
          params: searchParams,
        })
        .then((res) => {
          this.dataSource = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/css/status_epms.less";
.name_link {
  color: rgba(14, 168, 208, 1);
  cursor: pointer;
  display: block;
}
/deep/ .btn_operate {
  color: @primary-color;
}
</style>
