<template>
    <el-dialog title="详情" :visible.sync="detailOpen" width="1200px"  append-to-body destroy-on-close :close-on-click-modal="false">
      <el-row>
        <el-col :span="14">
            <el-form label-width="120px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="隐患名称:" >
                          <span v-if="detailInfo.hiddenTitle">{{ detailInfo.hiddenTitle }}</span>
                          <span v-else>-</span>
                        </el-form-item>

                        <el-form-item label="隐患发现人员:">
                          <span v-if="detailInfo.hiddenFindPeople">{{ detailInfo.hiddenFindPeople }}</span>
                          <span v-else>-</span>
                        </el-form-item>

                        <el-form-item label="发现时间:" >
                          <span v-if="detailInfo.hiddenFindDate">{{ detailInfo.hiddenFindDate }}</span>
                          <span v-else>-</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="13">

                      <el-form-item label="隐患等级:" >
                        <span v-if="detailInfo.hiddenType == '1'">一级隐患</span>
                        <span v-else-if="detailInfo.hiddenType == '2'">二级隐患</span>
                        <span v-else-if="detailInfo.hiddenType == '3'">三级隐患</span>
                        <span v-else>-</span>
                      </el-form-item>

                      <el-form-item label="隐患位置:" >
                        <span v-if="detailInfo.hiddenLocation">{{ detailInfo.hiddenLocation }}</span>
                        <span v-else>-</span>
                      </el-form-item>

                      <el-form-item label="整治情况:" >
                        <span v-if="detailInfo.remediation == '1'">已完成</span>
                        <span v-else-if="detailInfo.remediation == '2'">未完成</span>
                        <span v-else>-</span>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                  <!--<el-col :span="10">-->
                    <!--<el-form-item label="处理方案:" >-->
                    <!--<span class="dbtn" @click="checkFile(detailInfo.dealPlanUrl)" v-if="detailInfo.dealPlan != ''">-->
                      <!--<i class="el-icon el-icon-view"></i>查看/下载-->
                    <!--</span>-->
                    <!--<span v-else><el-input disabled/></span>-->
                    <!--</el-form-item>-->
                  <!--</el-col>-->

                  <el-col :span="10">
                      <el-form-item label="隐患来源:" >
                        <span v-if="detailInfo.hiddenLocation">{{ detailInfo.hiddenLocation }}</span>
                        <span v-else>-</span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="隐患类型:" >
                      <span v-if="detailInfo.hiddenTroubleType == 1">漏气</span>
                      <span v-else-if="detailInfo.hiddenTroubleType == 2">腐蚀</span>
                      <span v-else-if="detailInfo.hiddenTroubleType == 3">裂缝</span>
                      <span v-else-if="detailInfo.hiddenTroubleType == 4">设备故障</span>
                      <span v-else-if="detailInfo.hiddenTroubleType == 5">安全距离不足</span>
                      <span v-else-if="detailInfo.hiddenTroubleType == 6">管道承重</span>
                      <span v-else-if="detailInfo.hiddenTroubleType == 7">其他</span>
                      <span v-else>-</span>
                    </el-form-item>
                  </el-col>

                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="所属单位:" >
                    <span v-if="detailInfo.enterpriseName">{{ detailInfo.enterpriseName }}</span>
                    <span v-else>-</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="隐患内容:" >
                    <span v-if="detailInfo.hiddenContent">{{ detailInfo.hiddenContent }}</span>
                    <span v-else>-</span>
                    </el-form-item>
                  </el-col>
                </el-row>

              <el-row>
                <el-col :span="23">
                  <el-form-item label="处置结果:" >
                    <span v-if="detailInfo.dealPlan">{{ detailInfo.dealPlan }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="备注信息:" >
                    <span v-if="detailInfo.remarks">{{ detailInfo.remarks }}</span>
                    <span v-else>-</span>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
        </el-col>

        <el-col :span="9">
          <div style="width: 100%;height: 390px; border: 1px solid rgb(218, 213, 213);margin-bottom: 10px;">
            <div style="width: 100%;height: 100%" id="hiddenContainer"></div>
          </div>
        </el-col>

      </el-row>
    </el-dialog>
  </template>

  <script>
    import { EditorMap } from "@/utils/mapClass/getPath.js";
    import { getHidden } from "@/api/standingBook/hidden";
    import { enterpriseLists } from "@/api/regulation/info";

    export default {
      name: "detail-info",
      data(){
          return{
            detailInfo: {},
            enterpriseName:"",
            detailOpen: false,
            devicePos: [],
            map: null,
            reasonOptions:[],
          }
      },
    created() {
    this.getDicts("t_trouble_reason").then(response => {
      this.reasonOptions = response.data;
    });

    },
      methods:{

        checkFile(url) {
        window.open(url,'_blank');
        },

        //所属单位
        getEnterpriseLists(){
        const param = {};
        // this.judgeOperateType(param);
        enterpriseLists(param).then(response => {
            this.enterprises = response.rows;
            // 如果是企业，则直接把查询条件的的所在单位赋值
            if (this.$store.state.user.roleId == 5) {
            this.queryParams.beyondEnterpriseId = this.enterprises[0].enterpriseId
            }
        });
        },
        getDetailInfo(id){
            getHidden(id).then(response => {
                this.detailInfo = response.data;
                this.getEnterpriseLists();
                this.devicePos = [this.detailInfo.longitude, this.detailInfo.latitude];
                this.detailOpen = true;

                this.$nextTick(() => {
                this.map = new EditorMap("hiddenContainer", {}, this);
                this.map.addDevice({ path: this.devicePos });
                this.map.nowMouseTarget = null;
                this.map.mousetoolClose(false);
                });
            });
        }
      }
    }
  </script>

  <style scoped>

  </style>
