<template>
  <div class="dlg-wrapper bb">
    <!-- 隐患信息 -->
    <!--<div class="top-title">{{ title }}</div>-->

    <el-tabs @tab-click="handleClick">
      <el-tab-pane
        :label="danger.title"
        v-for="(danger, arrIndex) in dangerList"
        :key="danger.title"
      >
        <div class="steps">
          <MySteps
            :stepsData="stepsArr"
            :active="stepsNumData[dangerDetailInfo.status] || 0"
          />
        </div>

        <el-row v-if="index == arrIndex">
          <div class="t">隐患信息</div>
          <el-row class="container flex bb">
            <el-col :span="16">
              <el-form label-width="140px" class="el-table">
                <el-col :span="12">
                  <el-form-item label="隐患标题">
                    <span>{{ dangerDetailInfo.title }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="隐患状态">
                    <span v-if="dangerDetailInfo.status == 0">待处理</span>
                    <span v-if="dangerDetailInfo.status == 1">拒绝整改</span>
                    <span v-if="dangerDetailInfo.status == 2">待复核</span>
                    <span v-if="dangerDetailInfo.status == 3">已处理</span>
                    <span v-if="dangerDetailInfo.status == 4">已归档</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="隐患来源">
                    <span>{{ typeFormatter(dangerDetailInfo) }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="场站名称" v-if="dangerDetailInfo.type == '5'">
                  <span v-if="dangerDetailInfo.receiveName">{{
                    dangerDetailInfo.receiveName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>

                  <el-form-item label="设备名称" v-else-if="dangerDetailInfo.type == '6'">
                  <span v-if="dangerDetailInfo.receiveName">{{
                    dangerDetailInfo.receiveName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>

                  <el-form-item label="用户" v-else>
                  <span v-if="dangerDetailInfo.receiveName">{{
                    dangerDetailInfo.receiveName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="隐患级别">
                    <span v-if="dangerDetailInfo.level == 1">重大</span>
                    <span v-if="dangerDetailInfo.level == 2">一般</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="上报时间">
                    {{
                      parseTime(
                        dangerDetailInfo.createTime,
                        "{y}-{m}-{d} {h}:{i}:{s}"
                      )
                    }}
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="隐患内容">
                    <span v-if="dangerDetailInfo.beforeContent">{{
                      dangerDetailInfo.beforeContent
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上报人">
                    {{ dangerDetailInfo.reportName }}
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="联系电话">
                    <span v-if="dangerDetailInfo.phone">{{
                      dangerDetailInfo.phone
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="隐患地址">
                    <span v-if="dangerDetailInfo.address">{{
                      dangerDetailInfo.address
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="责任归属">
                    <span v-if="dangerDetailInfo.flag == 1">安全管理部</span>
                    <span v-else-if="dangerDetailInfo.flag == 2">客服运营部</span>
                    <span v-else-if="dangerDetailInfo.flag == 3">生产运营部</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="整改前图片" prop="beforeImg">
                    <!-- <el-image
                        v-for="imageInfo in dangerDetailInfo.beforeImg.split(
                          ','
                        )"
                        :src="imageInfo"
                        :preview-src-list="[imageInfo]"
                        :z-index="9999"
                        style="width: 99px; height: 100px; margin-right: 10px"
                      /> -->
                    <div>
                      <MyImage
                        v-if="dangerDetailInfo.beforeImg"
                        :src="dangerDetailInfo.beforeImg.split(',')[0]"
                        :previewSrcList="dangerDetailInfo.beforeImg.split(',')"
                      />
                      <div class="error" v-else>暂无图片</div>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="整改前视频" prop="beforeVideo">
                    <span v-if="dangerDetailInfo.beforeVideo">
                      <video
                        v-for="videoInfo in dangerDetailInfo.beforeVideo.split(
                          ','
                        )"
                        :key="videoInfo"
                        type="video/mp4"
                        controls="controls"
                        :src="videoInfo"
                        class="upload-video"
                      />
                    </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="整改期限">
                    <span v-if="dangerDetailInfo.endTime">{{
                      dangerDetailInfo.endTime
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <!--<el-col :span="12">
                  <el-form-item label="归档人">
                  <span v-if="dangerDetailInfo.fileName">{{
                    dangerDetailInfo.fileName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="归档时间">
                  <span v-if="dangerDetailInfo.fileTime">{{
                    dangerDetailInfo.fileTime
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>-->

                <el-col :span="12" v-if="dangerDetailInfo.type == '8'">
                  <el-form-item label="治理的标准要求">
                    <span v-if="dangerDetailInfo.governanceStandards">
                      {{ dangerDetailInfo.governanceStandards}}
                    </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12" v-if="dangerDetailInfo.type == '8'">
                  <el-form-item label="治理方法和措施">
                    <span v-if="dangerDetailInfo.governanceMethod">
                      {{ dangerDetailInfo.governanceMethod}}
                    </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12" v-if="dangerDetailInfo.type == '8'">
                  <el-form-item label="经费和物资的落实">
                    <span v-if="dangerDetailInfo.fundsMaterials">
                      {{ dangerDetailInfo.fundsMaterials}}
                    </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12" v-if="dangerDetailInfo.type == '8'">
                  <el-form-item label="安全措施和应急预案">
                    <span v-if="dangerDetailInfo.safetyEmergencyPlan">
                      {{ dangerDetailInfo.safetyEmergencyPlan}}
                    </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="备注">
                    <span v-if="dangerDetailInfo.remarks">{{
                      dangerDetailInfo.remarks
                    }}</span>
                    <span>-</span>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-col>
            <el-col :span="8">
              <div id="dangerMap"></div>
              <div class="map-bottom">隐患上报位置</div>
            </el-col>
          </el-row>

          <div class="t">整改信息</div>
          <el-row class="container flex bb">
            <el-form label-width="110px" class="el-table">
              <el-col style="height: auto" :span="8">
                <el-col :span="24">
                  <el-form-item label="整改内容">
                    <span v-if="dangerDetailInfo.afterContent">{{
                      dangerDetailInfo.afterContent
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

               <!-- <el-col :span="24">
                  <el-form-item label="整改期限">
                    <span v-if="dangerDetailInfo.endTime">{{
                      dangerDetailInfo.endTime
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>-->

                <el-col :span="24">
                  <el-form-item label="整改时间">
                    <span v-if="dangerDetailInfo.reformTime">{{
                      dangerDetailInfo.reformTime
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="整改人">
                    <span v-if="dangerDetailInfo.reformName">{{
                      dangerDetailInfo.reformName
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <!-- <el-col :span="24">
                  <el-form-item label="隐患整改后图片">
                    <span v-if="dangerDetailInfo.afterImg">
                      <el-image
                        v-for="afterImageInfo in dangerDetailInfo.afterImg.split(
                          ','
                        )"
                        :src="afterImageInfo"
                        :preview-src-list="[afterImageInfo]"
                        :z-index="9999"
                        style="width: 99px; height: 100px; margin-right: 10px"
                      />
                    </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col> -->
              </el-col>

              <el-col :span="16">
                <el-form-item label="隐患整改后图片">
                  <div>
                    <MyImage
                      v-if="dangerDetailInfo.afterImg"
                      :src="dangerDetailInfo.afterImg.split(',')[0]"
                      :previewSrcList="dangerDetailInfo.afterImg.split(',')"
                    />
                    <div class="error" v-else>暂无图片</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>

          <div class="t">复核信息</div>
          <el-row class="container flex bb">
            <el-form label-width="110px" class="el-table">
              <el-col style="height: auto" :span="8">
                <el-col :span="24">
                  <el-form-item label="复核人">
                  <span v-if="dangerDetailInfo.checkName">{{
                    dangerDetailInfo.checkName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="复核时间">
                  <span v-if="dangerDetailInfo.checkTime">{{
                    dangerDetailInfo.checkTime
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="复核备注">
                  <span v-if="dangerDetailInfo.checkRemark">{{
                    dangerDetailInfo.checkRemark
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-col>

              <el-col :span="16">
                <el-col :span="24">
                  <el-form-item label="复核图片" prop="checkImg">
                    <div>
                      <MyImage
                        v-if="dangerDetailInfo.checkImg"
                        :src="dangerDetailInfo.checkImg.split(',')[0]"
                        :previewSrcList="dangerDetailInfo.checkImg.split(',')"
                      />
                      <div class="error" v-else>暂无图片</div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-col>

            </el-form>
          </el-row>

          <!--<el-row class="container flex bb">
            <el-form label-width="110px" class="el-table">
              <el-col :span="24">
                <el-col :span="4">
                  <el-form-item label="复核人">
                    <span v-if="dangerDetailInfo.checkName">{{
                      dangerDetailInfo.checkName
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="复核时间">
                    <span v-if="dangerDetailInfo.checkTime">{{
                      dangerDetailInfo.checkTime
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="14">
                  <el-form-item label="备注">
                    <span v-if="dangerDetailInfo.checkRemark">{{
                      dangerDetailInfo.checkRemark
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-form>
          </el-row>-->

          <div class="t">归档信息</div>
          <el-row class="container flex bb">
            <el-form label-width="110px" class="el-table">
              <el-col :span="24">
                <el-col :span="4">
                  <el-form-item label="归档人">
                  <span v-if="dangerDetailInfo.fileName">{{
                    dangerDetailInfo.fileName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归档时间">
                  <span v-if="dangerDetailInfo.fileTime">{{
                    dangerDetailInfo.fileTime
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <!--<el-col :span="14">
                  <el-form-item label="复核备注">
                    <span v-if="dangerDetailInfo.checkRemark">{{
                      dangerDetailInfo.checkRemark
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>-->
              </el-col>
            </el-form>
          </el-row>

        </el-row>

        <!-- <el-row v-if="index == arrIndex"> -->
        <!-- <el-col :span="24"> -->
        <!-- <el-form label-width="110px" class="dangerDetailInfo"> -->
        <!-- <div class="t">隐患信息</div> -->

        <!-- <el-row class="container bb">
                <el-col :span="12">
                  <el-form-item label="隐患标题">
                    <span>{{ dangerDetailInfo.title }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="隐患状态">
                    <span v-if="dangerDetailInfo.status == 0">待处理</span>
                    <span v-if="dangerDetailInfo.status == 1">拒绝整改</span>
                    <span v-if="dangerDetailInfo.status == 2">待复核</span>
                    <span v-if="dangerDetailInfo.status == 3">已处理</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-col :span="12">
                <el-form-item label="隐患来源">
                  <span>{{ typeFormatter(dangerDetailInfo) }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="用户">
                  <span v-if="dangerDetailInfo.receiveName">{{
                    dangerDetailInfo.receiveName
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="隐患级别">
                  <span v-if="dangerDetailInfo.level == 1">一级</span>
                  <span v-if="dangerDetailInfo.level == 2">二级</span>
                  <span v-if="dangerDetailInfo.level == 3">三级</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="隐患责任人">
                  <span v-if="dangerDetailInfo.flag == 1">用户自己</span>
                  <span v-else-if="dangerDetailInfo.flag == 2">公司客服部</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="上报人">
                  {{ dangerDetailInfo.reportName }}
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="上报时间">
                  {{
                    parseTime(
                      dangerDetailInfo.createTime,
                      "{y}-{m}-{d} {h}:{i}:{s}"
                    )
                  }}
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="隐患地址">
                  <span v-if="dangerDetailInfo.address">{{
                    dangerDetailInfo.address
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="隐患内容">
                  <span v-if="dangerDetailInfo.beforeContent">{{
                    dangerDetailInfo.beforeContent
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="隐患备注">
                  <span v-if="dangerDetailInfo.remarks">{{
                    dangerDetailInfo.remarks
                  }}</span>
                  <span>-</span>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="隐患整改前图片" prop="beforeImg">
                  <span v-if="dangerDetailInfo.beforeImg">
                    <el-image
                      v-for="imageInfo in dangerDetailInfo.beforeImg.split(',')"
                      :src="imageInfo"
                      :preview-src-list="[imageInfo]"
                      :z-index="9999"
                      style="width: 99px; height: 100px; margin-right: 10px"
                    />
                  </span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="隐患整改前视频" prop="beforeVideo">
                  <span v-if="dangerDetailInfo.beforeVideo">
                    <video
                      v-for="videoInfo in dangerDetailInfo.beforeVideo.split(
                        ','
                      )"
                      type="video/mp4"
                      controls="controls"
                      :src="videoInfo"
                      class="upload-video"
                    />
                  </span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col> -->

        <!-- 2222 -->
        <!-- <div class="t">整改信息</div> -->

        <!-- <el-col :span="12">
                  <el-form-item label="整改人">
                    <span v-if="dangerDetailInfo.reformName">{{
                      dangerDetailInfo.reformName
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="整改期限">
                    <span v-if="dangerDetailInfo.endTime">{{
                      dangerDetailInfo.endTime
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>



                <el-col :span="12">
                  <el-form-item label="整改时间">
                    <span v-if="dangerDetailInfo.reformTime">{{
                      dangerDetailInfo.reformTime
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>



                <el-col :span="24">
                  <el-form-item label="整改内容">
                    <span v-if="dangerDetailInfo.afterContent">{{
                      dangerDetailInfo.afterContent
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>



                <el-col :span="24">
                  <el-form-item label="隐患整改后图片">
                    <span v-if="dangerDetailInfo.afterImg">
                      <el-image
                        v-for="afterImageInfo in dangerDetailInfo.afterImg.split(
                          ','
                        )"
                        :src="afterImageInfo"
                        :preview-src-list="[afterImageInfo]"
                        :z-index="9999"
                        style="width: 99px; height: 100px; margin-right: 10px"
                      />
                    </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-row> -->

        <!-- <div style="font-size: 20px; margin: 7px 0px 7px 0px">
                复核信息
              </div>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="复核人">
                    <span v-if="dangerDetailInfo.checkName">{{
                      dangerDetailInfo.checkName
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="复核时间">
                    <span v-if="dangerDetailInfo.checkTime">{{
                      dangerDetailInfo.checkTime
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="复核备注">
                    <span v-if="dangerDetailInfo.checkRemark">{{
                      dangerDetailInfo.checkRemark
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <div style="font-size: 20px; margin: 7px 0px 7px 0px">
                变更信息
              </div>
              <el-table :data="dangerStatusChangeList">
                <el-table-column
                  label="时间"
                  align="center"
                  prop="optime"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="状态"
                  align="center"
                  prop="status"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">待处理</span>
                    <span v-if="scope.row.status == 1">拒绝整改</span>
                    <span v-if="scope.row.status == 2">待复核</span>
                    <span v-if="scope.row.status == 3">已处理</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作人"
                  align="center"
                  prop="operator"
                  :show-overflow-tooltip="true"
                />
              </el-table>
            </el-form>
          </el-col> -->

        <!-- <el-col :span="10">
            <div
              id="dangerMap"
              style="width: 100%; height: 500px; border: 1px solid"
            ></div>
          </el-col> -->
        <!-- </el-row> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listDanger, getDanger } from "@/api/checktask/danger";
import { taskDetailInfo } from "@/api/checktask/task";

import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters } from "vuex";
import { dangerStatusList } from "@/api/checktask/dangerStatus";
import MySteps from "@/components/MySteps";
import MyImage from "@/components/MyImage/index.vue";
export default {
  name: "danger-detail-info",
  components: {
    MySteps,
    MyImage,
  },
  data() {
    return {
      loading: false,
      total: 0,
      title: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 99999,
        taskId: null,
        inspectId: null,
        type: null,
      },
      stepsArr: [
        {
          title: "发现隐患",
          a: ["安检员", "-"],
          b: ["上报时间", "-"],
        },
        {
          title: "已整改待复核",
          a: ["整改人", "-"],
          b: ["整改时间", "-"],
        },
        {
          title: "已处理",
          a: ["复核人", "-"],
          b: ["复核时间", "-"],
        },
        {
          title: "已归档",
          a: ["归档人", "-"],
          b: ["归档时间", "-"],
        }
      ],
      stepsNumData: {
        0: 1,
        2: 2,
        3: 3,
        4: 4
      },
      dangerList: [],
      dangerDetailOpen: false,
      dangerDetailInfo: {},
      detailGaoMap: null,
      index: 0,
      dangerSource: [],
      dangerStatusChangeList: [],
    };
  },
  methods: {
    /** 查询安检隐患整改列表 */
    getList(response) {
      //this.loading = true;
      this.dangerList = response.rows;
      this.total = response.total;
      if (this.dangerList[0]) {
        this.handleDangerDetail(this.dangerList[0]);
      }
      this.getDangerSource();
      /*listDanger(this.queryParams).then((response) => {
        if(response.code != 200 || response.rows == null || response.rows.length == 0){
           this.$message.error("未查到隐患信息！");
           //this.$parent.$parent.$parent.dangerDetailOpen = false;
           //console.log("fdsfdsf========",this.$parent)
           return
        }
        this.dangerList = response.rows;
        this.total = response.total;
        if (this.dangerList[0]) {
          this.handleDangerDetail(this.dangerList[0]);
        }
        this.getDangerSource();
        this.loading = false;
      });*/
    },
    // 任务标题
    taskDetail() {
      taskDetailInfo({ taskId: this.$route.query.taskId }).then((res) => {
        if (res.code == 200) {
          this.title = res.data.title;
        }
      });
    },
    //隐患来源
    getDangerSource() {
      this.getDicts("t_danger_source").then((response) => {
        this.dangerSource = response.data;
      });
    },
    typeFormatter(row) {
      return this.selectDictLabel(this.dangerSource, row.type);
    },
    handleClick(tab) {
      this.index = eval(tab.index);
      this.handleDangerDetail(this.dangerList[eval(tab.index)]);
    },
    //隐患详情
    handleDangerDetail(row) {
      getDanger(row.id).then((response) => {
        this.dangerDetailInfo = response.data;
        // this.stepsArr[0].a =['安检员',this.dangerDetailInfo.reportName];
        // this.stepsArr[0].b =['上报时间',this.dangerDetailInfo.createTime];
        this.$set(this.stepsArr[0].a, 1, this.dangerDetailInfo.reportName);
        this.$set(this.stepsArr[0].b, 1, this.dangerDetailInfo.createTime);
        this.$set(this.stepsArr[1].a, 1, this.dangerDetailInfo.reformName);
        this.$set(this.stepsArr[1].b, 1, this.dangerDetailInfo.reformTime);
        this.$set(this.stepsArr[2].a, 1, this.dangerDetailInfo.checkName);
        this.$set(this.stepsArr[2].b, 1, this.dangerDetailInfo.checkTime);
        this.$set(this.stepsArr[3].a, 1, this.dangerDetailInfo.fileName);
        this.$set(this.stepsArr[3].b, 1, this.dangerDetailInfo.fileTime);
        //this.dangerDetailOpen = true;
        this.initMap();
        // 标题
        //this.taskDetail();
        this.statusChangeInfo(row.id);
      });
    },
    //地图初始化
    initMap() {
      this.$nextTick(() => {
        const path = eval(this.systemSetting.map_center);
        this.detailGaoMap = new EditorMap(
          "dangerMap",
          {
            center: path,
            zoom: 12,
          },
          this
        );
        if (this.dangerDetailInfo.longitude) {
          this.addLocation({
            longitude: this.dangerDetailInfo.longitude,
            latitude: this.dangerDetailInfo.latitude,
            nickName: this.dangerDetailInfo.title,
            iconType: "dangerDetail",
          });
        }
      });
    },
    //位置上图
    addLocation(data) {
      this.detailGaoMap.allDevice["dangerDetail"]?.forEach((item) => {
        this.detailGaoMap.map.remove(item);
      });
      this.detailGaoMap.control = 2;
      this.detailGaoMap.addDevice(data, null);
      this.detailGaoMap.map.panTo([data.longitude, data.latitude]);
    },
    statusChangeInfo(dangerId) {
      dangerStatusList({ dangerId: dangerId }).then((res) => {
        if (res.code == 200 && res.data) {
          this.dangerStatusChangeList = res.data;
        }
      });
    },
  },
  computed: {
    ...mapGetters(["systemSetting"]),
  },
};
</script>

<style scoped lang="scss">
.dlg-wrapper {
  height: 700px;
  overflow: auto;
  padding-right: 10px;
}
.steps {
  padding: 15px 0;
}
.top-title {
  text-align: center;
  font-size: 20px;
}
.dangerDetailInfo {
  height: 500px;
  overflow-y: auto;
  padding-right: 10px;
  &::-webkit-scrollbar {
    width: 3px;
    background: #dfe4ed;
    position: absolute;
    top: 0;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    // border-radius: 10px;
    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #cccccc;
    border-radius: 5px;
  }
}

.upload-video {
  object-fit: fill;
  height: 180px;
  width: 197px;
  margin-right: 10px;
}
.container {
  background: #f9f9f9;
  margin-bottom: 32px;
  padding: 10px 10px;
  .el-form-item {
    margin-bottom: 12px;
  }
}
.t {
  font-size: 14px;
  margin: 7px 0px 7px 0px;
}

#dangerMap {
  width: 340px;
  height: 305px;
  margin-bottom: 5px;
}
.map-bottom {
  // width: 100%;
  width: 340px;

  text-align: center;
  font-size: 14px;
  color: #606266;
}
.error {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 139px;
  // background: #f5f7fa;
  background: #ffffff;
}
.el-table {
  width: 100%;
  background-color: #f9f9f9;
}
</style>
