<template>
  <el-dialog :visible.sync="dialogFormVisible" title="详细信息" append-to-body>
    <el-form ref="dataForm" :model="markerForm" label-well-code="right" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标识器ID" prop="markerId">
            <el-input :value="markerForm.markerId"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片防伪ID" prop="securityId">
            <el-input :value="markerForm.securityId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品信息" prop="productInfo">
            <el-input :value="markerForm.productInfo"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户信息" prop="deptId">
            <el-input :value="markerForm.deptId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="批次号" prop="batchNum">
            <el-input :value="markerForm.batchNum"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡检周期" prop="inspectionPeriod">
            <el-input :value="markerForm.inspectionPeriod">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="安装日期" prop="installDate">
            <el-input :value="markerForm.installDate"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保质期" prop="shelfLife">
            <el-input :value="markerForm.shelfLife"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="经度" prop="longitude">
            <el-input :value="markerForm.longitude"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度" prop="latitude">
            <el-input :value="markerForm.latitude"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="详细地址" prop="position">
            <el-input :value="markerForm.position"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="具体描述" prop="description">
            <el-input :value="markerForm.description" type="textarea"/>
          </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>
export default {
  name: 'DetailMarker',
  data() {
    return {
      dialogFormVisible: false,
      markerForm: {
        markerId: '',
        securityId: '',
        productInfo: '',
        deptId: '',
        batchNum: '',
        inspectionPeriod: '',
        installDate: '',
        shelfLife: '',
        longitude: '',
        latitude: '',
        position: '',
        description: ''
      }
    }
  },
  methods: {
    initDialog: function(dialogFormVisible, row = null) {
      this.dialogFormVisible = dialogFormVisible
      this.markerForm = {
        markerId: row.markerId,
        securityId: row.securityId,
        productInfo: row.productInfo,
        deptId: row.deptId,
        batchNum: row.batchNum,
        inspectionPeriod: row.inspectionPeriod,
        installDate: row.installDate,
        shelfLife: row.shelfLife,
        longitude: row.longitude,
        latitude: row.latitude,
        position: row.position,
        description: row.description
      }
      // console.log(this.markerForm)
    },
    cancel() {
      this.dialogFormVisible = false
    }
  }
}
</script>