<template>
  <div class="">
    <!-- <div class="mapMs" @click="onClick7Day">近7日轨迹</div> -->
    <!-- 人员 -->
    <div class="trailList" v-if="listData.length > 0 && sfzh">
      <div class="total_sl_box">
        累计预警 <span class="total_sl">{{ total }}</span
        >次
      </div>
      <div
        class="item ry_item"
        v-for="(item, index) in listData"
        :key="index"
        :class="{
          red: item.yj_jb == 10,
          orange: item.yj_jb == 20,
          yellow: item.yj_jb == 30,
          blue: item.yj_jb == 40,
        }"
      >
        <div class="warning_time">
          <img class="timeicon" src="../assets/images/time@2x.png" />
          <span>{{ item.yj_sj }}</span>
        </div>
        <div class="detail_info">
          <div class="ryImg_box">
            <!-- 预警图片 -->
            <van-image
              width="100px"
              height="90px"
              :class="_getBase64(item)"
              @click.stop="ImagePreview([item.yj_xtp])"
              :src="item.yj_xtp"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <!-- 预警库图片 -->
            <van-image
              width="100px"
              height="90px"
              :class="_getBase64(item)"
              @click.stop="ImagePreview([item.cover_image])"
              :src="item.cover_image"
              style="margin-left: 3vw"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
          <div class="waring_detail">
            <div>
              <span style="font-size: 4vw">{{ item.yj_ryxm }}</span>
              <span style="margin-left: 2vw">{{ item.yj_rysfzh }}</span>
              <span style="color: #ffa500; margin-left: 10px"
                >相似{{ item.yj_xsd * 100 }}%</span
              >
            </div>
            <div
              class="yjlx_type"
              :class="{
                bqred: item.yj_jb == 10,
                bqorange: item.yj_jb == 20,
                bqyellow: item.yj_jb == 30,
                bqblue: item.yj_jb == 40,
              }"
            >
              {{ item.yjly_bqmc }}
            </div>
            <!-- <div class="">{{ item.yj_gzymc }}</div> -->
            <div class="">{{ item.yj_nr }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 车辆 -->
    <div class="trailList" v-if="listData.length > 0 && hphm">
      <div class="total_sl_box">
        累计预警 <span class="total_sl">{{ total }}</span
        >次
      </div>
      <div
        class="item"
        v-for="(item, index) in listData"
        :key="index"
        :class="{ blue: true }"
      >
        <div class="warning_time">
          <img class="timeicon" src="../assets/images/time@2x.png" />
          <span>{{ item.yj_sj }}</span>
        </div>
        <div class="detail_info detail_car">
          <van-image
            width="220px"
            height="80px"
            fit="contain"
            :class="_getBase64(item)"
            @click.stop="ImagePreview([item.yj_xtp])"
            :src="item.yj_xtp"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div class="waring_detail">
            <div class="bp_box">
              <span style="font-size: 4vw">{{ item.yj_clcph }}</span>
              <span class="clbq bqblue">{{ item.yjly_bqmc }}</span>
            </div>

            <div class="">{{ item.yj_gzymc }}</div>
            <div class="">{{ item.yj_nr }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  dateFormat,
  timeValidate,
  getRecentDay,
  getnRencebtMonth,
  getBase64,
} from "../utils/tools.js";
import { notUrlGetData } from "../api/notUrlRequest.js";
import { hintToast } from "../utils/tools.js";
import emitter from "../utils/eventBus.js";
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      listData: [],
      loading: true,
      ryhdDay: "", //人员时间类型
      showEmpty: false,
      sfzh: "", //身份证
      hphm: "", //车牌号
      clTime: "", //车辆时间类型
      options: null,
      total: 0, //统计预警
      ssbmdm: "", //所属部门代码
      scry: "", //三车人员
      baseUrl: this.baseUrl2,
      urls1: [], //图片放大
      params: "",
      showMap: false,
    };
  },
  created() {
    let item = JSON.parse(this.$route.query.item);
    this.options = item;
    this.ryhdDay = item.time;
    this.sfzh = item.yj_rysfzh;
    this.hphm = item.yj_clcph;
    this.clTime = item.clTime;
    this.ssbmdm = item.ssbmdm;
    this.scry = item.type;
    this.showMap = true;
    if (this.scry == "scry") {
      this._getScryyjData();
    } else if (this.sfzh) {
      this._getRyyjData();
    } else {
      this._getCltjData();
    }
  },
  methods: {
    //跳转七日轨迹
    // onClick7Day() {
    //   if (this.options.sfzh) {
    //     let { sfzh } = this.options;
    //     uni.navigateTo({
    //       url: `../ryyjTop5AndMap/ryyjTop5AndMap?sfzh=${sfzh}&is7Day=近7日预警轨迹&time=近7日${
    //         this.ssbmdm ? "&ssbmdm=" + this.ssbmdm : ""
    //       }`,
    //     });
    //   } else {
    //     let { hphm } = this.options;
    //     uni.navigateTo({
    //       url: `../ryyjTop5AndMap/ryyjTop5AndMap?hphm=${hphm}&is7Day=近7日预警轨迹&clTime=近7日${
    //         this.ssbmdm ? "&ssbmdm=" + this.ssbmdm : ""
    //       }`,
    //     });
    //   }
    // },
    //获取base64地址
    _getBase64(item) {
      getBase64((res) => {
        item.baseUrl = res;
      }, item.cover_image || item.yj_xtp);
    },
    //车辆预警
    _getCltjData() {
      this.loading = true;
      this.listData = [];
      let points = [];
      if (this.hphm == "未知") {
        hintToast("车牌号异常!!!");
        return;
      }
      let data = {
        hphm: this.hphm,
      };
      let url = "";
      switch (this.clTime) {
        case "今日":
          data.kssj = timeValidate(new Date(), "ymd") + " 00:00:00";
          data.jssj = timeValidate(new Date(), "ymd") + " 23:59:59";
          url = "/yjxx/yjcl/queryBycCphmlb";
          break;
        case "近7日":
          data.kssj = getRecentDay(-7);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjcl/queryBycCphmlb";
          break;
        case "近7周":
          data.kssj = getRecentDay(-49);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjcl/zqueryBycCphmlb";
          break;
        default:
          data.ksny = getnRencebtMonth(6);
          data.jsny = getnRencebtMonth(0);
          url = "/yjxx/yjcl/yqueryBycCphmlb";
          break;
      }
      notUrlGetData(`/mosty-yjzl${url}`, data).then((res) => {
        this.loading = false;
        if (res) {
          for (let i = 0; i < res.length; i++) {
            if (res[i].jd && res[i].wd) {
              points.push({
                jd: res[i].jd,
                wd: res[i].wd,
              });
            }
          }

          this.listData = [res[0]];
          emitter.emit("addPointArea", {
            coords: points,
            icon: require("../assets/pointIcon/icon-jq.png"),
            flag: "cl_yj",
          });
          this.total = points.length;
        }
      });
    },
    //查询人员预警总数
    _getRyyjData() {
      this.loading = true;
      this.ryyjList = [];
      let points = [];
      let data = {
        sfzh: this.sfzh,
        ssbmdm: this.ssbmdm,
      };
      let url = "";
      switch (this.ryhdDay) {
        case "今日":
          data.kssj = timeValidate(new Date(), "ymd") + " 00:00:00";
          data.jssj = timeValidate(new Date(), "ymd") + " 23:59:59";
          url = "/yjxx/yjry/queryBySfzhlb";
          break;
        case "近7日":
          data.kssj = getRecentDay(-7);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjry/queryBySfzhlb";
          break;
        case "近7周":
          data.kssj = getRecentDay(-49);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjry/zqueryBySfzhlb";
          break;
        default:
          data.ksny = getnRencebtMonth(6);
          data.jsny = getnRencebtMonth(0);
          url = "/yjxx/yjry/yqueryBySfzhlb";
          break;
      }
      notUrlGetData(`/mosty-yjzl${url}`, data).then((res) => {
        this.loading = false;
        if (res.length > 0) {
          for (let i = 0; i < res.length; i++) {
            if (res[i].jd && res[i].wd) {
              points.push({
                jd: res[i].jd,
                wd: res[i].wd,
              });
            }
          }
          this.listData = [res[0]];
          emitter.emit("addPointArea", {
            coords: points,
            icon: require("../assets/pointIcon/icon-jq.png"),
            flag: "ry_yj",
          });
          this.total = points.length;
        }
      });
    },
    //查询三车人员预警总数
    _getScryyjData() {
      this.loading = true;
      this.ryyjList = [];
      let points = [];
      let data = {
        sfzh: this.sfzh,
        ssbmdm: this.ssbmdm ? this.ssbmdm : "",
      };
      let url = "";
      switch (this.ryhdDay) {
        case "今日":
          data.kssj = timeValidate(new Date(), "ymd") + " 00:00:00";
          data.jssj = timeValidate(new Date(), "ymd") + " 23:59:59";
          url = "/yjxx/yjry/queryBySfzhlbsc";
          break;
        case "近7日":
          data.kssj = getRecentDay(-7);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjry/queryBySfzhlbsc";
          break;
        case "近7周":
          data.kssj = getRecentDay(-49);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjry/zqueryBySfzhlbsc";
          break;
        default:
          data.ksny = getnRencebtMonth(6);
          data.jsny = getnRencebtMonth(0);
          url = "/yjxx/yjry/yqueryBySfzhlbsc";
          break;
      }
      notUrlGetData(`/mosty-yjzl${url}`, data).then((res) => {
        this.loading = false;
        if (res.data) {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].imgUrl = res.data[i].cover_image;
            res.data[i].imgUrlLeng = JSON.parse(res.data[i].yj_xtp).url;
            if (res.data[i].jd && res.data[i].wd) {
              points.push({
                jd: res.data[i].jd,
                wd: res.data[i].wd,
              });
            }
          }
          points.splice(145);
          this.total = points.length;
          res.data[0].imgUrl = res.data[0].imgUrl.replace(
            "http://80.35.1.70:30080",
            this.baseUrl
          );
          res.data[0].imgUrlLeng = res.data[0].imgUrlLeng.replace(
            "http://80.35.1.147:10222",
            this.baseUrl
          );
          this.listData = [res.data[0]];
          this.params = `?data=${encodeURIComponent(JSON.stringify(points))}`;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "../assets/styles/mixin.scss";
::v-deep .u-popup__content {
  background: #09224d;
}

.total_sl_box {
  font-size: 3vw;
  position: absolute;
  right: 5vw;
  top: 3vw;
}

.total_sl {
  display: inline-block;
  margin: 0 2vw;
  color: #fc011a;
  font-size: 5vw;
}

.trailList {
  position: relative;
  @include font_color($font-color-theme);
  @include bg_color($background-color-theme);
  @include font_size($font_medium_s);
  border-top-left-radius: 1vw;
  border-top-right-radius: 1vw;
  .item {
    padding: 3vw;

    .warning_time {
      display: flex;
      align-items: center;

      img.timeicon {
        width: 2.93334vw;
        height: 2.93334vw;
        margin-right: 1vw;
        vertical-align: middle;
      }

      span {
        vertical-align: middle;
      }

      // display: flex;
      // justify-content: space-between;
      // align-items: center;

      .warning_type {
        background-color: #4cbaff;
        padding: 0.5vw 2vw;
        font-size: 12px;
        border-radius: 0.8vw;
      }
    }

    .detail_info {
      // display: flex;
      margin-top: 2vw;

      .ryImg_box {
        display: flex;
      }

      .carImg {
        width: 100%;
        height: 180px;
      }

      .waring_detail {
        margin-left: 2vw;

        .bp_box {
          display: flex;
          align-items: center;

          .clbq {
            font-size: 12px;
            margin-left: 10px;
            padding: 1px 5px;
            background: rgba(19, 125, 255, 0.4);
            color: #fff;
            border-radius: 5px;
          }
        }

        & > div {
          margin: 1.2vw 0;
        }

        .name {
          font-size: 4.26667vw;
        }
      }
    }
  }
}

.red {
  box-shadow: inset 0px 0px 2.66667vw 0px #ed0000 !important;
}

.orange {
  box-shadow: inset 0px 0px 2.66667vw 0px #ffa500 !important;
}

.yellow {
  box-shadow: inset 0px 0px 2.66667vw 0px #ffcc40 !important;
}

.blue {
  box-shadow: inset 0px 0px 2.66667vw 0px #63acff !important;
}

.green {
  box-shadow: inset 0px 0px 15px 0px #1cd66c !important;
}
.detail_car {
  display: flex;
}
.yjlx_type {
  display: inline;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 5px;
  color: #fff;
}
.bqred {
  background: #ed0000;
}
.bqorange {
  background: #ffa500;
}
.bqyellow {
  background: #ffcc40;
}
.bqblue {
  background: #63acff;
}
</style>
