<template>
  <div style="height: 680px;overflow: auto">
    <Card style="height: 95%">
      <Row style="margin: 10px 0;" type="flex">
        <Col span="10" order="1">
          <!--高级检索-->
          <Select v-model="searchForm.busGroupId" filterable style="width: 140px" >
            <Option v-for="item in busGroups" :value="item.id" :label="item.name" :key="item.id">
            </Option>
          </Select>
          <Input v-model="searchForm.commonlyKey__like" style="width: 243px;margin-left: 10px;" placeholder="请输入关键字" ></Input>
          <Button type="primary" @click="reloadData()" style="margin-left: 10px;">查询</Button>
        </Col>
        <Col span="4"  order="2" style="text-align: left">
          <!--复合排序-->
          <!--<customSort ref="customSort" :sortParams.sync="sortParams" @reload-data="reloadData"
                      :searchForm.sync="searchForm"></customSort>-->
        </Col>
        <Col span="10" order="3" style="text-align: right">
          <!--<Button @click="priceSchemeBatchDelete"  type="primary">批量删除</Button>-->
          <!--通用导出excel组件-->
        </Col>
      </Row>
      <Table ref="tables" searchable search-place="top" :data="tableData" :columns="columns" size="small"
             :loading="loading" @on-sort-change="sortChange" @on-selection-change="selectedChange"
             highlight-row @on-current-change="onCurrentChange">
        <template #actions slot-scope="{ row }">
          <Button type="primary" size="small" @click="doSomething($event,row)" ghost style="margin-right: 5px">审批
          </Button>
          <!--<Button type="primary" size="small" @click="workflowDetailsView(row)" ghost style="margin-right: 5px">详情</Button>-->
          <Button type="primary" size="small" @click="flowChart(row)" ghost style="margin-right: 5px" >审批轨迹</Button>
        
        </template>
      </Table>
      <bc-page ref="priceScheme-list-page" @reload-data="reloadData" :dataCount="dataCount" size="small" :pageSize.sync="pageSize" ></bc-page>
      <workflowDoSomething ref="workflowDoSomething"  :show.sync="showModal" :taskId="nowTask.id" :bean="nowTask"
                           type="approval" :firstShowHistory="firstShowHistory" @reload-data="reloadData"></workflowDoSomething>
     
    </Card>
  </div>
</template>

<script>
import { getWorkflowUpcomingPage,getWorkflowUpcomingList,getWorkflowTaskList } from '../workflow-api'
import workflowDoSomething from '../workflow-dosomething-index.vue'
import {getWorkflowBusGroupList} from "../workflow-api";
let $this;
export default {
  name: 'workflowUpcomingList',
  components: {
    workflowDoSomething,
    //workflowDetails,
    //commonComponent,
  },
  data () {
    return {
      busGroups: [],//流程业务类型集合
      firstShowHistory: false,
      zjName:null,
      hisTasks: [],
      searchForm:{},
      showModal: false,
      //showWorkflowDetailsModal: false,
      modalParams: {},
      //workflowDetailsModalParams: {},
      nowTask:{},
      dataCount:0,
      pageSize:10,
      columns: [
        { title: '业务标题', key: '', render: (h, params) =>  h('span', params.row.processVariables.busTitle), tooltip: true, sortable: true, show: true },
        /*{ title: '所属区域', key: '', render: (h, params) =>  h('span', params.row.processVariables.areaName), width: 180, sortable: true, show: true },*/
        { title: '业务类型', key: '', render: (h, params) =>  h('span', params.row.processVariables.busName), sortable: true, show: true },
        { title: '当前状态', key: 'name',  sortable: true, show: true },
        /*{ title: '申请数量', key: '', render: (h, params) =>  h('span', params.row.processVariables.applySum), width: 180, sortable: true, show: true },*/
        { title: '申请人', key: '', render: (h, params) =>  h('span', params.row.processVariables.userName),  sortable: true, show: true },
        { title: '申请时间', key: '', render: (h, params) =>  h('span', params.row.processVariables.startTime),  sortable: true, show: true },
        { title: '操作', key: 'action', width: 250, align: 'center',slot:'actions', show: true }
      ],
      tableData: [],
      selectedData: [],
      loading: true,
      sortParams: [], //[{title: 姓名, orderStr: 降序, sortKey: name, order: -}]
      getList: getWorkflowUpcomingList,
      commonList: [

      ],//固化常用列表
      fieldList: [//用户可以自行选择查询的字段列表及配置

      ]
    }
  },
  methods: {
    showWorkflowHis(row) {
      getWorkflowTaskList({processInstanceId: row.processInstanceId}).then(res => {
        this.hisTasks = res.data;
        console.log(this.hisTasks)
      }).catch(err => {
        this.$Message.error('查询审批历史失败！')
        console.log(err)
      });
    },
    workflowDetailsView (row) {
      this.showModal = true;
      this.nowTask = row;
      this.firstShowHistory = false
    },
    flowChart (row) {
      this.showModal = true;
      this.nowTask = row;
      this.firstShowHistory = true
    },
    doSomething (e, row) {
      e.stopPropagation();
      this.showModal = true;
      this.nowTask = row;
      this.firstShowHistory = false
    },
    priceSchemeDelete (row) {
      deleteWorkflowUpcoming(row.id).then( data => {
        this.$Message.success( "操作成功！");
        this.tableData.splice(row._index, 1);
      }).catch(err =>{
        this.$Message.error( "操作失败！");
        console.log(err);
      })
    },
    selectedChange(selection) {
      this.selectedData = selection;
    },
    sortChange(column) {
      this.$refs.customSort.sortChange(column);
    },
    exportData(params) {
      this.$refs.tables.exportCsv(params);
    },
    reloadData (pageSize,pageNo) {
      //表格加载中效果
      this.loading = true;
      //处理表单查询参数及分页
      if (!pageNo) {
        this.dataCount = 0
      }
      if (!pageSize) {
        pageSize = this.pageSize;
      }
      let page_params = {'pageSize':pageSize,'pageNo':pageNo};
      let params = Object.assign({},page_params,this.searchForm); // 这样不会改变原对象
      //加入系统条件,现在只能查询当前系统的流程
      params.systemCode = this.$config.systemCode
      getWorkflowUpcomingPage(params).then(res => {
        if (res.data.datas) {
            this.dataCount = parseInt(res.data.totalSize)
        }
        if (res.data.datas && res.data.datas.length > 0) {
          this.tableData = res.data.datas;
          this.tableData[0]._highlight = true;
          this.nowTask = this.tableData[0];
        } else {
            this.tableData = [];
        }
        this.loading = false;
      }).catch(err => {
        this.tableData = [];
        this.$Message.error('查询失败！')
        console.log(err)
      })
    },
    onCurrentChange (currentRow,oldCurrentRow) {
      this.nowTask = currentRow;
    },
  },
  mounted () {
    this.reloadData();
    //初始化业务类型集合
    getWorkflowBusGroupList({systemCode: this.$config.systemCode}).then(res => {
      if (res.data.result) {
        this.busGroups = res.data.result
      }else {
        this.busGroups = [];
      }
    }).catch(err => {
      this.busGroups = [];
      this.$Message.error('初始化流程业务类型失败！')
      console.log(err)
    })
    $this = this;
  },
  created () {
    //this.zjName = {'workflowBusModal': require(`../../workflowBus-modal.vue`).default}
    //this.zjName = () =>  import(`@/view/base/workflow/workflowBus-modal.vue`)
  }
}
</script>

<style>

</style>
