<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"
    >
      <template slot="status" slot-scope="text">
        <span :class="[[1, '1'].includes(text) && 'text-error']">
          {{ getAttrValue(queryFormItem.status.options, text) }}
        </span>
      </template>
    </MomTable>
    <!-- 流程追踪 -->
    <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,
          ellipsis: true,
          width: 300,
          title: () => this.$t("PROCESS_NAME"), // 流程名称
        },
        {
          dataIndex: "taskName",
          sorter: false,
          ellipsis: true,
          width: 120,
          title: () => this.$t("CHAIN_NODE"), // 环节名称
        },
        {
          dataIndex: "procDefKey",
          sorter: false,
          ellipsis: true,
          title: () => this.$t("PROCESS_KEY"), // 流程key
        },
        // {
        //   dataIndex: "businessKey",
        //   sorter: false,
        //   ellipsis: true,
        //   width: 160,
        //   title: () => this.$t("BUSINESS_KEY"), // 业务key
        // },
        {
          dataIndex: "assignee",
          sorter: false,
          width: 140,
          title: () => this.$t("ASSIGN_PERSONNEL"), // 分配人员
        },
        {
          dataIndex: "startTime",
          sorter: false,
          width: 168,
          title: () => this.$t("CREATION_TIME"), // 创建时间
        },
        {
          dataIndex: "endTime",
          sorter: false,
          width: 168,
          title: () => this.$t("COMPLETE_TIME"), // 完成时间
        },
        {
          dataIndex: "duration",
          sorter: false,
          ellipsis: true,
          width: 150,
          title: () => this.$t("TASK_DEADLINE"), // 任务期限
        },
        {
          dataIndex: "priority",
          sorter: false,
          width: 80,
          title: () => this.$t("PRIORITY"), // 优先级
        },
        {
          dataIndex: "status",
          sorter: false,
          width: 100,
          title: () => this.$t("STATUS"), // 状态
          scopedSlots: { customRender: "status" },
        },
      ],
      tableData: [],
      page: 1, // 页码
      total: 0, // 每页个数
      // 查询的表单的配置项
      queryParam: {
        procInstName: "",
        taskName: "",
        time: null,
        status: 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"), // 发起时间
        },
        status: {
          itemType: "select",
          label: () => this.$t("STATUS"),
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
      });
    },
  },
  methods: {
    beforeSearch() {
      return Promise.all([this.getDictByCode("DIC:WORKFLOW:TASK_STATUS")]).then(
        ([res]) => {
          this.queryFormItem.status.options = res?.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`, {
          params: req,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    // 行内 流程跟踪
    handleOpenTrack(item) {
      this.$set(this.trackParams, "id", item.procInsId);

      this.trackVisible = true;
    },
    handleOpen(item) {
      this.$router.push({
        path: "/flowable/my/open",
        query: {
          id: item.procInsId,
          type: "INS",
          returnUrl: this.$route.fullPath,
        },
      });
    },
  },
};
</script>
<style lang="less">
.icon-defult {
  font-weight: 600;
}
</style>
