<template>
<div>
  <h4 style="text-align:center">{{title}}</h4>
  <img  v-if="code === 1" class="process-status-img" src="../../../../assets/img/flowable/1.png"/>
  <img  v-if="code === 2" class="process-status-img" src="../../../../assets/img/flowable/2.png"/>
  <img  v-if="code === 3" class="process-status-img" src="../../../../assets/img/flowable/3.png"/>
  <img  v-if="code === 4" class="process-status-img" src="../../../../assets/img/flowable/4.png"/>
  <img  v-if="code === 5" class="process-status-img" src="../../../../assets/img/flowable/5.png"/>
  <img  v-if="code === 6" class="process-status-img" src="../../../../assets/img/flowable/6.png"/>
  <el-tabs type="border-card" v-model="selectedTab" @tab-click="onTabChange">
    <el-tab-pane label="表单信息" name="form-first">

      <component :formReadOnly="formReadOnly" v-if="formType === '2'" :status="'taskFormDetail'"  :class="formReadOnly?'readonly':''" ref="form" :businessId="businessId" :is="form"></component>
      <PreviewForm   v-if="formType !== '2'"  :processDefinitionId="procDefId" :edit="false" :taskFormData="taskFormData" ref="form"/>

    </el-tab-pane>
    <el-tab-pane label="流程信息" v-if="procInsId"  name="form-second">
       <flow-time-line :historicTaskList="historicTaskList"/>
    </el-tab-pane>
    <el-tab-pane label="流程图"  name="form-third">
       <el-card class="box-card"  shadow="hover">
          <div slot="header" class="clearfix">
            <span>流程图</span>
          </div>
          <flow-chart ref="chart1" v-if="procInsId" :processInstanceId="procInsId" />
          <flow-chart ref="chart2" v-if="!procInsId" :processDefId="procDefId" />
        </el-card>
    </el-tab-pane>
    <el-tab-pane label="流转记录" v-if="procInsId" name="form-forth">
          <flow-step :historicTaskList="historicTaskList"/>
     </el-tab-pane>
    <el-tab-pane label="入库修改历史" v-if="wareHouseId" name="form-sixth">
      <vxe-table
        border="inner"
        size="mini"
        max-height="1000px"
        :data="dataListHi">
        <vxe-column type="seq" width="60" title="序号"></vxe-column>
        <vxe-column min-width="120" align="center" title="修改类型" field="updateTradeType">
          <template v-slot="scope">
            <span v-if="commonJS.isNotEmpty(scope.row.updateTradeType)"> {{scope.row.updateTradeType}} </span>
            <span v-else> -- </span>
          </template>
        </vxe-column>
        <vxe-column min-width="160" align="center" title="修改商品" field="updateTradeName">
          <template v-slot="scope">
            <span v-if="commonJS.isNotEmpty(scope.row.updateTradeName)"> {{scope.row.updateTradeName}} </span>
            <span v-else> -- </span>
          </template>
        </vxe-column>
        <vxe-column min-width="160" align="center" title="修改人" field="updateUser">
          <template v-slot="scope">
            <span v-if="scope.row.endflag === '2'">(创建人) {{scope.row.updateUser}} </span>
            <span v-else>{{scope.row.updateUser}} </span>
          </template>
        </vxe-column>
        <vxe-column min-width="160" align="center" title="修改时间" field="createDate"></vxe-column>
        <vxe-column title="操作" width="150px" fixed="right" align="center">
          <template  slot-scope="scope">
            <el-button type="text" size="small" @click="hiDetail(scope.row)">修改详情</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-tab-pane>
    <el-tab-pane label="领用退回历史" v-if="returnId" name="form-seventh">
      <vxe-table
        border="inner"
        size="mini"
        max-height="1000px"
        :data="dataListHiCollect">
        <vxe-column type="seq" width="60" title="序号"></vxe-column>
        <vxe-column min-width="160" align="center" title="退回物品" field="returnGoods">
          <template v-slot="scope">
            <span v-if="commonJS.isNotEmpty(scope.row.returnGoods)"> {{scope.row.returnGoods}} </span>
            <span v-else> -- </span>
          </template>
        </vxe-column>
        <vxe-column min-width="160" align="center" title="退回申请人" field="returnUserName">
          <template v-slot="scope">
            <span>{{scope.row.returnUserName}} </span>
          </template>
        </vxe-column>
        <vxe-column min-width="160" align="center" title="退回时间" field="createDate"></vxe-column>
        <vxe-column title="操作" width="150px" fixed="right" align="center">
          <template  slot-scope="scope">
            <el-button type="text" size="small" @click="hiDetailCollect(scope.row)">退回详情</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-tab-pane>
  </el-tabs>
  <WareHouseHi ref="wareHouseHi"></WareHouseHi>
  <CollectReturnHi ref="collectReturnHi"></CollectReturnHi>

</div>
</template>

<script>
  // import FlowChart from '../modeler/FlowChart'
import UserSelect from '@/components/userSelect'
import PreviewForm from '@/views/modules/flowable/form/GenerateFlowableForm'
import FlowStep from '@/views/modules/flowable/components/FlowStep'
import FlowTimeLine from '@/views/modules/flowable/components/FlowTimeLine'
import TaskService from '@/api/flowable/TaskService'
import FormService from '@/api/flowable/FormService'
import ProcessService from '@/api/flowable/ProcessService'
import WareHouseService from '@/api/materialManagement/WareHouseService'
import WareHouseHi from '@/views/modules/materialManagement/wareHouse/WareHouseHi'
import CollectService from '@/api/materialManagement/CollectService'
import CollectReturnHi from '@/views/modules/materialManagement/collect/CollectReturnHiForm'
  const _import = require('@/router/import-' + process.env.NODE_ENV)
  export default {
    taskDefExtensionService: null,
    taskService: null,
    formService: null,
    flowCopyService: null,
    porcessService: null,
    wareHouseService: null,
    collectService: null,
    beforeCreate () {
      this.taskService = new TaskService()
      this.formService = new FormService()
      this.porcessService = new ProcessService()
      this.wareHouseService = new WareHouseService()
      this.collectService = new CollectService()
    },
    activated () {
      this.init()
          // 读取流程表单
      if (this.formType === '2') {
        if (this.formUrl === '/404') {
          this.form = null
          this.$message.info('没有关联流程表单!')
        } else {
          this.form = _import(`modules${this.formUrl}`)
        }
      } else {
      // 读取流程表单
        if (this.formUrl === '/404') {
          this.$refs.form.createForm('')
        } else {
          this.$refs.form.createForm(this.formUrl)
        }
        this.formService.getHistoryTaskFormData({ processInstanceId: this.procInsId, procDefId: this.procDefId, taskDefKey: this.taskDefKey }).then(({data}) => {
          this.taskFormData = data
        })
      }

    // 读取流程状态
      this.porcessService.queryProcessStatus(this.procDefId, this.procInsId).then(({data}) => {
        this.code = data
      })
      this.taskService.historicTaskList(this.procInsId).then(({data}) => {
        this.historicTaskList = data
      })
    },
    components: {
      UserSelect,
      PreviewForm,
      FlowStep,
      FlowTimeLine,
      WareHouseHi,
      CollectReturnHi
      // FlowChart
    },
    watch: {
      selectedTab (val) {
        if (val === 'form-third') {
          if (this.procInsId) {
            this.$refs.chart1.init()
          } else {
            this.$refs.chart2.init()
          }
        }
      }
    },
    methods: {
      init () {
        this.selectedTab = 'form-first'
        this.procDefId = this.$route.query.procDefId
        this.procDefKey = this.$route.query.procDefKey
        this.formType = this.$route.query.formType
        this.formUrl = this.$route.query.formUrl
        this.taskId = this.$route.query.taskId
        this.taskDefKey = this.$route.query.taskDefKey
        this.status = this.$route.query.status
        this.title = this.$route.query.formTitle
        this.businessId = this.$route.query.businessId
        this.procInsId = this.$route.query.procInsId
        this.wareHouseId = this.$route.query.wareHouseId
        this.returnId = this.$route.query.returnId

        this.formReadOnly = true
        // this.$nextTick(() => {
        //   try {
        //     _this.$refs.form.getKeyWatch(Math.random().toString())
        //   } catch (e) {
        //     console.log(e)
        //   }
        // })
        let _this = this
        setTimeout(function () {
          try {
            _this.$refs.form.getKeyWatch(Math.random().toString())
          } catch (e) {
            console.log(e)
          }
        }, 500)
      },
      onTabChange (event) {
        if (event.name === 'form-sixth') {
          if (this.commonJS.isNotEmpty(this.wareHouseId)) {
            this.wareHouseService.findHiById(this.wareHouseId).then(({data}) => {
              this.dataListHi = data
            })
          }
        }
        if (event.name === 'form-seventh') {
          if (this.commonJS.isNotEmpty(this.returnId)) {
            this.collectService.findByReturnId(this.returnId).then(({data}) => {
              this.collectService.findHiById(data.id).then(({data}) => {
                this.dataListHiCollect = data
              })
            })
          }
        }
      },
      // 打开入库修改历史详情页
      hiDetail (row) {
        if (this.commonJS.isNotEmpty(row.id)) {
          this.$refs.wareHouseHi.init(row.id)
        }
      },
      // 打开领用退回历史详情页
      hiDetailCollect (row) {
        if (this.commonJS.isNotEmpty(row.id)) {
          this.$refs.collectReturnHi.init(row.id)
        }
      }
    },
    data () {
      return {
        form: null,
        formType: '',
        formUrl: '',
        selectedTab: 'frist',
        historicTaskList: [],
        procDefId: '',
        code: '1',
        procInsId: '',
        readOnly: false,
        procDefKey: '',
        taskId: '',
        taskFormData: [],
        taskDefKey: '',
        status: '',
        title: '',
        businessId: '',
        wareHouseId: '',
        returnId: '',
        dataListHi: [],
        dataListHiCollect: []
      }
    }
  }
</script>
<style lang="less">
.process-status-img {
    height: 180px;
    position: absolute;
    z-index: 999;
    top: 1px;
    right: 1px;
}
</style>
