<template>
  <div>
    <div>
      <Row style="margin: 0px 0;" type="flex">
        <Col span="24" order="1">
          <div style="overflow: auto;">
            <img :src="imgUrl"/>
          </div>
        </Col>
      </Row>
    </div>
    <Card>
      <Row style="margin: 10px 0;" type="flex">
        <Col span="10" order="1">
        </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">
        </Col>
      </Row>
      <Table ref="tables" searchable search-place="top" :data="tableData" :columns="columns" size="small" height="250"
             :loading="loading" @on-sort-change="sortChange" @on-selection-change="selectedChange"
             highlight-row @on-current-change="onCurrentChange">
      </Table>
      <bc-page ref="priceScheme-list-page" @reload-data="reloadData" :dataCount="dataCount" size="small"
            :pageSize.sync="pageSize"></bc-page>
      <div style="text-align: center;margin-top: 25px;">
        <Button @click="cancel" style="margin-left: 10px;">关闭</Button>
      </div>
    </Card>
  </div>
</template>

<script>
  import {TOKEN_KEY, getToken, getRefreshToken} from '../bc-libs/token-util'
  import {getWorkflowTaskPage, getWorkflowTaskList} from './workflow-api'
  //时间格式化
  import moment from 'moment'; //导入模块
  let $this;
  export default {
    name: 'workflowTrackList',
    components: {
    },
    props: {
      //taskId: String,
      processInstanceId: String,
    },
    data() {
      return {
        hisTasks: [],
        imgUrl: '',
        searchForm: {},
        showModal: false,
        showWorkflowDetailsModal: false,
        modalParams: {},
        workflowDetailsModalParams: {},
        nowPriceScheme: {},
        dataCount: 0,
        pageSize: 10,
        columns: [
          /*{
            title: '业务标题',
            key: '',
            render: (h, params) => h('span', params.row.processVariables.busTitle),
            width: 200,
            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),
            width: 180,
            sortable: true,
            show: true
          },*/
          {title: '审批任务', key: 'name', width: 150, 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),
            width: 150,
            sortable: true,
            show: true
          },
          {title: '开始时间', key: '', render: (h, params) => h('span', params.row.start_time), width: 150, sortable: true, show: true},
          {title: '完成时间', key: '', render: (h, params) => h('span', params.row.verify_time), width: 150, sortable: true, show: true},
          {title: '当前状态', key: 'nowStep', width: 150, sortable: true, show: true},
          {title: '审批人', key: '',render: (h, params) => h('span', params.row.userName), width: 150, sortable: true, show: true},
          /*{title: '审批时间', key: '',render: (h, params) => h('span', params.row.verify_time), width: 140, sortable: true, show: true},*/
          {
            title: '处理结果',
            key: '',
            render: (h, params) => h('span',params.row.verify_result_str),
            width: 110,
            sortable: true,
            show: true
          },
          {
            title: '审批意见',
            key: '',
            render: (h, params) => h('span',params.row.verify_remark),
            width: 180,
            sortable: true,
            show: true
          },
          /*{title: '操作', key: 'action', width: 200, align: 'center', slot: 'actions', show: true, fixed: 'right'}*/
        ],
        tableData: [],
        selectedData: [],
        loading: true,
        sortParams: [], //[{title: 姓名, orderStr: 降序, sortKey: name, order: -}]
        getList: getWorkflowTaskList,
        commonList: [//固化常用列表
        ],
        fieldList: [//用户可以自行选择查询的字段列表及配置
        ]
      }
    },
    methods: {
      cancel () {
        this.$emit('cancel')
      },
      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.taskId = this.taskId;
        params.processInstanceId = this.processInstanceId;
        getWorkflowTaskPage(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.nowPriceScheme = this.tableData[0];
          } else {
            this.tableData = [];
          }
          this.loading = false;
        }).catch(err => {
          this.tableData = [];
          this.$Message.error('查询失败！')
          console.log(err)
        })
      },
      onCurrentChange(currentRow, oldCurrentRow) {
        this.nowPriceScheme = currentRow;
      },
    },
    mounted() {
      this.reloadData();
      $this = this;
     /* if (this.taskId){//按照任务id加载流程轨迹图
        this.imgUrl = 'workflow/processInstance/genProcessDiagramByTaskId/' + this.taskId + '?' + TOKEN_KEY + '=' + getToken();
      }else*/ if (this.processInstanceId){//按照流程id加载流程轨迹图
        this.imgUrl = 'workflow/processInstance/genProcessDiagram/' + this.processInstanceId + '?' + TOKEN_KEY + '=' + getToken();
      }
    }
  }
</script>

<style>

</style>
