<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="标题">
        <el-input maxlength="20"
                  v-model="queryParams.processDefinitionName"
                  placeholder="请输入标题"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh-right" size="mini" @click="reList">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum-1) * queryParams.pageSize + (scope.$index + 1) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程id" prop="instanceId"/>
      <el-table-column label="任务id" prop="taskId"/>
      <el-table-column label="流程名称" prop="processDefinitionName"/>
      <el-table-column label="提交人" prop="creatUserName"/>
      <el-table-column label="部门" prop="creatDeptName"/>
      <el-table-column label="提交时间" prop="creatTime">
        <template slot-scope="scope">
          <span>{{ formDateTime(scope.row.creatFormTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称" prop="taskName"/>
      <el-table-column label="外置表单" prop="formKey"/>
      <el-table-column label="操作" align="center" width="300px">
        <template slot-scope="scope">
          <el-button type="success"
                     size="mini"
                     @click="openForm(scope.$index, scope.row)">审批
          </el-button>
          <el-button type="success"
                     size="mini"
                     @click="openTaskForm(scope.$index, scope.row)">转办
          </el-button>
          <el-button
            size="mini" type="warning"
            @click="showImage(scope.$index, scope.row)">进度查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="1000px">
      <!--历史表单组件-->
      <addEnterprise ref="addEnterprise"/>
      <el-divider content-position="left">审核</el-divider>
      <template>
        <ele-form
          :isShowSubmitBtn=true
          :isShowBackBtn=false
          :isShowResetBtn=true
          :rules="formObj.rules"
          :form-desc="formObj.formDesc"
          v-model="formObj.formData"
          :request-fn="handleRequest"
          @request-success="handleRequestSuccess"
        ></ele-form>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="activitiImg.title" :visible.sync="activitiImg.open" width="1000px">
      <el-image :src="activitiImg.src"></el-image>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :title="processInstance.title" :visible.sync="processInstance.open"
               width="600px">
      <el-form label-width="70px" :model="processInstance">
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门" prop="depId">
              <treeselect
                :options="deptOptions"
                @select="selectDepart"
                placeholder="请选择归属部门"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接手人" prop="leadUserId">
              <el-select v-model="processInstance.userId" clearable placeholder="全部">
                <el-option
                  v-for="item in userOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="transToOffice">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { list, get, add } from '@/api/assets/pendingNew.js'
  //流程历史表单组件
  import addEnterprise from '@/views/activiti/formsActiviti/index.vue'

  import { treeselect } from '@/api/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { selectlist } from '@/api/system/user'
  import { transToOffice } from '@/api/activiti/processInstance'
  export default {
    name: 'PendingNew',
    components: {
      addEnterprise,
      Treeselect
    },
    // 数据模型
    data() {
      return {
        instanceId: '',
        // 表格数据
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          processDefinitionName:""
        },
        // 分页参数
        total: 0,
        pageNum: 1,
        pageSize: 10,
        tableData: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        //
        taskCommitForm: {
          taskId: undefined,
          myFormDataActiviti: {}
        },
        // 表单数据
        formEntity: {
          fId: {},
          modelKey: {},
          modulId: {},
          fName: {},
          instanceId: {},
          processDefinitionName:undefined,
          taskName:undefined,
          creatUserName:undefined,
          creatDeptName:undefined,
          creatFormTime:undefined,
          fKey: {},
          fVersion: {},
          applyUser: {},
          jsonData: {}
        },
        forms: {
          title: '查看审核流程',
          open: false,
          data: []
        },
        // 动态表单数据
        formObj: {
          // 表单数据
          formData: {},
          formDesc: {},
          rules: {}
        },
        activitiImg: {
          title: '查看审核流程图',
          open: false,
          src: ''
        },
        // 部门树选项
        deptOptions: [],
        userOptions: [],
        processInstance: {
          title: '转办',
          open: false,
          taskId: '',
          userId: ''
        }
      }
    },
    // 初始化方法
    created() {
      // 表格初始化
      this.getList()
      //初始化树
      this.getTreeselect()
    },
    // 定义方法
    methods: {
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data
        })
      },
      // 搜索按钮操作
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      reList() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        }
        this.getList()
      },
      // 获取列表数据
      getList() {
        this.loading = true
        list(this.addDateRange(this.queryParams)).then(
          response => {
            if (response.code === 200) {
              this.tableData = response.rows
              this.total = response.total
              this.loading = false
            } else {
              this.msgError(response.msg)
            }

          }
        )
      },
      /**
       * 清空转办表单
       * */
      reTaskForm(){
        this.userOptions = []
        this.processInstance.userId = undefined
      },
      // 获取当前选中部门的名称
      selectDepart(val) {
        this.reTaskForm()
        selectlist(val.id).then(response => {
          this.userOptions = response.data
        })
      },
      openTaskForm(index, row) {
        this.processInstance.open = true
        this.processInstance.taskId = row.taskId
        this.reTaskForm()
      },
      transToOffice(){//转办
        transToOffice(this.processInstance.taskId, this.processInstance.userId).then(
          response => {
            if (200 === response.code) {
              this.msgSuccess(response.msg)
              this.getList()
            } else {
              this.msgError(response.msg)
            }
          }
        )
        this.processInstance.open = false
        this.getList()
      },
      openForm(index, row) {
        get(row.modelKey, row.formKey, row.modelVersion).then(
          response => {
            this.taskCommitForm.taskId = row.taskId
            this.formEntity = response.data
            this.formEntity.fId = undefined
            this.formEntity.instanceId = row.instanceId
            let jsonData = response.data.jsonData
            let parse = JSON.parse(jsonData)
            this.formObj.formDesc = parse.formDesc
            this.formObj.rules = parse.rules
            let formData = parse.formData
            if (null != formData) {
              this.formObj.formData = parse.formData
            }
            this.formEntity.processDefinitionName=row.processDefinitionName
            this.formEntity.taskName=row.taskName
            this.formEntity.creatUserName=row.creatUserName
            this.formEntity.creatDeptName=row.creatDeptName
            this.formEntity.creatFormTime=row.creatFormTime
            this.open = true
            this.title = '审批'
            this.$nextTick(() => {
              this.$refs.addEnterprise.showForms(row.instanceId)
            })
          }
        )

      },/*
      *显示流程图
      * */
      showImage(index, row) {
        let instanceId = row.instanceId
        let modelKey = row.modelKey
        let version = row.modelVersion
        instanceId = process.env.VUE_APP_BASE_API + '/leaveNew/read-resource?processDefinitionKey=' + modelKey + '&version=' + version + '&processInstanceId=' + instanceId + '&t=' + Math.random()
        this.activitiImg.open = true
        this.activitiImg.src = instanceId
      },
      handleRequest(data) {
        console.log(data)

        this.formObj.formData = data
        let s = JSON.stringify(this.formObj)
        this.formEntity.jsonData = s
        this.taskCommitForm.myFormDataActiviti = this.formEntity
        console.log(this.taskCommitForm)
        add(this.taskCommitForm).then(response => {
          if (response.code === 200) {
            this.msgSuccess(response.msg)
            this.getList()
          } else {
            this.msgError(response.msg)
          }
        })
        return Promise.resolve()
      },
      handleRequestSuccess() {
        this.getList()
        this.open = false
      }
    }
  }
</script>
<style scoped>
</style>
