<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :before-close="handleClose"
    width="90%"
    append-to-body
  >
    <div v-if="showInfo">
      <div
        class="flex-row"
        v-if="newInfo && originalInfo.value != newInfo.value"
      >
        <div class="data-wrap">
          <el-card>
            <div class="home_box_title">修正原数据</div>

            <el-descriptions :column="1" border>
              <el-descriptions-item>
                <template slot="label"> 值 </template>
                {{ originalInfo.value }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>
        <div class="data-wrap">
          <el-card>
            <div class="home_box_title">修正后数据</div>

            <el-descriptions :column="1" border>
              <el-descriptions-item>
                <template slot="label"> 值 </template>
                <span style="color: red">{{ newInfo.value }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>
      </div>

      <div style="padding: 10px">
        <el-card>
          <div class="home_box_title">详情数据</div>
          <el-descriptions :column="3" border>
            <el-descriptions-item>
              <template slot="label"> 巡视设备 </template>
              {{ showInfo.patroldeviceName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 巡视编号 </template>
              {{ showInfo.patroldeviceCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 巡视任务执行ID </template>
              {{ showInfo.taskPatrolledId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 任务名称 </template>
              {{ showInfo.taskName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 任务编码 </template>
              {{ showInfo.taskCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 识别类型 </template>
              <dict-tag
                :options="dict.type.patrol_result_recognition_type"
                :value="showInfo.recognitionType"
              />
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label"> 数据来源 </template>
              {{ getDataTypeStr(showInfo.dataType) }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label"> 设备点位名称 </template>
              {{ showInfo.deviceName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 设备点位ID </template>
              {{ showInfo.deviceId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 时间 </template>
              {{ showInfo.time }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label"> 值类型 </template>
              <dict-tag
                :options="dict.type.patrol_result_value_type"
                :value="showInfo.valueType"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 值 </template>
              {{ showInfo.value }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 值带单位 </template>
              {{ showInfo.valueUnit }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 单位 </template>
              {{ showInfo.unit }}
            </el-descriptions-item>
            <!-- <el-descriptions-item>
              <template slot="label"> 阈值 </template>
              {{ showInfo.threshold }}
            </el-descriptions-item> -->
            <el-descriptions-item>
              <template slot="label"> 结论 </template>
              <dict-tag
                :options="dict.type.patrol_result_valid_type"
                :value="showInfo.valid"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 归档状态 </template>
              {{ originalInfo.patrolStatus == 1 ? "已归档" : "未归档" }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 审核人 </template>
              {{ originalInfo.checkPerson }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 审核时间 </template>
              {{ originalInfo.checkTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 巡视结论 </template>
              {{ originalInfo.checkResult }}
            </el-descriptions-item>
          </el-descriptions>

          <div class="file-info-wrap">
            <div class="home_box_title">阈值</div>
            <el-table :data="thresholdList">
              <el-table-column label="序号" type="index" />
              <el-table-column label="算法类型" align="center" prop="code">
                <template slot-scope="scope">
                  <span>{{ getAlgorithmName(scope.row.code) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="最小值" align="center" prop="lowerValue">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.lowerValue ? scope.row.lowerValue : "-"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="最大值" align="center" prop="upperValue">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.upperValue ? scope.row.upperValue : "-"
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="file-info-wrap" v-if="showInfo.photo.length > 0">
            <div class="home_box_title">识别图片</div>
            <el-row>
              <el-col
                :span="12"
                style="padding: 5px"
                v-for="(item, index) in showInfo.photo"
                :key="index"
              >
                <div
                  class="img-item-bg"
                  @click="previewImages(index, showInfo.photo)"
                >
                  <!-- 图片 -->
                  <AsyncImage
                    style="width: 100%; height: 100%"
                    fit="contain"
                    :src="item"
                  ></AsyncImage>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="file-info-wrap" v-if="showInfo.infraRed.length > 0">
            <div class="home_box_title">红外图谱</div>
            <el-row>
              <el-col
                :span="12"
                style="padding: 5px"
                v-for="(item, index) in showInfo.infraRed"
                :key="index"
              >
                <div
                  class="img-item-bg"
                  @click="previewImages(index, showInfo.infraRed)"
                >
                  <!-- 图片 -->
                  <AsyncImage
                    style="width: 100%; height: 100%"
                    fit="contain"
                    :src="item"
                  ></AsyncImage>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="file-info-wrap" v-if="showInfo.visible.length > 0">
            <div class="home_box_title">可见光照片</div>
            <el-row>
              <el-col
                :span="12"
                style="padding: 5px"
                v-for="(item, index) in showInfo.visible"
                :key="index"
              >
                <div
                  class="img-item-bg"
                  @click="previewImages(index, showInfo.visible)"
                >
                  <!-- 图片 -->
                  <AsyncImage
                    style="width: 100%; height: 100%"
                    fit="contain"
                    :src="item"
                  ></AsyncImage>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="file-info-wrap" v-if="showInfo.audio.length > 0">
            <div class="home_box_title">音频</div>
            <el-row>
              <el-col
                :span="12"
                style="padding: 5px"
                v-for="(item, index) in showInfo.audio"
                :key="index"
              >
                <div>
                  <audio controls :src="item"></audio>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="file-info-wrap" v-if="showInfo.video.length > 0">
            <div class="home_box_title">视频</div>
            <el-row>
              <el-col
                :span="12"
                style="padding: 5px"
                v-for="(item, index) in showInfo.video"
                :key="index"
              >
                <div class="img-item-bg">
                  <!-- 视频 -->
                  <AsyncVideo :src="item" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>

    <image-preview-dialog
      :visible.sync="showPreviewImages"
      :selectImgPosition="previewImagePos"
      :imageUrls="showImgesUrls"
    />
  </el-dialog>
</template>

<script>
import ImagePreviewDialog from "../../components/ImagePreviewDialog/index.vue";
import AsyncVideo from "../../components/AsyncVideo/index.vue";
import { getAllAlgorithmList } from "@/api/inspectionDataManage/alarmConfirm.js";
// 巡视归档对比对话框
export default {
  name: "InspectionArchiveContrastDialog",
  components: { ImagePreviewDialog, AsyncVideo },
  dicts: [
    "patrol_result_value_type",
    "patrol_result_recognition_type",
    "patrol_result_valid_type",
  ],
  props: {
    // 标题
    title: {
      type: String,
      default: "巡视结果详情",
    },
    // 是否显示弹窗
    visible: {
      type: Boolean,
      default: false,
    },
    // 详情
    newInfo: {
      type: Object,
      require: true,
      default: () => {
        return {};
      },
    },
    originalInfo: {
      type: Object,
      require: true,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      showPreviewImages: false,
      previewImagePos: 0,
      showImgesUrls: [],
      algorithmList: [],
    };
  },
  computed: {
    // 显示的信息
    showInfo() {
      return this.newInfo ? this.newInfo : this.originalInfo;
    },

    thresholdList() {
      if (!this.showInfo.threshold) {
        return [];
      }
      return JSON.parse(this.showInfo.threshold);
    },
  },
  created() {
    this.getAlgorithmList();
  },
  methods: {
    getAlgorithmList() {
      getAllAlgorithmList().then((res) => {
        this.algorithmList = res.rows;
      });
    },
    // 获取算法名称
    getAlgorithmName(code) {
      if (!this.algorithmList) {
        return "";
      }
      const name = this.algorithmList.find(
        (item) => item.algSubtypeCode == code
      );
      return name ? name.algSubtypeName : "";
    },
    handleClose(done) {
      this.$emit("update:visible", false);
    },
    // 数据来源
    getDataTypeStr(dataType) {
      switch (dataType) {
        case 1:
          return "摄像机";
        case 2:
          return "机器人";
        case 3:
          return "无人机";
        case 4:
          return "声纹";
        case 5:
          return "在线监测";
      }
    },
    previewImages(index, imgUrls) {
      this.previewImagePos = index;
      this.showImgesUrls = imgUrls;
      this.showPreviewImages = true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: #001946;
  color: #fff;

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .el-dialog__title {
    color: #fff;
  }
}

::v-deep .el-dialog__body {
  background-color: #001946;
  padding: 0px 20px 20px;
}

.flex-row {
  display: flex;
}

.data-wrap {
  flex: 1;
  height: 100;
  padding: 10px;
}

.home_box_title {
  padding-bottom: 10px;
  flex: 31px;
  font-size: 20px;

  &::before {
    content: "";
    width: 3px;
    background: #1890ff;
    height: 18px;
    display: block;
    margin-right: 5px;
    float: left;
    margin-top: 3px;
  }
}

.file-info-wrap {
  padding: 10px;
}

.img-item-bg {
  background-color: #000;
  width: 100%;
  height: 100%;
}
</style>
