<!--
 * @Description: 隐患详情弹窗
 * @Author: 王晓颖
 * @Date: 2021-04-13 14:07:44
 -->
<template>
  <el-dialog :visible.sync="dialogFormVisible" custom-class="dark-dialog" title="隐患详情" width="45%" top="40vh">
    <el-form :model="form" class="dialog-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="隐患类型">
            <span>{{ form['隐患类型'] }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="隐患发现时间">
            <span>{{ form['隐患发现时间'] }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="经度">
            <span>{{ form['经度'] }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="纬度">
            <span>{{ form['纬度'] }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="村庄地址">
            <span>{{ form['村庄地址'] }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="所属管理处">
            <span>{{ form['所属管理处'] }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="发现人">
            <span>{{ form['发现人'] }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="上报时间">
            <span>{{ form['创建时间'] }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="位置描述">
            <span>{{ form['位置描述'] }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="业主单位">
            <span>{{ form['业主单位'] }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label-width="formLabelWidth" class="form-label" label="隐患描述">
            <span>{{ form['隐患描述'] }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'ThreatDialog',
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        'eventid': '4de5c814-bc1f-4ff1-89f9-33689a945024',
        '隐患类型': '第三方施工',
        '位置描述': '孝义-霍州线(JP19 + 400)',
        '村庄地址': '介休市义棠镇南村',
        '发现人': '张俊',
        '隐患描述': '贵蓉煤化厂供电线路改造从介休电业局至孝义方向高压电路改造工程，改造工程新建高压线塔据我方管道安全距离不足且跨越我方管线，在我方管线顺气流方向左侧20米处开挖搭建高压线塔',
        '业主单位': '贵蓉煤化厂',
        '创建时间': '2021-03-09 10:30:44',
        '经度': 111.852588,
        '纬度': 37.020396,
        '所属管理处': '晋中管理处',
        '隐患发现时间': '2021-03-05',
        '隐患数量': null,
        '隐患等级': null,
        '进度': null
      }
    }
  },
  methods: {
    initDialog(data) {
      if (data) {
        this.form = data
      }
      this.dialogFormVisible = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $blue: #45aefb;
  $grey: #e1e1e1;
  $borderColor: #1157a0;
.dark-dialog{
  background-color: #14073d;
  color: white;
  border: 2px solid #1157a0;
  border-radius: 10px;
  margin-top: 40vh;
  .el-dialog__header{

  }
  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: $blue;
  }
  .el-dialog__body {
    padding: 30px 20px;
    color:white;
    font-size: 14px;
    word-break: break-all;
  }
  .dialog-form{
    .form-label{
      color:$grey;
    }
  }
  .el-form-item {
     margin-bottom: 0px;
  }
  .el-form-item__label{
    color: $blue;
  }
}
</style>