<template>
  <basic-container>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row type="flex" class="row-bg" justify="end">
        <el-form-item>
          <el-button @click="handleCancel">关闭</el-button>
        </el-form-item>
      </el-row>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title" ><span style="font-size: 20px">审批信息</span></template>
          <el-row>
            <el-col :span="12">
              <el-form-item  label="告警设备">
                <el-tag type="info">{{form.deviceId}}</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备类型">
                <el-tag type="info">{{form.deviceType}}</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="告警类型">
                <el-tag type="info">{{form.alarmType}}</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="告警时间">
                <el-tag type="info">{{form.alarmTime}}</el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="告警地点">
            <el-input :disabled="true" type="textarea" v-model="form.alarmPosition" placeholder="暂无数据"/>
          </el-form-item>
          <el-form-item label="告警原因" >
            <el-input :disabled="true" type="textarea" v-model="form.alarmReason" placeholder="暂无数据" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title" ><span style="font-size: 20px">流程信息</span></template>
          <el-row type="flex" class="row-bg">
            <el-timeline>
              <el-timeline-item :key="flow.id" :timestamp="flow.createTime" v-for="flow in flowList" placement="top">
                <el-card shadow="hover">
                  <p>{{flow.assigneeName}} 在 [{{flow.createTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                  <p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{flow.historyActivityDurationTime}}]</p>
                  <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                  <p v-if="flow.endTime!==''">结束时间: [{{flow.endTime}}]</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="3" style="height: 500px">
          <template slot="title" ><span style="font-size: 20px">流程跟踪</span></template>
          <el-row type="flex" class="row-bg" style="background: white">
            <el-image :src="src"></el-image>
<!--            <img :src="src" alt="design">-->
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </basic-container>
</template>

<script>
  import {historyFlowList} from "@/api/work/process";
  import {getDetail} from "@/api/order/deviceorder";

  export default {
    data() {
      return {
        activeNames: ['1','2','3'],
        businessId: '',
        processInstanceId: '',
        src: '',
        flowList: [],
        form: {
          flow:{
            assigneeName:'',
          },
          startTime: '',
          endTime: '',
          reason: '',
        }
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.processInstanceId = this.$route.params.processInstanceId;
        this.businessId = this.$route.params.businessId;

        this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}`;
        historyFlowList(this.processInstanceId).then(res => {
          const data = res.data;
          if (data.success) {
            this.flowList = data.data;
            console.log(this.flowList)
          }
        })
        getDetail(this.businessId).then(res => {
          const data = res.data;
          if (data.success) {
            this.form = data.data;
          }
        })
      },

      handleCancel() {
        this.$router.$avueRouter.closeTag();
        this.$router.go(-1);
      }
    }
  }
</script>
