<template>
  <div class="job-form">
    <el-form v-loading="loading" 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.alarmMessage" type="text" placeholder="未知" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="3">
          <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-image
              v-for="firstImage in firstImageList"
              :key="firstImage"
              :src="firstImage"
              :preview-src-list="firstImageList"
              fit="fill"
              style="width:150px;height: 150px;border-radius: 5px; margin-right:10px;"/>
              <!--<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">
        <el-col :span="24">
          <el-form-item label="维护图片">
            <el-image
              v-for="handleImage in handleImageList"
              :key="handleImage"
              :src="handleImage"
              :preview-src-list="firstImageList"
              fit="fill"
              style="width:150px;height: 150px;border-radius: 5px; margin-right:10px;"/>

              <!--<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">
          <div>
            <div class="table-label">
              工单动态
            </div>
            <div class="table-content">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.time"
                  color="#0bbd87">
                  {{ activity.name }}
                </el-timeline-item>
              </el-timeline>
            </div>
            <div class="clear-float"/>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getJobInfo } from '@/api/job'
import { compareCalendar } from '@/utils/string'

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: '', // 报警内容
        alarmMessage: '', // 告警详情
        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, // 是否显示地图
      loading: true
    }
  },
  created() {
    const jobId = this.$route.query.jobId
    if (jobId) {
      this.getJobInfo(jobId)
    } else {
      this.$message.error('参数加载错误')
    }
  },
  activated() {
    const jobId = this.$route.query.jobId
    if (jobId) {
      this.getJobInfo(jobId)
    } else {
      this.$message.error('参数加载错误')
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(jobId) {
      this.getJobInfo(jobId)
    },
    // 获取工单详情
    getJobInfo: function(jobId) {
      this.loading = true
      const base_url = process.env.BASE_API + '/static/'
      getJobInfo(jobId).then(response => {
        this.loading = false
        if (response.code === 200) {
          if (response.data.length <= 0) {
            return
          }
          const job = response.data[0]
          this.jobForm = job
          // 处理现场图片
          if (job.firstStatePhotos !== '') {
            this.firstImageList = []
            const urls = job.firstStatePhotos.split(';')
            for (const url of urls) {
              if (url) {
                // this.firstImageList.push({ name: url, url: base_url + url })
                this.firstImageList.push(base_url + url)
              }
            }
          } else {
            this.firstImageList = []
          }
          // 处理维护图片
          if (job.handlePhotos.length !== '') {
            this.handleImageList = []
            const urls = job.handlePhotos.split(';')
            for (const url of urls) {
              if (url) {
                // this.handleImageList.push({ name: url, url: base_url + url })
                this.handleImageList.push(base_url + url)
              }
            }
          } else {
            this.handleImageList = []
          }
          // 处理工单动态
          // 若有getJobTime有值，表示有人接单
          const activities = []
          const jobForm = job
          if (jobForm.createTime && jobForm.createTime !== '0000-00-00 00:00:00') {
            activities.push({ time: jobForm.createTime, name: '创建工单', num: 1 })
          }
          if (jobForm.getJobTime && jobForm.getJobTime !== '0000-00-00 00:00:00') {
            let getName = jobForm.getJobPerson ? jobForm.getJobPerson : '系统'
            getName = getName + '接单'
            activities.push({ time: jobForm.getJobTime, name: getName, num: 2 })
          }
          if (jobForm.confirmJobTime && jobForm.confirmJobTime !== '0000-00-00 00:00:00') {
            let confirmName = jobForm.confirmJobPerson ? jobForm.confirmJobPerson : '系统'
            confirmName = confirmName + '确认工单'
            activities.push({ time: jobForm.confirmJobTime, name: confirmName, num: 3 })
          }
          if (jobForm.handleJobTime && jobForm.handleJobTime !== '0000-00-00 00:00:00') {
            if (jobForm.jobStatus === '4') {
              let handleName = jobForm.handleJobPerson ? jobForm.handleJobPerson : '系统'
              handleName = handleName + '取消工单'
              activities.push({ time: jobForm.handleJobTime, name: handleName, num: 4 })
            } else {
              let handleName = jobForm.handleJobPerson ? jobForm.handleJobPerson : '系统'
              handleName = handleName + '完成工单'
              activities.push({ time: jobForm.handleJobTime, name: handleName, num: 4 })
            }
          }
          if (jobForm.flow && jobForm.flow.length > 0) {
            for (const item of jobForm.flow) {
              const transName = item.from + '转单给' + item.to
              activities.push({ time: item.time, name: transName, num: 4 })
            }
          }
          if (activities.length > 1) {
            activities.sort((b, a) => {
              const cmp = compareCalendar(a.time, b.time)
              if (cmp === 0) {
                if (a.num > b.num) return -1
                else return 1
              } else {
                return compareCalendar(a.time, b.time)
              }
            })
          }
          this.activities = activities
        }
      })
    },
    // 图片预览
    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;
    }
    .table-label{
      width: 120px;
      float: left;
      text-align: right;
      font-size: 14px;
      font-weight: 700;
      color: #606266;
      line-height: 40px;
      padding: 0 12px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .table-content{
      float:left;
      padding-top: 15px;
    }
  }
</style>
