<template>
  <div class="compare" v-if="showPage">
    <div class="title-box">
      <div class="title">
        <span @click="isShowJqType = true">{{ jqTitle }}</span>
        <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="onJqChange" @cancel="isShowJqType = false" />
        </van-action-sheet>
      </div>
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">分局{{ jqTitle }}走势图</div>
      </div>
      <jqChart :data1="jqzs.data1" :data2="jqzs.data2" :data3="jqzs.data3" :timeList="jqzs.timeList" :jqType="jqType"
        v-if="jqzs.timeList.length > 0" />
    </div>

    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">城区分局{{ jqTitle }}环比</div>
      </div>
      <div class="all-box" v-if="m2List.length > 0">
        <percent :list="m2List" :day="dqTime" :yesterday="sygTime" />
      </div>
      <div style="height: 10vh; text-align: center; line-height: 10vh" v-else>
        没有数据
      </div>
    </div>

    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">城区分局{{ jqTitle }}类别环比</div>
      </div>
      <div v-if="list3.length <= 0" style="height: 10vh; text-align: center; line-height: 10vh">
        没有数据
      </div>
      <div class="fjAndCqfj-box" v-else>
        <div class="first-line">
          <div class="first-line-item"></div>
          <div class="first-line-item" v-for="(item, index) in list3" :key="index">
            {{ item.name }}
          </div>
        </div>
        <div class="right-box">
          <div class="right-box-line-item" v-for="(_item, i) in list3Title" :key="i">
            <div class="right-line-box" v-if="_item">
              <div class="first-line-item-right">{{ _item }}</div>
              <div class="first-line-item-right" v-for="(item, index) in list3" :key="index + 'cc'">
                <span v-if="_item == '对比'" :style="{
                  color:
                    item['高新区'] - item[list3Title[i - 1]] < 0
                      ? 'green'
                      : 'red',
                }">{{ item["高新区"] - item[list3Title[i - 1]] }}</span>
                <span v-else>{{ item[_item] }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">派出所{{ jqTitle }}环比</div>
      </div>
      <div v-if="m4List.length > 0">
        <percent :list="m4List" :day="dqTime" :yesterday="sygTime" />
      </div>
      <div v-else style="height: 10vh; text-align: center; line-height: 10vh">
        没有数据
      </div>
    </div>

    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">派出所{{ jqTitle }}类别环比</div>
      </div>
      <div v-if="list5.length <= 0" style="height: 10vh; text-align: center; line-height: 10vh">
        没有数据
      </div>
      <div class="fjAndCqfj-box" v-else>
        <div class="first-line">
          <div class="first-line-item"></div>
          <div class="first-line-item"></div>
          <div class="first-line-item" v-for="(item, index) in list5" :key="index">
            {{ item.name }}
          </div>
        </div>
        <div class="right-box">
          <div class="right-box-line-item" v-for="(_item, i) in list5Title" :key="i">
            <div class="right-line-box" v-if="_item" style="width: 45vw">
              <div class="first-line-item-right">{{ _item }}</div>
              <div class="first-line-item-right lb_title" style="color: #3e6ee8">
                <span>{{ dqTime }}</span>
                <span>{{ sygTime }}</span>
                <span>环比</span>
              </div>
              <div class="first-line-item-right lb_title" v-for="(item, index) in list5" :key="index + 'cc'">
                <template v-for="(val, key) in item" :key="val">
                  <template v-if="
                    _item === key.split('_')[0] && _item + '_data2' == key
                  ">
                    <span>{{ item[_item + "_data1"] }}</span>
                    <span>{{ item[_item + "_data2"] }}</span>
                    <span :style="{
                      color:
                        item[_item + '_data1'] - item[_item + '_data2'] <= 0
                          ? 'green'
                          : 'red',
                    }">
                      {{ item[_item + "_data1"] - item[_item + "_data2"] }}
                    </span>
                  </template>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jqChart from "./components/lineChart.vue";
import percent from "./percent.vue";
import * as echarts from "echarts";
import { jqfxCorrelation } from "../../../api/jqfxApi.js";
import { Toast } from "vant";
export default {
  components: {
    jqChart,
    percent,
  },
  props: ["timeActive"],
  watch: {
    timeActive: {
      handler(val) {
        this.list3 = [];
        this.list5 = [];
        switch (val) {
          case 0:
            this.sygTime = "昨日";
            this.dqTime = "今日";
            break;
          case 1:
            this.sygTime = "上个7日";
            this.dqTime = "近7日";
            break;
          case 2:
            this.sygTime = "上个30日";
            this.dqTime = "近30日";
            break;
          case 3:
            this.sygTime = "上个90日";
            this.dqTime = "近90日";
            break;
        }
        this.tiemType = val + 1;
        this._allRequest();
        this.keyIndex += 1;
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      showPage: false,
      keyIndex: 1,
      sygTime: "昨日",
      dqTime: "今日",
      tiemType: 0, //时间查询类型
      jqType: 1, //警情类型
      zlShow: false,
      isShowJqType: false,
      jqTitle: "总警情",
      jqTypeList: ["总警情", "街面警情", "违法犯罪警情"],
      //警情走势图数据
      jqzs: {
        data1: [],
        data2: [],
        data3: [],
        timeList: [],
      },
      //城区总警情类别环比标题
      list3Title: [
        "",
        "高新区",
        "青羊区",
        "对比",
        "锦江区",
        "对比",
        "金牛区",
        "对比",
        "武侯区",
        "对比",
        "成华区",
        "对比",
        "天府新区",
        "对比",
      ],
      list3: [], //城区总警情类别环比
      list5: [], //派出所总警情类别环比
      list5Title: [
        "",
        "中和派出所",
        "合作派出所",
        "和平派出所",
        "新会展派出所",
        "新川派出所",
        "新益州派出所",
        "桂溪派出所",
        "石羊派出所",
        "肖家河派出所",
        "芳草街派出所",
        "西园派出所",
      ], //派出所总警情类别环比标题
      m2List: [], //城区分局总警情环比
      m4List: [], //派出所警情环比
    };
  },
  mounted() {
    try {
      if (this.$route.query.jqlx === "jmjq") {
        this.onJqChange("街面警情");
      } else if (this.$route.query.jqlx === "zjq") {
        this.onJqChange("总警情");
      } else if (this.$route.query.jqlx === "wffzjq") {
        this.onJqChange("违法犯罪警情");
      }
    } catch (error) {
      this._allRequest();
    }
  },
  methods: {
    //切换警情类型
    onJqChange(val) {
      switch (val) {
        case "总警情":
          this.jqType = 1;
          this.jqTitle = "总警情";
          break;
        case "违法犯罪警情":
          this.jqType = 3;
          this.jqTitle = "违法犯罪警情";
          break;
        case "街面警情":
          this.jqType = 2;
          this.jqTitle = "街面警情";
          break;
      }

      this._allRequest();
      this.isShowJqType = false;
      this.keyIndex += 1;
    },
    //
    _allRequest() {
      Toast.loading({
        message: "加载...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0,
      });
      Promise.all([
        this._getCqjqfjhbData(),
        this._getCqjqlbhbData(),
        this._getPcsjqhbData(),
        this._getPcsjqlbhbData(),
        this._getFjjqzstData(),
      ]).then((res) => {
        setTimeout(() => {
          this.showPage = true;
          Toast.clear();
        }, 4e3);
      });
    },
    //获取分局警情走势图
    _getFjjqzstData() {
      let data = {
        type: this.tiemType,
        ssfjdm: "510109000000",
        jqType: this.jqType,
      };
      jqfxCorrelation("/tbJq/jqtjDbFjjqzs", data).then((res) => {
        if (res) this.jqzs = res;
      });
    },
    //派出所警情类别环比
    _getPcsjqlbhbData() {
      let data = {
        type: this.tiemType,
        jqType: this.jqType,
        ssfjdm: "510109000000",
      };
      jqfxCorrelation("/tbJq/jqtjDbPcsHbTable", data).then((res) => {
        this.list5 = res;
      });
    },
    //派出所警情环比
    _getPcsjqhbData() {
      let data = {
        type: this.tiemType,
        jqType: this.jqType,
        ssfjdm: "510109000000",
      };
      jqfxCorrelation("/tbJq/jqtjDbPcsHb", data).then((res) => {
        for (let i = 0; i < res.length; i++) {
          res[i].orgname = res[i].orgname.replace("派出所", "");
        }
        this.m4List = res;
      });
    },
    //获取城区总警情类别环比
    _getCqjqlbhbData() {
      let data = {
        type: this.tiemType,
        jqType: this.jqType,
      };
      jqfxCorrelation("/tbJq/jqtjDbCqfjhbTable", data).then((res) => {
        this.list3 = res;
      });
    },
    //获取城区总警情环比
    _getCqjqfjhbData() {
      let data = {
        type: this.tiemType,
        jqType: this.jqType,
      };
      jqfxCorrelation("/tbJq/jqtjDbCqfjhb", data).then((res) => {
        this.m2List = res;
      });
    },
  },
};
</script>

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

.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 {
  width: 100vw;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.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_color($font-color-theme);
  @include font_size($font_medium);
}

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

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

.sendZL {
  width: 70px;
  height: 26px;
  border-radius: 5px;
  background-image: linear-gradient(#00c0fa, #015eea);
  span-align: center;
  margin-left: 16vw;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
}

.img {
  margin-left: 3px;
}

.assess-box {
  padding: 10px;
  line-height: 18px;
  // @include font_size($font_medium_s);
  // @include font_color($font-color-theme);
}

.fjAndCqfj-box {
  margin: 0 auto;
  width: 95vw;
  /* height: 40vh; */
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.first-line {
  flex: 1;
  overflow: auto;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  align-items: center;
  background-color: rgb(51, 157, 255, 0.2);
}

.first-line :first-child {
  border-top: unset;
}

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

.first-line-item {
  flex: 1;
  height: 3.5vh;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 1.5vw;
  white-space: nowrap;
  overflow-x: scroll;
}

.right-box {
  flex: 4.5;
  display: flex;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  overflow: auto;
}

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

.right-line-box-m5 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
}

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

.table-content-m5 {
  display: flex;
  width: 42vw;
}

.right-line-box {
  width: 14vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.first-line-item-right {
  // flex: 1;
  height: 3.5vh;
  border-bottom: 1px solid #333;
  //   border-right: 1px solid #18325e;
  span-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  // padding-left: 1.5vw;
}

.lb_title {
  display: flex;
  justify-content: space-between;
}

.lb_title>span {
  width: 33.3%;
  text-align: center;

  border-right: 1px solid #333;
  height: 3.5vh;
  line-height: 3.6vh;
}

.lb_title>span:last-child {
  border: none;
}

.first-line-item-rightsss {
  height: 3.5vh;
  border-bottom: 1px solid #333;
  span-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.first-line-item-rightsss:last-child {
  border-bottom: none;
  // border-right:none;
}

.first-line-item-right:last-child {
  border-bottom: none;
  // border-right:none;
}

.first-line-item-right-m5 {
  height: 3.5vh;
  border-top: 1px solid #333;
  border-bottom: 0.5px solid #333;
  span-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-left: 1.5vw;
}

.first-line-item-right-m5:last-child {
  // border-bottom:none;
  border-right: none;
}

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

.right-title-box {
  width: 42vw;
  // span-align: center;
  text-align: center;
  line-height: 3.6vh;
  white-space: nowrap;
  overflow-x: scroll;
}

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

#chainChart1 {
  width: 100%;
  height: 43vh;
}

.zhanbi1 {
  margin-top: 4.5vh;
  height: 33.5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 4.5vh;
}

.zhanbi1-item {
  flex: 1;
}

.all-box {
  display: flex;
}

.pop-box {
  padding: 2vw 4vw;
}

.span-zhanbi {
  color: #ff7327;
  font-size: 18px;
}

.slot-content {
  padding: 2vw;
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
}

.first-Line-content {
  margin-bottom: 10px;
}

.other-content {
  // height: 161px;
  // background-color: #293647;
  // overflow: auto;
  padding: 2vw;
  border-radius: 5px;
  white-space: pre-line;
  @include border_outer_color($border-outer-color-theme);
}

.empty-box {
  line-height: 8vh;
  span-align: center;
}

.content-module5 {
  display: flex;
  flex-direction: column;
}

.db_span {
  color: #ed0000;
}

::v-deep .modal-box .u-popup__content[data-v-3a231fda] {
  background-color: #333 !important;
}

::v-deep .modal-box .u-line {
  border-right-color: #333 !important;
  border-top-color: #333 !important;
  border-left-color: #333 !important;
  border-bottom: #333 !important;
}

::v-deep .modal-box .u-modal__button-group__wrapper__span[data-v-0156a215] {
  color: #fff !important;
}
</style>
