<!--
 * @Author: sjl
 * @Date: 2021-09-08 16:19:24
 * @Descripttion: 
-->
<template>
  <div class="xtjc-left-side" v-show="mapStore.leftSideMenu">
    <div class="leafTotal">
      <i>
        灾害类型统计：
        <span style="font-size: 20px">{{ DzNumTotal }}</span
        >个 /

        <span style="font-size: 24px">{{ DzTypeTotal }}</span
        >类
      </i>
    </div>
    <div class="total">
      <!-- <span style="font-size: 16px;">灾害类型统计：<span style="font-size: 24px;">10</span>个</span> -->
      <div class="total-item">
        <!-- <ComWordCloudChart></ComWordCloudChart> -->
        <WordCloud @getDzTypeTotal="getDzTypeTotal" />
      </div>
    </div>

    <div class="currentState">
      <div class="secondTab">
        <!-- <div class="secondTab-item">
        <span style="font-size: 16px; margin-left: 35px;">当前状态：<span style="font-size: 24px;">10</span>个</span>
       </div> -->
        <a-tabs v-model:activeKey="activeKey" class="user" @change="changePanel">
          <a-tab-pane key="1">
            <template #tab>
              <span @click="getzhongdian">
                <div class="titleFont"
                  >{{ dictValue2.itemText }}<span class="countFont">{{ dqztTotal }}</span
                  >个</div
                >
              </span>
            </template>
            <div class="total-item3">
              <PieChart @getDqztTotal="getDqztTotal" :dictValue2="dictValue2" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #tab>
              <span @click="getpucha"
                ><div class="titleFont"
                  >{{ dictValue1.itemText }}<span class="countFont">{{ djfxTotal }}</span
                  >个</div
                ></span
              >
            </template>
            <div class="total-item4">
              <PieChart2 @getDjfxTotal="getDjfxTotal" :dictValue1="dictValue1" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!-- <div class="total-item3">
        <PieChart></PieChart>
      </div> -->
    </div>

    <div class="total1">
      <div class="secondTab" style="height: 100%">
        <!-- <span style="font-size: 16px; margin-left: 35px;">所属河流：<span style="font-size: 24px;">10</span>个</span> -->
        <a-tabs v-model:activeKey="activeKey" class="user">
          <a-tab-pane key="1">
            <template #tab>
              <span
                ><div class="titleFont"
                  >所属河段<span class="countFont">{{ sshdTotal }}</span
                  >个</div
                >
              </span>
            </template>
            <div class="scroll" style="height: 100%; width: 100%; z-index: 999"><Histogram @getSshdTotal="getSshdTotal" /></div>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #tab>
              <span
                ><div class="titleFont"
                  >影响工程<span class="countFont">{{ yxgcTotal }}</span
                  >个</div
                ></span
              >
            </template>
            <Histogram2 @getYxgcTotal="getYxgcTotal" />
          </a-tab-pane>
        </a-tabs>
      </div>
      <!-- <div class="total-item2">
        <Histogram></Histogram>
      </div> -->
    </div>
    <!-- <div class="total">
      <div class="grid">
        <ul>
          <li v-for="(item, index) in dzlxList" :key="index" class="grid-item">
            <div class="item-left">
              <label class="check">
                <div class="checkbox-background"></div>
                <input type="checkbox" class="checkbox" />
              </label>
              <span class="text dzdTextSpan">&nbsp;&nbsp;&nbsp;{{ item.name }}</span>
            </div>
            <div class="item-right">
              <span class="number">{{ item.value }}</span>
              <span class="word">个</span>
            </div>
          </li>
        </ul>
      </div>
    </div> -->
    <!-- <gcly /> -->
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import { useGeologicalStore } from '/@/store/modules/geological';
import gcly from './gcly.vue';
import ComWordCloudChart from './charts/ComWordCloudChart.vue';
import WordCloud from './charts/WordCloud.vue';
import Histogram from './charts/Histogram.vue';
import PieChart from './charts/PieChart.vue';
import Histogram2 from './charts/Histogram2.vue';
import PieChart2 from './charts/PieChart2.vue';
import { queryImpactEngineering, queryRiverBlockageRisk, queryRiskLevel } from '/@/api/map/geologicalApi';
import { getdictItemInfo } from '/@/api/map/getData';
import { useMapStore } from '/@/store/modules/map';
export default defineComponent({
  name: 'LeftSide',
  components: {
    gcly,
    ComWordCloudChart,
    WordCloud,
    Histogram,
    PieChart,
    Histogram2,
    PieChart2,
  },
  setup() {
    const mapStore = useMapStore();
    const geologicalStore = useGeologicalStore();

    let dzlxList = ref([]);
    const getzhongdian = () => {
      console.log('获取所有重点关注');
      let zdgzParams = {
        dzlxid: 'zhongdian',
        gztypeid: '',
      };
      eventBus.emit('toZhdqztid', zdgzParams);
    };
    const getpucha = () => {
      console.log('获取所有pucha');

      let pcParams = {
        dzlxid: 'pucha',
        gztypeid: '',
      };
      console.log(pcParams, '获取所有普查参数获取所有普查参数获取所有普查参数');
      eventBus.emit('toDjfxid', pcParams);
    };

    function GetDzRiskTypeList() {
      geologicalStore.GetDzRiskTypeList().then((res) => {
        dzlxList.value = res;
      });
    }
    let DzTypeTotal = ref(0);
    let DzNumTotal = ref(0);
    // 得到灾害类型总数
    const getDzTypeTotal = (typeTotal, valueTotal) => {
      // console.log("子组件的值",value);
      DzTypeTotal.value = typeTotal;
      DzNumTotal.value = valueTotal;
    };
    // 得到所属河段总数
    let sshdTotal = ref('');
    const getSshdTotal = (value) => {
      sshdTotal.value = value;
    };
    // // 得到影响工程总数
    let yxgcTotal = ref('');
    // const getYxgcTotal = (value) => {
    //   yxgcTotal.value = value
    // }
    // 得到当前状态总数
    let dqztTotal = ref('0');
    const getDqztTotal = (value) => {
      dqztTotal.value = value;
    };
    const getPCtotal = (id) => {
      queryRiskLevel({ gztypeid: id }).then((res) => {
        console.log(res, 'res111111 11111111111111');
        // pcgztypeid.value=id
        res.result.map((i) => {
          // pcdzlxid.value=i.dzlxid
          if (i.name) djfxTotal.value += i.value;
        });
      });
    };
    // // 得到堵江风险总数
    let djfxTotal = ref(0);
    const getDjfxTotal = (value) => {
      djfxTotal.value = value;
    };

    // 得到影响工程数据
    const getImpactEngineeringData = () => {
      queryImpactEngineering().then((res) => {
        let yxgcCount = 0;
        res.result.forEach((item) => {
          yxgcCount += item.value > 0 ? 1 : 0;
        });
        yxgcTotal.value = yxgcCount;
      });
    };

    // 得到堵江风险数据
    const getRiverBlockageRiskData = () => {
      queryRiverBlockageRisk().then((res) => {
        console.log(res, 'res222222222222222222');
        let djfxCount = 0;
        res.result.forEach((item) => {
          if (item.name == null) {
            djfxCount += 0;
          } else {
            djfxCount += item.value;
          }
        });
        // djfxTotal.value = djfxCount;
      });
    };

    // 通过字典拿值
    let dictValue = ref([]);
    let dictValue1 = ref([]);
    let dictValue2 = ref([]);
    const getdictItemInfoL = () => {
      getdictItemInfo({ dictCode: 'disaster_follow_type' }).then((res) => {
        console.log('字典的取值情况', res);
        dictValue.value = res;
        dictValue1.value = dictValue.value[1];
        dictValue2.value = dictValue.value[0];
        res.map((i) => {
          if (i.itemText == '普查') {
            getPCtotal(i.id);
          }
        });
      });
    };

    // 切换面板改变
    const changePanel = (value) => {
      console.log('环状图面板改变的值', value);
      //
    };
    // getRiverBlockageRiskData()
    onMounted(() => GetDzRiskTypeList(), getImpactEngineeringData(), getdictItemInfoL());
    return {
      mapStore,
      getzhongdian,
      getpucha,
      dzlxList,
      DzTypeTotal,
      DzNumTotal,
      getDzTypeTotal,
      sshdTotal,
      getSshdTotal,
      yxgcTotal,
      getImpactEngineeringData,
      // getYxgcTotal,
      dqztTotal,
      getDqztTotal,
      djfxTotal,
      getRiverBlockageRiskData,
      getDjfxTotal,
      dictValue,
      getdictItemInfoL,
      dictValue1,
      dictValue2,
      changePanel,
    };
  },
});
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'AlimamaShuHeiTi';
  src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
}

@font-face {
  font-family: 'AgencyFB';
  src: url('../../assets/font/AgencyFB-Bold.ttf');
}

.dzdTextSpan {
  color: #fff !important;
}

.check {
  width: 23px;
  height: 23px;
  position: relative;
}

.grid {
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.grid ul li:nth-child(2n) {
  margin-right: 0px;
}

.grid-item {
  border: 1px solid #0b6f9a;
  background: rgba(3, 49, 79, 0.4);
  margin-right: 20px;
  margin-bottom: 10px;
  width: calc(50% - 10px);
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 5px rgba(40, 188, 252, 0.2), 0 0 5px rgba(40, 188, 252, 0.2),
    0 0 5px rgba(40, 188, 252, 0.2), 0 0 5px rgba(40, 188, 252, 0.2);
}

.item-left {
  display: flex;
  align-items: center;
}

.checkbox-background {
  width: 23px;
  height: 27px;
  margin-right: 10px;
  position: absolute;
  background-image: url('../../assets/images/checkbox.png');
}

.checkbox {
  cursor: pointer;
  width: 23px;
  height: 27px;
  margin-right: 10px;
  position: absolute;
  opacity: 0;
}

.text {
  font-size: 14px;
  color: #fff;
}

.item-right {
  display: flex;
  align-items: center;
}

.number {
  font-size: 20px;
  color: #fff;
  margin-right: 5px;
  font-family: 'AgencyFB';
}

.word {
  font-size: 14px;
  color: #fff;
}

.xtjc-left-side {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  margin-top: -10px;

  .titleFont {
    margin-top: -6px;
  }
  .countFont {
    font-size: 20px;
    font-family: AgencyFB;
    font-weight: bold;
    font-style: italic;
    color: rgb(255, 255, 255);
    padding: 0px 6px;
  }
}

@keyframes move {
  0% {
    left: -400px;
  }

  100% {
    left: 20px;
  }
}

.xtjc-left-side {
  // position: fixed;
  position: absolute;
  left: 20px;
  top: 90px;
  z-index: 3;
  width: 400px;
  // height: 100%;
}

.leafTotal {
  width: 400px;
  height: 47px;
  background: url('../../assets/images/jcsbtj.png') no-repeat;
  font-size: 19px;
  font-weight: bold;
  color: #fff;
  line-height: 38px;
  margin: 0px 0px 10px 0px;
}

.leafTotal i {
  margin-left: 32px;
  font-family: 'AlimamaShuHeiTi';
  margin-right: 98px;
  font-weight: bold;
  font-style: italic;
  margin-left: 32px;
  margin-right: 98px;
}

.leafTotal b {
  font-weight: normal;
  font-size: 15px;
  color: #a7e6fa;
}

.total {
  padding: 20px;
  padding-top: 0px;
  width: 400px;
  height: 230px;
  color: #fff;
  background: rgba(3, 49, 79, 0.4);
  margin-bottom: 10px;
  // border: 1px solid rgba(39, 209, 238, 0.3);
  border-radius: 3px;
  position: relative;
}

.total:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
  // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
}
.total:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
}

.total-item {
  margin-top: 20px;
  // /* margin-left: -5px; */
  width: 354px;
  height: 220px;
  padding-top: 0px;
  // background: url(src/assets/images/词云图.png) no-repeat;
  // background-size: 100% 90%;
  // width: 100%;
  // height: calc(100% - 10px /* 14/192 */);
  // display: flex;
  /deep/span {
    cursor: pointer;
  }
}

.total1 {
  position: relative;
  // padding: 20px;
  padding-top: 0px;
  width: 100%;
  height: calc(100% - 710px);
  color: #fff;
  border: 1px solid transparent;
  background: rgba(3, 49, 79, 0.4);
  border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;
  margin-bottom: 10px;
  margin-top: 10px;
  // background: url('src/assets/images/词云图.png') no-repeat;
}
.total1:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
  // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
}
.total1:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
}

.total-item2 {
  width: 400px;
  height: 150px;
}

.currentState {
  position: relative;
  /* margin-left: -5px; */
  width: 100%;
  height: 280px;
  padding-top: 0px;
  color: #fff;
  border: 1px solid rgba(39, 209, 238, 0.3);
  // border: 1px solid transparent;
  background: rgba(3, 49, 79, 0.4);
  border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;
}
.currentState:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
  // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
}
.currentState:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
}

::v-deep .secondTab .ant-tabs-nav .ant-tabs-tab-active {
  background: url(/src/assets/images/tab.png) no-repeat;
  width: 195px;
  background-position: 1px 2px;
  background-size: 102% 95%;
  line-height: 40px;
  margin-top: -6px;
  margin-left: -6px;
}

::v-deep .ant-tabs-nav-wrap {
  height: 38px;
  width: 370px;
  background: url('../../assets/images/tab-背景.png') no-repeat;
  background-size: 100% 100%;
  margin: 10px 15px;
}

.secondTab-item {
  padding: 0px;
  width: 195px;
  height: 36px;
  background: url('../../assets/images/tab.png') no-repeat;
  background-size: 100% 130%;
  background-position: 0px -2px;
}

.total-item3 {
  // padding-left: 5px;
  background: url('../../assets/images/状态图标.png') no-repeat;
  background-position: 96px;
  margin-top: -20px;
  width: 350px;
  height: 194px;
}

.total-item4 {
  // padding-left: 5px;
  background: url(../../assets/images/堵江风险图标.png) no-repeat;
  background-position: 96px;
  margin-top: -20px;
  width: 350px;
  height: 194px;
}

::v-deep .ant-tabs-bar {
  border-bottom: 0px solid #303030 !important;
}

::v-deep .ant-tabs-nav .ant-tabs-tab-active {
  color: #e4ebf1 !important;
  // background: url("../../assets/images/tab.png") no-repeat;
}

::v-deep [class^='ant-'],
[class*='ant-'],
[class^='ant-'] *,
[class*='ant-'] *,
[class^='ant-'] *::before,
[class*='ant-'] *::before,
[class^='ant-'] *::after,
[class*='ant-'] *::after {
  box-sizing: border-box;
  font-size: 16px;
  // line-height: ;
}

::v-deep .ant-input-affix-wrapper {
  border: 0px solid #303030 !important;
  height: 42px !important;
}
::v-deep .ant-tabs-bar {
  border-bottom: 0px solid #303030 !important;
}
::v-deep .ant-tabs-nav-animated > div {
  display: flex;
  justify-content: center;
}
::v-deep .ant-tabs-nav-animated > div > div {
  flex: 1;
  text-align: center;
}
::v-deep .ant-tabs-nav .ant-tabs-tab-active {
  color: #e4ebf1 !important;
}
::v-deep .ant-tabs-tab {
  color: #69aeec;
}
::v-deep .ant-tabs-nav .ant-tabs-tab-active {
  background: url('../../assets/images/tab.png') no-repeat;
}
::v-deep .ant-tabs-nav-wrap {
  background: url('../../assets/images/tab-背景.png') no-repeat !important;
  height: 54px;
  background-size: 400px 54px;
  width: 370px;
  margin-left: 15px;
}
::v-deep span.anticon.anticon-caret-right svg path {
  box-shadow: 0 0 10px 5px yellow;
  background: linear-gradient(to right, yellow, #fff);
}
::v-deep .ant-tabs-nav .ant-tabs-tab {
  margin-right: 0px;
  padding: 12px 26px;
  width: 185px;
  background-size: 100% 90%;
}

::v-deep .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
  display: none !important;
}

::v-deep .ant-tabs-bar {
  margin: 0 0 0px 0;
  border-bottom: 1px solid #f0f0f0;
  outline: none;
  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.user {
  height: 100%;
}

::v-deepelement.style {
  margin-left: 0%;
  position: relative;
  height: calc(100% - 60px);
}

::v-deep .ant-tabs .ant-tabs-top-content.ant-tabs-content-animated,
.ant-tabs .ant-tabs-bottom-content.ant-tabs-content-animated {
  display: flex;
  flex-direction: row;
  transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: margin-left;
  height: calc(100% - 70px);
}

::v-deep .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane,
.ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane {
  flex-shrink: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  opacity: 1;
  transition: opacity 0.45s;
  height: 100%;
}
// .scroll::-webkit-scrollbar-thumb {
//     background-color: #007e8f !important;
//     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2) !important;
//     border-radius: 2px;
//   }
.scroll {
  font: 100;
}
</style>
