<template>
  <div>
    <MomTable
      ref="MomTable"
      row-key="id"
      :columns="tableColumns"
      :data-source="tableData"
      :query-param="queryParam"
      :query-param-item="queryFormItem"
      :action-buttons="actionButtons"
      :total="total"
      :page.sync="page"
      :mega-extend="{
        rowAction: {
          width: 74,
        },
      }"
      @beforeSearch="beforeSearch"
      @search="searchPageData"
    />
    <!-- 流程追踪 -->
    <BpmnTrack
      v-if="trackParams.id"
      :key="trackParams.id"
      :track-visible.sync="trackVisible"
      :params="trackParams"
    />
  </div>
</template>

<script>
import ApiConstant from "@/api/ApiConstant";
import BpmnTrack from "@/components/bpmn/track";

export default {
  components: { BpmnTrack },
  data() {
    return {
      enableFlagList: [],
      // 表格的配置项
      tableColumns: [
        {
          dataIndex: "procInstName",
          sorter: false,
          width: 300,
          title: () => this.$t("PROCESS_NAME"), // 流程名称
        },
        {
          dataIndex: "taskName",
          sorter: false,
          title: () => this.$t("CHAIN_NODE"), // 环节名称
        },
        {
          dataIndex: "assignee",
          sorter: false,
          title: () => this.$t("ASSIGN_PERSONNEL"), // 分配人员
        },
        {
          dataIndex: "startTime",
          sorter: false,
          width: 180,
          title: () => this.$t("CREATION_TIME"), // 创建时间
        },
        {
          dataIndex: "endTime",
          sorter: false,
          width: 180,
          title: () => this.$t("COMPLETE_TIME"), // 完成时间
        },
        {
          dataIndex: "duration",
          sorter: false,
          width: 180,
          title: () => this.$t("TASK_DURATION"), // 任务历时
        },
        {
          dataIndex: "priority",
          sorter: false,
          width: 80,
          title: () => this.$t("PRIORITY"), // 优先级
        },
      ],
      tableData: [],
      page: 1, // 页码
      total: 0, // 每页个数
      // 查询的表单的配置项
      queryParam: {
        procInstName: "", // 流程名称
        taskName: "", // 环节名称
        time: null, // 创建时间
        priority: undefined, // 优先级
      },
      actionButtons: [
        (h, { record }) => {
          return (
            <a-button
              title={this.$t("PROCESS_TRACKING")}
              type="link"
              onClick={() => this.handleOpenTrack(record)}>
              <a-icon type="interaction" />
            </a-button>
          );
        },
        (h, { record }) => {
          return (
            <a-button
              title={this.$t("OPEN")}
              type="link"
              onClick={() => this.handleOpen(record, true)}>
              <a-icon type="folder-open" />
            </a-button>
          );
        },
      ],
      // 流程追踪
      trackVisible: false,
      trackParams: {
        id: undefined,
        type: "INS",
      },
    };
  },
  computed: {
    // 表格搜索配置
    queryFormItem() {
      return this.$observable("queryFormItem", {
        procInstName: {
          itemType: "input",
          label: () => this.$t("PROCESS_NAME"), // 流程名称
        },
        taskName: {
          itemType: "input",
          label: () => this.$t("CHAIN_NODE"), // 环节名称
        },
        time: {
          itemType: "range",
          valueFormat: "YYYY-MM-DD",
          label: () => this.$t("STARTING_TIME"), // 发起时间
        },
        priority: {
          itemType: "input",
          label: () => this.$t("PRIORITY"), // 优先级
        },
      });
    },
    rules() {
      return {};
    },
  },
  methods: {
    // 行内 流程跟踪
    handleOpenTrack(item) {
      this.$set(this.trackParams, "id", item.procInsId);

      this.trackVisible = true;
    },
    beforeSearch() {
      return Promise.all([this.getDictByCode("DIC:COMMON:ENABLE_FLAG")]).then(
        ([enableStatus]) => {
          this.enableFlagList = enableStatus?.data?.data || [];
        }
      );
    },
    // 后台分页查询
    searchPageData(params) {
      const req = { ...params };
      delete req.time;
      req.startTime = params.time?.length ? `${params.time[0]} 00:00:00` : null;
      req.endTime = params.time?.length ? `${params.time[1]} 23:59:59` : null;
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/flowable/task/search-done`, {
          params: req,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    handleOpen(item) {
      this.$router.push({
        path: "/flowable/done/open",
        query: {
          id: item.procInsId,
          type: "INS",
          taskId: item.taskId,
          returnUrl: this.$route.fullPath,
        },
      });
    },
  },
};
</script>
<style lang="less">
.icon-defult {
  font-weight: 600;
}
</style>
