<template>
  <div class="job-form">
    <el-descriptions class="margin-top" title="" size="medium" :column="2" border>
      <el-descriptions-item v-for="config of formConfig" v-show="config.hidden&&jobForm[config.value]" :key="config.value" :span="config.span" label-class-name="job-label" content-style="job-content">
        <template slot="label">
          {{ config.label }}
        </template>
        <template v-if="config.type=='text'">
          {{ jobForm[config.value]?jobForm[config.value]:config.placeholder }}
        </template>
        <template v-if="config.type=='timeline'">
          <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>
        </template>
      </el-descriptions-item>
      <el-descriptions-item v-if="jobForm.firstState" label="现场情况" :span="5">
        {{ jobForm.firstState }}
      </el-descriptions-item>
      <el-descriptions-item v-if="firstImageList.length>0" label="现场照片" :span="5">
        <template>
          <div v-if="firstImageList.length==0">
            无
          </div>
          <div v-else>
            <el-image v-for="image of firstImageList" :key="image" style="width: 100px; height: 100px" :src="image" :preview-src-list="firstImageList" />
          </div>
        </template>
      </el-descriptions-item>
      <el-descriptions-item v-if="jobForm.handleMessage" label="维护情况" :span="5">
        {{ jobForm.handleMessage }}
      </el-descriptions-item>
      <el-descriptions-item v-if="handleImageList.length>0" label="维护图片" :span="5">
        <template>
          <div v-if="handleImageList.length==0">
            无
          </div>
          <div v-else>
            <el-image v-for="image of handleImageList" :key="image" style="width: 100px; height: 100px" :src="image" :preview-src-list="handleImageList" />
          </div>
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

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

export default {
  name: 'DetailJob',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      formConfig: [
        { type: 'text', label: '工单编号', value: 'jobCode', placeholder: '未知' },
        { type: 'text', label: '点位编号', value: 'wellCode', placeholder: '未知' },
        { type: 'text', label: '设备编号', value: 'devcode', placeholder: '未知' },
        { type: 'text', label: '详细地址', value: 'position', placeholder: '未知' },
        // { type: 'text', label: '告警类型', value: 'alarmTypeName', placeholder: '未知' },
        // { type: 'text', label: '告警内容', value: 'alarmContentName', placeholder: '--' },
        { type: 'text', label: '告警详情', value: 'alarmMessage', placeholder: '未知' },
        { type: 'text', label: '工单状态', value: 'jobStatusName', placeholder: '未知' },
        { type: 'timeline', label: '工单动态', value: '', placeholder: '暂无', span: 5 }
      ], // 表单配置项
      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 = this.baseConfig.baseUrl + '/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>