<template>
  <el-dialog
    title="隐患记录"
    :visible.sync="dangerDetailOpen"
    width="1400px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <div class="dlg-wrapper">
      <div class="steps">
        <MySteps
          :stepsData="stepsArr"
          :active="stepsNumData[dangerDetailInfo.status] || 0"
        />
      </div>

      <el-row>
        <div class="t">隐患信息</div>
        <el-row class="container flex bb">
          <el-col :span="16">
            <el-form label-width="110px" 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>{{ $parent.typeFormatter(dangerDetailInfo) }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="隐患类型">
                  <span v-if="dangerDetailInfo.category == 1">隐患</span>
                  <span v-if="dangerDetailInfo.category == 2">故障</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>
                </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">
                  <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.isVisitor == '0'">不可访问</span>
                  <span v-else-if="dangerDetailInfo.isVisitor == '1'">可访问</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="备注">
                  <span v-if="dangerDetailInfo.remark">{{
                    dangerDetailInfo.remark
                  }}</span>
                  <span v-else>-</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.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.reformTime">{{
                    dangerDetailInfo.reformTime
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
            </el-col>

            <el-col :span="16">
              <el-col :span="24">
                <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-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>

        <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>
          </el-form>
        </el-row>

      </el-row>
    </div>

  </el-dialog>
</template>

<script>
import { getDanger } from "@/api/checktask/danger";
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",
  components: {
    MySteps,
    MyImage,
  },
  data() {
    return {
      dangerDetailOpen: false,
      dangerDetailInfo: {
        beforeImg: "",
        beforeVideo: "",
        afterImg: "",
      },
      stepsArr: [
        {
          title: "发现隐患",
          a: ["安检员", "-"],
          b: ["上报时间", "-"],
        },
        {
          title: "已整改待复核",
          a: ["整改人", "-"],
          b: ["整改时间", "-"],
        },
        {
          title: "已处理",
          a: ["复核人", "-"],
          b: ["复核时间", "-"],
        },
        {
          title: "已归档",
          a: ["归档人", "-"],
          b: ["归档时间", "-"],
        }
      ],
      stepsNumData: {
        0: 1,
        2: 2,
        3: 3,
        4: 4
      },
      dangerStatusChangeList: [],
    };
  },
  methods: {
    //隐患详情
    handleDangerDetail(dangerId) {
      getDanger(dangerId).then((response) => {
        this.dangerDetailInfo = response.data;
        this.dangerDetailOpen = true;
        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.initMap();
        this.statusChangeInfo(dangerId);
      });
    },
    //地图初始化
    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">
.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: 208px;
  margin-right: 10px;
}

.dlg-wrapper {
  height: 700px;
  overflow: auto;
  padding-right: 10px;
}
.steps {
  padding: 15px 0;
}
.top-title {
  text-align: center;
  font-size: 20px;
}
.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: 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>
