<template>
  <MegaModal
    width="960px"
    wrap-class-name="bpmn-track-modal"
    :title="$t('PROCESS_TRACKING')"
    :visible.sync="trackVisible"
    @cancel="handleClose"
  >
    <div class="bpmn-readonly">
      <BpmnReadonly :xml-data="isCallXmlData ? xmlData : defaultXmlData" />
    </div>

    <MomTable
      :title="() => $t('PROCESS_FLOW_STEPS')"
      :columns="tableColumns"
      :data-source="tableData"
      :total="total"
      :page.sync="page"
      :action-buttons="[]"
      :show-util-operator="false"
      :mega-extend="{
        rowAction: false,
      }"
      @search="handleSearch"
    />
    <template slot="footer">
      <a-button @click="handleClose">
        <Icon type="icon-ins-close" :size="12" />{{ $t("CLOSE") }}
      </a-button>
    </template>
  </MegaModal>
</template>

<script>
import { Modal as MegaModal, Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import BpmnReadonly from "@/components/bpmn/readonly";

export default {
  components: { MegaModal, BpmnReadonly, Icon },
  props: {
    trackVisible: {
      type: Boolean,
      default: () => false,
    },
    isCallXmlData: {
      type: Boolean,
      default: true,
    },
    defaultXmlData: {
      type: Object,
      default: () => ({}),
    },
    params: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      xmlData: {},
      // 流程日志
      tableColumns: [
        {
          dataIndex: "nodeName",
          sorter: false,
          ellipsis: true,
          width: 180,
          title: () => this.$t("NODE"), // 节点
        },
        {
          dataIndex: "startTime",
          sorter: false,
          ellipsis: true,
          width: 180,
          title: () => this.$t("START_TIME"), // 开始时间
        },
        {
          dataIndex: "endTime",
          sorter: false,
          ellipsis: true,
          width: 180,
          title: () => this.$t("END_TIME"), // 结束时间
        },
        {
          dataIndex: "assigneeName",
          sorter: false,
          ellipsis: true,
          width: 120,
          title: () => "操作人员", // 操作人员
        },
        {
          dataIndex: "duration",
          sorter: false,
          ellipsis: true,
          width: 180,
          title: () => this.$t("耗时"), // 耗时
        },
      ],
      tableData: [],
      page: 1,
      total: 0,
    };
  },
  created() {
    this.queryXmlData();
  },
  methods: {
    handleSearch(params) {
      // 流转历史
      this.params.id &&
        this.$axios
          .get(
            `${ApiConstant.PREFIX_CORE}/api/flowable/instance/history-circulation`,
            {
              params: { ...params, procInsId: this.params.id },
            }
          )
          .then((res) => {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          });
    },
    queryXmlData() {
      // xml数据
      this.isCallXmlData &&
        this.$axios
          .get(`${ApiConstant.PREFIX_CORE}/api/flowable/task/image-xml`, {
            params: this.params,
          })
          .then((res) => {
            this.xmlData = res.data.data;
          });
    },
    handleClose() {
      this.$emit("update:trackVisible", false);
    },
  },
};
</script>
