<template>
  <div class="job-form">
    <el-form ref="dataForm" :label-position="labelPosition" :model="jobForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="工单编号">
            <el-input v-model="jobForm.jobCode" type="text" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="3">
          <el-form-item label="闸井编号">
            <el-input v-model="jobForm.wellCode" type="text" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="设备编号">
            <el-input v-model="jobForm.devcode" type="text" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="3">
          <el-form-item label="详细地址">
            <el-input v-model="jobForm.position" type="text" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="告警类型">
            <el-input v-model="jobForm.alarmTypeName" type="text" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="3">
          <el-form-item label="告警内容">
            <el-input v-model="jobForm.alarmContentName" type="text" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="处理状态">
            <el-input v-model="jobForm.jobStatusName" type="text" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="jobForm.firstState" :gutter="20">
        <el-col :span="20">
          <el-form-item label="现场详情">
            <el-input v-model="jobForm.firstState" :rows="3" type="textarea" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="firstImageList.length>0" :gutter="20">
        <el-col :span="20">
          <el-form-item label="现场图片">
            <el-upload
              ref="upload"
              :file-list="firstImageList"
              :class="{hide:hideUpload}"
              :on-preview="handlePictureCardPreview"
              accept=".jpg,.jpeg,.png "
              action="http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/uploadImgs"
              list-type="picture-card"
              disabled>
              <i class="el-icon-plus"/>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
              <div class="imgBox">
                <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
              </div>
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="jobForm.handleMessage" :gutter="20">
        <el-col :span="20">
          <el-form-item label="维护详情">
            <el-input v-model="jobForm.handleMessage" :rows="3" type="textarea" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="handleImageList.length>0" :gutter="20">
        <el-col :span="24">
          <el-form-item label="维护图片">
            <el-upload
              ref="upload"
              :file-list="handleImageList"
              :class="{hide:hideUpload}"
              :on-preview="handlePictureCardPreview"
              accept=".jpg,.jpeg,.png "
              action="http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/uploadImgs"
              list-type="picture-card"
              disabled>
              <i class="el-icon-plus"/>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
              <div class="imgBox">
                <img :src="dialogImageUrl" alt="" style="margin:0 auto; max-height: 400px; max-width: 700px">
              </div>
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item label="工单动态">
            <el-steps :active="activeStep">
              <el-step
                v-for="(activity, index) in activities"
                :key="index"
                :title="activity.content"
                :description="activity.timestamp"/>
            </el-steps>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item v-if="jobForm.flow" label="转单记录">
            {{ jobForm.flow }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getJobInfo } from '@/api/job'
export default {
  name: 'DetailJob',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      jobForm: {
        jobCode: '', // 工单编号
        wellCode: '', // 闸井编号
        devcode: '', // 设备编号
        position: '', // 详细地址
        coordinateX: '',
        coordinateY: '',
        latBaidu: '',
        lngBaidu: '',
        latGaode: '',
        lngGaode: '',
        alarmType: '',
        alarmTypeName: '', // 告警类型
        alarmContentName: '', // 报警内容
        jobStatusName: '', // 工单处理状态
        firstState: '', // 现场情况描述
        firstStatePhotos: '', // 现场情况图片
        handleMessage: '', // 维护情况描述
        handleStatePhotos: '', // 维护图片
        getJobPerson: '', // 接单人员名称
        getJobTime: '', // 接单时间
        confirmJobPerson: '', // 确认人员名称
        confirmJobTime: '', // 确认时间
        handleJobPerson: '', // 完成人员名称
        handleJobTime: '', // 完成时间
        flow: '' // 工单流转记录
      }, // 表单
      deptProps: {
        parent: 'pid',
        value: 'id',
        label: 'name',
        children: 'children'
      },
      activeStep: 0,
      activities: [], // 工单记录
      hideUpload: true,
      firstImageList: [], // 现场图片列表
      handleImageList: [], // 处理图片列表
      dialogImageUrl: '', // 图片预览路径
      dialogVisible: false, // 图片预览框是否显示
      labelPosition: 'right', // labe对齐方式
      mapShow: false // 是否显示地图
    }
  },
  mounted() {
    const jobId = this.$route.query.jobId
    this.getJobInfo(jobId)
  },
  methods: {
    // 初始化对话框
    initDialog: function(jobId) {
      this.getJobInfo(jobId)
    },
    // 获取工单详情
    getJobInfo: function(jobId) {
      const base_url = process.env.BASE_API + '/static/'
      getJobInfo(jobId).then(response => {
        if (response.code === 200) {
          const job = response.data[0]
          this.jobForm = job
          // 处理现场图片
          if (job.firstStatePhotos.length > 0) {
            this.firstImageList = []
            const urls = job.firstStatePhotos.split(';')
            for (const url of urls) {
              if (url) {
                this.firstImageList.push({ name: url, url: base_url + url })
              }
            }
          } else {
            this.firstImageList = []
          }
          // 处理维护图片
          if (job.handlePhotos.length > 0) {
            this.handleImageList = []
            const urls = job.handlePhotos.split(';')
            for (const url of urls) {
              if (url) {
                this.handleImageList.push({ name: url, url: base_url + url })
              }
            }
          } else {
            this.handleImageList = []
          }
          // 处理工单动态
          // 若有人接单，状态改为已接单
          if (job.getJobTime) {
            const activity = {
              content: job.getJobPerson + '已接单',
              timestamp: job.getJobTime
            }
            this.activities.push(activity)
            this.activeStep = 1
          } else { // 否则添加空的状态
            const activity = {
              content: '待处理',
              timestamp: ''
            }
            this.activities.push(activity)
          }
          // 若有人确认，状态改为已确认
          if (job.confirmJobTime) {
            const activity = {
              content: job.confirmJobPerson + '已确认',
              timestamp: job.confirmJobTime
            }
            this.activities.push(activity)
            this.activeStep = 2
          } else if (job.alarmType === '1') { // 若无人确认且为数据异常插入空的待确认
            const activity = {
              content: '待确认',
              timestamp: ''
            }
            this.activities.push(activity)
          }
          if (job.handleJobTime) {
            // 若有处理时间，状态置为已完成
            // 若没有处理人则处理人为系统
            let handleJobPerson = job.handleJobPerson
            if (!handleJobPerson) {
              handleJobPerson = '系统'
            }
            const activity1 = {
              content: handleJobPerson + '处理中',
              timestamp: job.handleJobTime
            }
            const activity2 = {
              content: handleJobPerson + '已完成',
              timestamp: job.handleJobTime
            }
            this.activities.push(activity1)
            this.activities.push(activity2)
            this.activeStep = 3
          } else if (this.jobForm.jobStatusName === '完成') {
            // 特殊情况处理:已确认之后结束的工单,将完成人和时间用确认人代替
            const activity = {
              content: job.confirmJobPerson + '已完成',
              timestamp: job.confirmJobTime
            }
            this.activities.push(activity)
          } else {
            const activity1 = {
              content: '处理中',
              timestamp: ''
            }
            const activity2 = {
              content: '已完成',
              timestamp: ''
            }
            this.activities.push(activity1)
            this.activities.push(activity2)
          }
          if (Array.isArray(job.flow) && job.flow.length > 0) {
            for (const step of job.flow) {
              const from = step.from
              const to = step.to
              const timestamp = step.time
              this.jobForm.flow = timestamp + ' 由 ' + from + ' 转给 ' + to
            }
          } else {
            this.jobForm.flow = ''
          }
        }
      })
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
  .job-form {
    margin:20px 20px;
    padding-bottom: 30px;
    .hide .el-upload--picture-card {
      display: none;
    }
    .main-form {
      margin: 20px 30px;
      padding: 10px;
    }
    .el-dialog {
      width: 700px
    }
    .el-select {
      width: 100%;
    }
    .line {
      width: 50px;
      margin-left: 5px;
    }
    .hide .el-upload-–picture-card {
      display: none;
    }
    .imgBox {
      width: 100%;
      text-align: center;
    }
    .el-step.is-horizontal .el-step__line{
      top:17px;
    }
  }
</style>