<!--
 * @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['高后果区长度'] }}m</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: 'HighConsequenceDialog',
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '130px',
      form: {
        'id': '94362876-4e24-48d3-bf17-05e5c1f900ba',
        '所属管理处': '临汾管理处',
        '数量': null,
        '创建人': null,
        '位置描述': '国新正泰工厂-古县支线(JP14 + 800 ~ JP14 + 1000)',
        '识别单位及负责人': '临汾管理处',
        '创建日期': null,
        '识别时间': '2020-11-23 00:00:00',
        '隐患描述': null,
        '高后果区编号': 'LFHCAs029',
        '经度': 111.886774,
        '纬度': 36.237637,
        '高后果区长度': '0.2',
        '行政区域': '古县岳阳真五马村',
        '地区级别': '二级地区',
        '高后果区级别': 'II级',
        '高后果区特征描述': '管道两侧200米范围有1座古县城燃输气门站',
        '户数': 40,
        '机构名称': '古县站',
        '起始位置x': 111.886774,
        '起始位置y': 36.237637,
        '起始位置z': 732.12,
        '结束位置x': 111.886774,
        '结束位置y': 36.237637,
        '结束位置z': 732.12
      }
    }
  },
  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: #000;
  color: white;
  border: 2px solid #1157a0;
  border-radius: 10px;
  margin-top: 40vh;
  .el-dialog__header{

  }
  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    font-weight: bold;
    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>