<template>
  <div class="compare">
    <div class="title-box">
      <div class="title">
        {{ jqTitle }}
        <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="isShowJqType = true" />
        <van-action-sheet v-model:show="isShowJqType">
          <van-picker :columns="jqTypeList" @confirm="groupChange" @cancel="isShowJqType = false" />
        </van-action-sheet>
      </div>
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">高发时段分析</div>
        <div class="zst-title-right">
          {{ gfsdTime }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('gfsd')" />
          <van-action-sheet v-model:show="isShowDataCount1">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount1 = false" />
          </van-action-sheet>
        </div>
      </div>
      <div class="tag_box">
        <van-tag v-for="(item, index) in tags" @click="changeTime(item)" :key="index" plain
          :color="isTimeActive == item ? '#3c9cff' : ''" style="margin-right: 1vw">{{ item }}
        </van-tag>
      </div>
      <Bar :datas="pcsfaList" />
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">高发区域TOP5</div>
        <div class="zst-title-right">
          {{ gfqyTime }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('gfqy')" />
          <van-action-sheet v-model:show="isShowDataCount2">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount2 = false" />
          </van-action-sheet>
        </div>
      </div>
      <div class="fjChart">
        <TopArea :list="gfqyLIst" v-if="gfqyLIst.length > 0" />
        <div v-else style="height: 10vh; text-align: center; line-height: 10vh">
          没有数据
        </div>
      </div>
      <!-- <div class="but_box" v-if="gfqyLIst.length > 0">
        <span>发送指令</span>
        <span>以地图展示</span>
      </div> -->
    </div>

    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">高发类型TOP5</div>
        <div class="zst-title-right">
          {{ gflxTime }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('gflx')" />
          <van-action-sheet v-model:show="isShowDataCount3">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount3 = false" />
          </van-action-sheet>
        </div>
      </div>
      <div class="fjChart">
        <TopArea :list="gflxList" v-if="gflxList.length > 0" />
        <div v-else style="height: 10vh; text-align: center; line-height: 10vh">
          没有数据
        </div>
      </div>
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">高发对象-作案人员(模拟)</div>
        <div class="zst-title-right">
          今日
          <img src="../../../assets/images/xiala.png" width class="img" alt="" />
        </div>
      </div>
      <div class="fjChart">
        <CasePerson></CasePerson>
      </div>
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">高发对象-受害人(模拟)</div>
        <div class="zst-title-right">
          今日
          <img src="../../../assets/images/xiala.png" width class="img" alt="" />
        </div>
      </div>
      <div class="fjChart">
        <CasePerson></CasePerson>
      </div>
    </div>
  </div>
</template>

<script>
import Bar from "./components/barEcharts.vue";
import TopArea from "./components/TopArea.vue";
import CasePerson from "./components/casePerson.vue";
import {
  timeValidate,
  getRecentDay,
  getnRencebtMonth,
} from "../../../utils/tools.js";
import { jqfxCorrelation } from "../../../api/jqfxApi.js";
export default {
  components: {
    Bar,
    TopArea,
    CasePerson,
  },
  data() {
    return {
      isShowJqType: false,
      jqTitle: "总警情",
      jqTypeList: ["总警情", "街面警情", "违法犯罪警情"],
      //时间段选择数据
      timeList: ["今日", "近7日", "近7周", "近7月"],
      count: 0,
      isTimeActive: "6时段",
      tags: ["3时段", "4时段", "6时段", "8时段"],
      pcsfaListCopy: [],
      pcsfaList: [],
      gflxList: [], //高发类型数据
      gfqyLIst: [], //高发区域
      isShowDataCount1: false, //日期选择
      isShowDataCount2: false, //日期选择
      isShowDataCount3: false, //日期选择
      submitType: "", //选择的模块
      gfsdTime: "今日",
      gfqyTime: "今日",
      gflxTime: "今日",
      gfdxTime: "今日",
      gfsdTime: "今日",
    };
  },
  mounted() {
    this.get_gfsdfx_data();
    this.get_gflx_zjq_data(); //高发类别TOP5
    this._getgfquData();
  },
  methods: {
    // 时间选择
    change_data_count(val) {
      this._getTimeSelectData(val);
      this.isShowDataCount1 = false;
      this.isShowDataCount2 = false;
      this.isShowDataCount3 = false;
    },
    //根据时间查询的数据
    _getTimeSelectData(time) {
      switch (this.submitType) {
        case "gfsd":
          this.gfsdTime = time;
          this.get_gfsdfx_data();
          break;
        case "gflx":
          this.gflxTime = time;
          this.get_gflx_zjq_data();
          break;
        case "gfqy":
          this.gfqyTime = time;
          this._getgfquData();
          break;
      }
    },
    // 选择时间段
    chooseTime(type) {
      this.submitType = type; //选择那个模块时间
      switch (type) {
        case "gfsd":
          this.isShowDataCount1 = true;
          break;
        case "gfqy":
          this.isShowDataCount2 = true;
          break;
        case "gflx":
          this.isShowDataCount3 = true;
          break;
      }
    },
    // 下拉切换 总警情、违法犯罪警情、街面警情
    groupChange(val) {
      switch (val.value[0]) {
        case "总警情":
          this.jqTitle = "总警情";
          break;
        case "违法犯罪警情":
          this.jqTitle = "违法犯罪警情";
          break;
        case "街面警情":
          this.jqTitle = "街面警情";
          break;
      }
      this.isShowJqType = false;
      this.get_gfsdfx_data(); //高发时段分析
      this.get_gflx_zjq_data(); //高发类别TOP5
      this._getgfquData(); //高发区域
    },
    // 高发时段分析
    get_gfsdfx_data() {
      let params = {
        ssxgajdm: "1",
      };
      switch (this.gfsdTime) {
        case "今日":
          params.ksrq = timeValidate(new Date(), "ymd");
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        case "近7日":
          params.ksrq = getRecentDay(-7);
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        case "近7周":
          params.ksrq = getRecentDay(-49);
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        default:
          params.ksny = getnRencebtMonth(6);
          params.jsny = getnRencebtMonth(0);
          break;
      }
      // 总警情
      if (this.jqTitle == "总警情") {
        if (this.gfsdTime == "近7月") {
          this._getJqData("/sgfx/gfsdfx/yzjq", params);
        } else {
          this._getJqData("/sgfx/gfsdfx/zjq", params);
        }
      }
      if (this.jqTitle == "违法犯罪警情") {
        if (this.gfsdTime == "近7月") {
          this._getJqData("/sgfx/gfsdfx/ywffzjq", params);
        } else {
          this._getJqData("/sgfx/gfsdfx/wffzjq", params);
        }
      }
      // 街面警情
      if (this.jqTitle == "街面警情") {
        if (this.gfsdTime == "近7月") {
          this._getJqData("/sgfx/gfsdfx/yjmjq", params);
        } else {
          this._getJqData("/sgfx/gfsdfx/jmjq", params);
        }
      }
    },
    //请求高发地图警情数据
    _getJqData(url, params) {
      jqfxCorrelation(url, params).then((res) => {
        let timeArr = [];
        for (var i = 0; i < 24; i++) {
          let obj = {
            product: i,
            警情: 0,
            时长: 0,
            里程: 0,
          };
          for (var j = 0; j < res.length; j++) {
            let item = res[j];
            if (i == item.jqfsksxs) {
              obj["警情"] = item.sl;
            }
          }
          timeArr.push(obj);
        }
        this.pcsfaListCopy = timeArr;
        this.changeTime("6时段");
      });
    },
    // 高发时段分析时段切换
    changeTime(value) {
      this.isTimeActive = value;
      if (value == "3时段") {
        this.pcsfaList = this.getGroup(3);
      }
      if (value == "4时段") {
        this.pcsfaList = this.getGroup(4);
      }
      if (value == "6时段") {
        this.pcsfaList = this.getGroup(6);
      }
      if (value == "8时段") {
        this.pcsfaList = this.getGroup(8);
      }
    },
    // 时间分组
    getGroup(val) {
      let arr = [];
      let num = 24 / val;
      if (arr.length < num) {
        for (let j = 1; j <= num; j++) {
          let obj = {
            product: "",
            警情: 0,
            时长: 0,
            里程: 0,
          };
          for (let t = 0; t < this.pcsfaListCopy.length; t++) {
            let it = this.pcsfaListCopy[t];
            if ((j - 1) * val <= t && t < j * val) {
              let objs = JSON.parse(JSON.stringify(obj));
              objs.product = (j - 1) * val + "-" + (it.product + 1);
              this.count = this.count + it["警情"];
              if (t % val == val - 1) {
                objs["警情"] = this.count;
                this.count = 0;
                arr.push(objs);
                break;
              }
            }
          }
        }
      }
      return arr;
    },
    //高发区域 TOP5
    _getgfquData() {
      let params = {
        ssxgajdm: "1", //分县局代码
      };
      switch (this.gfqyTime) {
        case "今日":
          params.ksrq = timeValidate(new Date(), "ymd");
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        case "近7日":
          params.ksrq = getRecentDay(-7);
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        case "近7周":
          params.ksrq = getRecentDay(-49);
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        default:
          params.ksny = getnRencebtMonth(6);
          params.jsny = getnRencebtMonth(0);
          break;
      }
      if (this.jqTitle == "总警情") {
        params.type = 1;
      }
      if (this.jqTitle == "违法犯罪警情") {
        params.type = 3;
      }
      if (this.jqTitle == "街面警情") {
        params.type = 2;
      }
      this.gfqyLIst = [];
      jqfxCorrelation("/tbJq/querySgfx", params).then((res) => {
        if (res && res.length > 0) {
          res.forEach((item) => {
            if (!item.error) {
              item.name = item.address.road || item.display_name.split(",")[0];
              item.sl = item.jqsl;
              this.gfqyLIst.push(item);
            }
          });
        }
      });
    },
    // 高发类型TOP5
    get_gflx_zjq_data() {
      let params = {
        ssxgajdm: "1", //分县局代码
      };
      switch (this.gflxTime) {
        case "今日":
          params.ksrq = timeValidate(new Date(), "ymd");
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        case "近7日":
          params.ksrq = getRecentDay(-7);
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        case "近7周":
          params.ksrq = getRecentDay(-49);
          params.jsrq = timeValidate(new Date(), "ymd");
          break;
        default:
          params.ksny = getnRencebtMonth(6);
          params.jsny = getnRencebtMonth(0);
          break;
      }
      // 总警情
      if (this.jqTitle == "总警情") {
        if (this.gflxTime == "近7月") {
          this._getGflxData("/sgfx/gflx/yzjq", params);
        } else {
          this._getGflxData("/sgfx/gflx/zjq", params);
        }
      }
      // 违法犯罪警情
      if (this.jqTitle == "违法犯罪警情") {
        if (this.gflxTime == "近7月") {
          this._getGflxData("/sgfx/gflx/yzwffzjq", params);
        } else {
          this._getGflxData("/sgfx/gflx/wffzjq", params);
        }
      }
      // 街面警情
      if (this.jqTitle == "街面警情") {
        if (this.gflxTime == "近7月") {
          this._getGflxData("/sgfx/gflx/yjmjq", params);
        } else {
          this._getGflxData("/sgfx/gflx/jmjq", params);
        }
      }
    },
    //获取高发类型数据
    _getGflxData(url, params) {
      jqfxCorrelation(url, params).then((res) => {
        if (res && res.length > 0) {
          this.gflxList = res.slice(0, 5);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.compare {
  padding-bottom: 3vw;
}

.title-box {
  display: flex;
  justify-content: center;
}

.title {
  width: 92vw;
  height: 4vw;
  background: url("../../../assets/images/bigTitle@2x.png");
  background-size: 100% 100%;
  margin-top: 10px;
  text-align: center;
  line-height: 4vw;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
}

::v-deep .nav-box[data-v-19978886] {
  border-bottom: 1px solid #203967;
}

.zst-box {
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
}

.zst-title-box {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  @include font_color($font-color-theme);
}

.zst-title-left {
  background: url("../../../assets/images/lanmu-title.png") no-repeat;
  background-size: 100% 100%;
  flex: 2;
  height: 28px;
  line-height: 28px;
  padding-left: 10px;
  @include font_size($font_medium);
}

.zst-title-right {
  flex: 1;
  text-align: right;
  height: 28px;
  line-height: 28px;
  padding-right: 10px;
  color: #47b8ff;
}

.zst-title-right1 {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  height: 28px;
  line-height: 28px;
  padding-right: 10px;
  /* color: #47B8FF; */
}

.sendZL {
  width: 70px;
  height: 26px;
  border-radius: 5px;
  background-image: linear-gradient(#00c0fa, #015eea);
  text-align: center;
}

.img {
  margin-left: 3px;
}

.fjChart {
  /* width: 80vw; */
  padding: 3.5vw 3.5vw 0 3.5vw;
  /* height: 30vh; */
}

.assess-box {
  padding: 10px;
  line-height: 18px;
  font-size: 12px;
  color: #e3e3e3;
}

.fjAndCqfj-box {
  width: 100%;
  /* height: 40vh; */
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.first-line {
  width: 11vw;
  border: 1px solid #178bed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(51, 157, 255, 0.2);
}

.first-line :last-child {
  border-bottom: unset;
}

.first-line-item {
  flex: 1;
  border: 1px solid #18325e;
  text-align: center;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 1.5vw;
}

.right-box {
  display: flex;
  border-top: 1px solid #178bed;
  border-bottom: 1px solid #178bed;
  width: 89vw;
  overflow: auto;
}

.right-box-line-item {
  width: 33vw;
  border-right: 1px solid #178bed;
  display: flex;
  position: relative;
}

.right-line-box {
  width: 11vw;
  height: 40vh;
  /* border: 0.5px solid #18325E; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.first-line-item-right {
  flex: 1;
  border-bottom: 0.5px solid #18325e;
  border-right: 1px solid #18325e;
  text-align: center;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 1.5vw;
}

.right-line-box :first-child {
  border-right: unset;
}

.right-title-box {
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  line-height: 4vh;
}

/* echarts */
#gfChart {
  width: 100%;
  height: 40vh;
}

.tag_box {
  display: flex;
  padding: 3vw;
  @include font_color($font-color-theme);
  @include font_size($font_medium);
}

.but_box {
  text-align: center;
}

.but_box>span {
  display: inline-block;
  padding: 1.5vw 3vw;
  margin: 0 1.5vw;
  border-radius: 5px;
  background-image: linear-gradient(to top, #015eea, #00c0fa);
}
</style>
