<template>
  <div class="app-container">
      <!--<el-row>
        <el-col :span="24" style="padding-left: 15px;margin-bottom: -10px;">
          <div style="height: 45px;" @click="$router.go(-1)">
            <el-button size="medium" type="text" style="font-size: 18px; color: rgb(7, 63, 112);float: left;">返回
            </el-button>
          </div>
        </el-col>
      </el-row>-->
      <el-row style="width: 100%;height: 40px;">
        <el-col :span="24">
          <div style="">
            <ul>
              <li style="list-style: none;font-weight: 900;font-size: 20px;color: #053b6a;">燃气事故台账详情</li>
            </ul>
          </div>
        </el-col>
      </el-row>

      <el-row style="width: 100%;padding: 20px;">
        <el-form ref="form" v-model="form" label-width="120px" style="width: 100%;">
          <el-row>
            <el-col :span="6">
              <el-form-item label="事故名称:" prop="troubleName">
                <font>{{form.troubleName}}</font>
              </el-form-item>
              <el-form-item label="事故原因:" prop="troubleReason">
                <font>{{form.troubleReason}}</font>
              </el-form-item>
              <el-form-item label="责任单位:" prop="responsibleUnit">
                <font v-if="form.responsibleUnit != '' && form.responsibleUnit != null">{{form.responsibleUnit}}</font>
                <font v-else> - </font>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="事故类型:" prop="troubleType">
                <font v-if="form.troubleType == '1'">安全生产事故</font>
                <font v-if="form.troubleType == '2'">非生产安全事故</font>
              </el-form-item>
              <el-form-item label="事故地点:" prop="troubleLocation">
                <font>{{form.troubleLocation}}</font>
              </el-form-item>
              <el-form-item label="责任人员:" prop="responsiblePeople">
                <font v-if="form.responsiblePeople != '' && form.responsiblePeople != null">{{form.responsiblePeople}}</font>
                <font v-else> - </font>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="简要经过:" prop="briefProcess">
              <font v-if="form.briefProcess != '' && form.briefProcess != null">{{form.briefProcess}}</font>
              <font v-else> - </font>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="是否处理:" prop="isDeal">
                <font>{{form.isDeal}}</font>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="处理完成时间:" prop="dealDate">
                <font>{{form.dealDate}}</font>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="备注信息:" prop="remarks">
              <font v-if="form.remarks != '' && form.remarks != null">{{form.remarks}}</font>
              <font v-else> - </font>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>

    </div>
</template>

<script>
  import { getTrouble } from "@/api/standingBook/trouble";

  export default {
    name: "troubleDetail",
    components: {
    },
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      // 如果是跳转来的，则接受初始化参数
      this.troubleId = this.$route.query.troubleId;
    },
    mounted() {
      this.getDetail();
    },
    methods: {
      getDetail() {
        getTrouble(this.troubleId).then(response => {
          this.form = response.data;
          console.log(this.form, "this.form")
          const obj =this.form;
        });
      },
    }
  }
</script>
