<template>
  <el-dialog :visible.sync="dialogFormVisible" title="详细信息" append-to-body>
    <el-form ref="dataForm" :model="jobDetail" label-well-code="right" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标识器ID">
            <el-input :value="jobDetail.markerId"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品信息">
            <el-input :value="jobDetail.productInfo"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="详细地址">
            <el-input :value="jobDetail.position"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-input :value="jobDetail.createTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修人员">
            <el-input :value="jobDetail.createUser"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="维护类型">
            <el-input :value="jobDetail.content"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单状态">
            <el-input :value="jobDetail.status"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="派发时间">
            <el-input :value="jobDetail.distributeTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维护人员">
            <el-input :value="jobDetail.username"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="完成时间">
            <el-input :value="jobDetail.finishTime"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col v-if="!jobDetail.upload" :span="12">
          <el-form-item label="上传图片">
            <el-input value="未上传"/>
          </el-form-item>
        </el-col>
        <el-col v-else :span="24">
          <el-form-item label="上传图片">
            <el-image
              :src="baseUrl+jobDetail.upload+token"
              :preview-src-list="[baseUrl+jobDetail.upload+token]"
              class="job-img"
              fit="contain"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'

export default {
  name: 'InspectionDetail',
  data() {
    return {
      dialogFormVisible: false,
      baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
      token: '?token=' + this.$store.getters.token, // token
      jobDetail: {
        id: '',
        markerId: '',
        productInfo: '',
        position: '',
        createTime: '',
        status: '',
        username: '',
        distributeTime: '',
        finishTime: '',
        longitude: '',
        latitude: '',
        createUser: '',
        content: '',
        upload: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    initDialog: function(dialogFormVisible, row = null) {
      this.dialogFormVisible = dialogFormVisible
      this.jobDetail = {
        id: row.id,
        markerId: row.markerId,
        productInfo: row.productInfo,
        position: row.position,
        createTime: row.createTime,
        status: row.status,
        username: row.username,
        distributeTime: row.distributeTime,
        finishTime: row.finishTime,
        longitude: row.longitude,
        latitude: row.latitude,
        createUser: row.createUser,
        content: row.content,
        upload: row.upload
      }
    },
    cancel() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .job-img{
    height: 300px;
  }
</style>

<style>
  .el-icon-circle-close {
    color: white;
  }
</style>