<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组件-->
          <!--<exportExcel :dataColumns="dataColumns" :selectedData="selectedData" :tableData="tableData" :excelName="'priceSchemeExcel'"
                       :searchForm="searchForm" @export-data="exportData" :getData="this.getList"></exportExcel>-->
        </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 slot="actions" slot-scope="{ row }">
          <Poptip confirm transfer size="small" v-if="!row.endTime"
                  placement="bottom"
                  width="180"
                  title="你确定要撤销吗?"
                  @on-ok="revokeWorkflow(row)">
            <Button type="error" size="small" ghost style="margin-right: 5px">撤销</Button>
          </Poptip>
          <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>
          <!--<Button type="primary" size="small" @click="priceSchemeEdit($event,row)" ghost style="margin-right: 5px">修改数据</Button>-->
          <!--<Poptip confirm transfer size="small"
                  placement="bottom"
                  width="180"
                  title="你确定要撤回吗?"
                  @on-ok="priceSchemeDelete(row)">
            <Button type="primary" size="small" ghost>撤回</Button>
          </Poptip>-->
        </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" :bean="nowProcess" :processInstanceId="nowProcess.id"
                           type="view" :firstShowHistory="firstShowHistory" @reload-data="reloadData"></workflowDoSomething>
    </Card>
    <!--<commonComponent  :show.sync="showModal" :value="modalParams1" @reload-data="reloadData"></commonComponent>-->
  </div>
</template>

<script>
  import {TOKEN_KEY, getToken, getRefreshToken} from '../../bc-libs/token-util'
  import { getWorkflowApplyPage, getWorkflowApplyList, getWorkflowTaskList, doRevoke,
    getWorkflowBusGroupList} from '../workflow-api'
  import workflowDetails from '../workflow-details.vue'
  import commonComponent from '../common-component'
  import workflowDoSomething from '../workflow-dosomething-index'


  let $this;
  export default {
    name: 'workflowApplyedList',
    components: {
      workflowDoSomething,
      //workflowDetails,
      //commonComponent,
    },
    data() {
      return {
        busGroups: [],//流程业务类型集合
        firstShowHistory: false,
        showModal: false,
        modalParams1: {},
        hisTasks: [],
        searchForm: {},
        //showWorkflowDetailsModal: false,
        //modalParams: {},
        //workflowDetailsModalParams: {},
        nowProcess: {},
        nowProcessId: '',
        dataCount: 0,
        pageSize: 10,
        columns: [
          { title: '业务标题', key: '', render: (h, params) =>  h('span', params.row.busTitle), tooltip: true,  sortable: true, show: true },
          /*{ title: '所属区域', key: '', render: (h, params) =>  h('span', params.row.areaName),  sortable: true, show: true },*/
          { title: '业务类型', key: '', render: (h, params) =>  h('span', params.row.busName),  sortable: true, show: true },
          { title: '当前状态', key: 'nowStep',  sortable: true, show: true },
          /*{ title: '申请数量', key: '', render: (h, params) =>  h('span', params.row.applySum), width: 180, sortable: true, show: true },*/
          { title: '申请时间', key: '', render: (h, params) =>  h('span', params.row.startTime),  sortable: true, show: true},
          { title: '当前步骤', key: 'nowStep', width: 180, 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: getWorkflowApplyList,
        commonList: [
          /*{id: 1, label: '常用固化查询条件1', findItem: [{field: 'fieldName', judge: 'eq', value: 'fieldValue'}]},
          {id: 2, label: '常用固化查询条件2', findItem: [
                  {field: 'fieldName1', judge: 'eq', value: 'fieldValue2'},
                  {field: 'fieldName2', judge: 'eq', value: 'fieldValue2'},
                  ]},*/

        ],//固化常用列表
        fieldList: [//用户可以自行选择查询的字段列表及配置
          /*{
            label: '姓名',
            field: 'name',
            flags: ['=', 'like', 'isNull', 'isNotNull'],
            fieldType: 'input'
          },s
          {
            label: '身份证',
            field: 'idCard',
            flags: ['=', 'like', 'isNull', 'isNotNull'],
            fieldType: 'input'
          },*/
        ]
      }
    },
    methods: {
      showWorkflowHis(row) {
        getWorkflowTaskList({processInstanceId: row.id}).then(res => {
          this.hisTasks = res.data;

          console.log(this.hisTasks)
        }).catch(err => {
          this.$Message.error('查询审批历史失败！')
          console.log(err)
        });
      },
      workflowDetailsView (row) {
        //this.showWorkflowDetailsModal = true;
        //this.workflowDetailsModalParams = {title:'详情',flag:'view',bean:row, type: 'view'};
        this.showModal = true;
        this.nowProcess = row;
        this.firstShowHistory = false
      },
      flowChart (row) {
        this.showModal = true;
        this.nowProcess = row;
        this.firstShowHistory = true
      },
      revokeWorkflow(row){//撤销流程
        this.$Spin.show();
        let parmas = {id: row.id};
        doRevoke(parmas).then(data => {
          if (data.state == true && data.result == true) {
            this.$Message.success(data.msg);
            this.reloadData();
          }else {
            this.$Message.error({content: data.msg, duration: 10});
          }
          this.$Spin.hide();
        }).catch(err => {
          this.$Message.error('技术错误！<br>'+err);
          console.log(err);
          this.$Spin.hide();
        })
      },
      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
        getWorkflowApplyPage(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.nowProcess = this.tableData[0];
          } else {
            this.tableData = [];
          }
          this.loading = false;
        }).catch(err => {
          this.tableData = [];
          this.$Message.error('查询失败！')
          console.log(err)
        })
      },
      onCurrentChange(currentRow, oldCurrentRow) {
        this.nowProcess = 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;
    }
  }
</script>

<style>

</style>
