<template>
  <!-- 历史流程 -->
  <div class="HistoricalProcess">
    <el-button type="primary" plain icon="el-icon-search" size="mini" @click="searchData.page = 1;queryLists()">查询</el-button>
    <FormItemComponent
      class="form"
      :formItemLists="formLists"
      :buttonType="false"
      @formChange="formChange"
    ></FormItemComponent>
    <StandardTabletwo
      class="table"
      :currentPage="searchData.page"
      :pageSize="searchData.pageSize"
      :total="total"
      :columns="columns"
      :data="data"
      :standardTableEvent="standardTableEvent"
    ></StandardTabletwo>

    <!-- 详情弹框 -->
    <Modal
      v-model="modalShow"
      title="流程详情"
      :width="861"
      :closable="true"
      :mask="true"
      :footer-hide="true"
      :mask-closable="false"
    >
      <FlowChartShow v-if="modalShow" :instanceId="instanceId"></FlowChartShow>
    </Modal>
  </div>
</template>
<script>
import FormItemComponent from "../FormItemComponent";
import ItemComponent from "../ItemComponent";
import StandardTabletwo from "../StandardTabletwo";
import FlowChartShow from "../FlowChartShow";
// import { mapMutations } from "vuex";
import {
    addGenhistoricap,
    addGenhistorihistory,
    addGenhistorilisr
  } from "@/api/activiti/definition";
  import store from "@/store";
export default {
  name: "HistoricalProcess",
  components: { FormItemComponent, StandardTabletwo, FlowChartShow },
  props: {
    falg: { type: Number, default: null },
    tabalive: { type: String, default: "" }
  },
  data() {
    return {
      //表单配置
      formLists: [
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "input",
            title: "工作流编号",
            filed: "instanceId",
            props: {
              regx: /^[0-9]*$/
            },
            event:{
              'keydown': (event) => {
                if(event.keyCode === 13){
                  this.searchData.page = 1;
                  this.queryLists()
                }
              }
            }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "input",
            title: "查询索引",
            filed: "businessNumber",
            event:{
              'keydown': (event) => {
                if(event.keyCode === 13){
                  this.searchData.page = 1;
                  this.queryLists()
                }
              }
            }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "select",
            title: "单据类型",
            filed: "businessType",
            options: [
              { value: 0, label: "发送成功" },
              { value: 1, label: "发送失败(待发送)" },
              { value: 2, label: "消费成功" },
              { value: 3, label: "消费失败(待消费)" }
            ]
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "DatePicker",
            title: "处理时间",
            filed: "updateTime"
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "input",
            title: "节点名称",
            filed: "nodeName",
            event:{
              'keydown': (event) => {
                if(event.keyCode === 13){
                  this.searchData.page = 1;
                  this.queryLists()
                }
              }
            }
          }
        }
      ],
      //查询条件
      searchData: {
        page: 1,
        pageSize: 10,
        searchType: "0,1",
        excuStatus: 2,
        updateTime: []
      },

      //表格数据
      total: 0,
      columns: [
        {
          title: "工作流编号",
          key: "instanceId"
        },
        {
          title: "查询索引",
          key: "businessNumber"
        },
        {
          title: "单据类型",
          key: "businessName"
        },
        {
          title: "模板名称",
          key: "moduleName"
        },
        {
          title: "节点名称",
          key: "nodeName"
        },
        {
          title: "审批人",
          key: "approverName"
        },
        {
          title: "发起人",
          key: "initiatorName"
        },
        {
          title: "处理时间",
          key: "updateTime"
        },
        {
          title: "消耗时长",
          key: "durationTime"
        },
        {
          title: "流程状态",
          key: "processStatusName",
          render: (h, params) => {
              if (params.row.processStatus === 4) {
                return h('Poptip', {
                  props: {
                    trigger: 'hover',
                    content: params.row.submitErrorMsg,
                    transfer: true
                  }
                }, [h(
                  'span',
                  {
                    style: {
                      color: 'rgba(255, 0, 0, 1)',
                      cursor: 'pointer'
                    }
                  },
                  params.row.processStatusName
                )]);
              }
              return h(
                'p',
                {
                  style: {
                    maxWidth: '160px',
                    overflow: 'hidden',
                    'text-overflow': 'ellipsis',
                    'white-space': 'nowrap'
                  }
                },
                params.row.processStatusName
              );
            }
        },
        {
          title: "详情",
          fixed: "right",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "rgba(16, 142, 233, 1)",
                  cursor: "pointer"
                },
                on: {
                  click: () => {
                    this.modalShow = true;
                    this.instanceId = params.row.instanceId;
                  }
                }
              },
              "流程进度"
            );
          }
        }
      ],
      data: [],
      standardTableEvent: {
        "on-change": page => {
          this.searchData.page = page;
          this.queryLists();
        },
        "on-page-size-change": pageSize => {
          this.searchData.page = 1;
          this.searchData.pageSize = pageSize;
        }
      },

      modalShow: false,
      instanceId: null
    };
  },
  watch: {
    tabalive(newVal, oldVal) {
      if (newVal === "历史流程") {
        this.getselectOption();
        this.queryLists();
      }
    }
  },
  methods: {
    // ...mapMutations(["currentChange", "checkDetailsOpenWindow"]),
    //业务关系下拉数据
    getselectOption() {
      addGenhistoricap().then(res => {
        if (res.resultCode === 0) {
          this.formLists.forEach(outer => {
            if (outer.item.filed === "businessType") {
              outer.item.options = res.data.relations.map(item => {
                item.value = item.businesskey;
                item.label = item.businessName;
                return item;
              });
            }
          });
        }
      });
    },
    formChange(data) {
      //表单数据修改时，修改searchData数据
      this.searchData = Object.assign({}, this.searchData, data);
      if (
        Object.prototype.toString.call(this.searchData.businessType) ===
          "[object Array]" &&
        this.searchData.businessType.length === 0
      ) {
        delete this.searchData.businessType;
      }
    },
    queryLists() {
      //查询列表
      if (
        this.searchData.updateTime &&
        this.searchData.updateTime[0] &&
        this.searchData.updateTime[1]
      ) {
        this.searchData.startTime = new Date(
          this.searchData.updateTime[0]
        ).format("yyyy-MM-dd hh:mm");
        this.searchData.endTime = new Date(
          this.searchData.updateTime[1]
        ).format("yyyy-MM-dd hh:mm");
      } else {
        this.searchData.startTime = "";
        this.searchData.endTime = "";
      }
      let obj = Object.assign({}, this.searchData);
      delete obj.updateTime;
      addGenhistorihistory(obj).then(res => {
        if (res.resultCode === 0) {
          let data = res.data;
          this.total = data.total;
          this.data = data.records;
        }else{
          this.$message({
                   message: res.resultMsg,
                   type: 'warning'
                 });
        }
      });
    },
    submitTask(instanceId) {
      addGenhistorilisr({
          instanceId: instanceId
        })
        .then(res => {
          if (res.data.resultCode === 0) {
            this.msgSuccess(res.data.resultMsg);
            // this.$Message.success(res.data.resultMsg);
          }
        });
    }
  },
  created() {
    if(this.falg){
      this.searchData.userId = store.getters.userId
    }
    this.getselectOption();
    this.queryLists();
  }
};
</script>
<style lang="scss">
.HistoricalProcess {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  .title {
    font-size: 18px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(81, 90, 110, 1);
    line-height: 24px;
    margin-bottom: 16px;
  }

  > button {
    margin-bottom: 10px;
    width: 80px;
  }

  .form {
    margin-bottom: 16px;
  }

  .table {
    flex: 1;
    display: flex;
    color:#d81d04;
  }
}
</style>
