<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/AttackComponents/LeftBlock.vue
 * @Date: 2022-09-05 11:17:47
 * @Description: 
 * @LastEditTime: 2023-09-01 18:13:02
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted } from 'vue'
import { ElScrollbar } from "element-plus";
import { bigNumberTransform } from "../../../utils/utils";
import { useGlobalAttackMap } from "../logic/useGlobalAttackMap";
import { mapMapping } from "../../../assets/map/provinceData";
import BlockHeader from "../../../views/screen/SafeComponents/BlockHeader.vue";

const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
const mapData = reactive(mapMapping());
const topObj = reactive({
  attack: "被攻击次数",
  visit: "被访问次数",
  tableList: [],
  allList: [],
  page: 1,
  size: 9,
  totalPage: 0,
  total: 0,
  attackedCount: 0, // 攻击数
  visitedCount: 0, // 访问数
});
const totalNum = ref(0);
const { currentCity, setCurrentCity, attackData, getProvinceAttack } =
  useGlobalAttackMap();
watch(currentCity, () => {
  console.log(currentCity);
  console.log(topObj.allList);
  // getData()
  if (topObj.allList.length > 9) {
    topObj.allList.forEach((item, index) => {
      if (item.region == currentCity.value) {
        if (index > 8) {
          topObj.page = 2;
          getData();
        } else {
          topObj.page = 1;
          getData();
        }
      }
    });
  }
  nextTick(() => {
    const top = document.getElementById("leftitemactive")?.offsetTop - 20;
    autoSlider(top);
  });
});

// 自动滚动
const autoSlider = (value: number) => {
  scrollbarRef.value!.setScrollTop(value);
};
const getData = async () => {
  try {
    const data = attackData.value;
    topObj.tableList = data || [];
    topObj.tableList.forEach((item) => {
      item.num = bigNumberTransform(item.count);
    });
    console.log(topObj.tableList);
    topObj.allList = data || [];
    if (data.length > 0) {
      totalNum.value = bigNumberTransform(data[0].total);
    }
    // attacksCount.value = res.data
    // let dataList = JSON.parse(JSON.stringify(topObj.tableList));
    // topObj.total = topObj.tableList.length;
    // topObj.tableList = dataList.splice(
    //   (topObj.page - 1) * topObj.size,
    //   topObj.size
    // );
    // topObj.totalPage = Math.floor(
    //   (topObj.total + topObj.size - 1) / topObj.size
    // );
  } catch (error) { }
};
const toPage = (type) => {
  if (type == "down") {
    if (topObj.totalPage == topObj.page) return;
    topObj.page = topObj.page + 1;
  } else {
    if (topObj.page == 1) return;
    topObj.page = topObj.page - 1;
  }
  getData();
};
const getAssetsImages = (name) => {
  return new URL(
    `/src/assets/image/attackScreen/map/active/${mapData?.en}/${name}.png`,
    import.meta.url
  ).href;
};
const resetImg = (val) => {
  return getAssetsImages(val);
};
const getAssetsImagesActive = (name) => {
  return new URL(
    `/src/assets/image/attackScreen/map/default/${mapData?.en}/${name}.png`,
    import.meta.url
  ).href;
};
const resetImgActive = (val) => {
  return getAssetsImagesActive(val);
};
const toChose = (e) => {
  currentCity.value = e.region;
  getProvinceAttack();
  setCurrentCity(e.region);
};
const init = () => {
  getData();
};
// 监听城市数据变化
watch(attackData, () => {
  getData();
});
onMounted(() => {
  init();
});
</script>
<template>
  <div class="container">
    <div class="left-container-top" :class="mapData?.en">
      <div class="left-container-top-frist">
        <div class="left-header-img">
          <img src="../../../assets/image/screen/threat-event/city-hearder.png" alt="" />
        </div>
        <div class="left-hearder-info">
          <div class="left-hearder-info-num">{{ totalNum || 0 }}</div>
          <div class="left-hearder-info-label">{{ mapData?.name }}被攻击次数</div>
        </div>
      </div>
      <BlockHeader name="各地市被攻击数排名" style="margin-top: 25px" unit="次"></BlockHeader>
    </div>
    <div class="left-container-table">
      <div class="left-container-table-title">
        <div class="left-container-table-title-city">城市名</div>
        <div class="left-container-table-title-num">被攻击数</div>
        <div class="left-container-table-title-point">占比</div>
      </div>
      <ElScrollbar ref="scrollbarRef" v-if="topObj.tableList.length > 0">
        <div class="left-container-table-warp">
          <div class="left-container-table-list" :id="item.region == currentCity ? 'leftitemactive' : null"
            :class="[item.region == currentCity ? 'left-item-active' : '']" v-for="(item, i) in topObj.tableList" :key="i"
            @click="toChose(item)">
            <div class="left-container-table-center">
              <div class="left-container-table-img">
                <img v-if="item.region != currentCity" :src="resetImg(item.region)" />
                <img v-if="item.region == currentCity" :src="resetImgActive(item.region)" />
              </div>
              <div class="left-container-table-city">{{ item.region }}</div>
              <div class="left-container-table-num">{{ item.num }}</div>
              <div class="left-container-table-point">{{ item.ratio }}%</div>
            </div>
          </div>
        </div>
        <!-- <div class="left-page" v-if="topObj.total > 9">
          <div></div>
          <div class="left-page-btn">
            <img
              v-if="topObj.page == 1"
              @click="toPage('up')"
              class="left-page-btn-left"
              src="../../../assets/image/attackScreen/left-table-left.png"
            />
            <img
              v-if="topObj.page > 1 && topObj.page == topObj.totalPage"
              @click="toPage('up')"
              class="left-page-btn-left"
              src="../../../assets/image/attackScreen/left-table-left-click.png"
            />
            <img
              v-if="topObj.page == topObj.totalPage"
              @click="toPage('down')"
              src="../../../assets/image/attackScreen/left-table-right.png"
            />
            <img
              v-if="topObj.page < topObj.totalPage"
              @click="toPage('down')"
              src="../../../assets/image/attackScreen/left-table-right-click.png"
            />
          </div>
        </div> -->
      </ElScrollbar>
      <ya-empty class="positionRelative" v-else></ya-empty>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  font-weight: 400;
  width: 100%;

  .left-container-top {
    .left-container-top-frist {
      height: 70px;
      background: url("../../../assets/image/screen/threat-event/city-hearder-bg.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      padding: 12px;

      .left-header-img {
        position: relative;
        top: 4px;

        img {
          width: 64px;
          height: 72px;
        }
      }

      .left-hearder-info {
        margin-left: 12px;

        .left-hearder-info-num {
          font-size: 32px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
        }

        .left-hearder-info-label {
          font-size: 24px;
          font-weight: 400;
          font-family: YouSheBiaoTiHei;
          background: linear-gradient(0deg,
              rgba(26, 215, 255, 1) 1.07421875%,
              #c2f7ff 100%);
          -webkit-background-clip: text;
          color: transparent;
          position: relative;
          top: -5px;
        }
      }
    }

    .left-container-top-second,
    .left-container-top-third {
      height: 70px;
      font-size: 20px;
      color: rgb(124, 109, 186);
      line-height: 70px;
      margin-top: 18px;
      background: url("../../../assets/image/attackScreen/left-top-bg2.png") no-repeat;
      background-size: 100% 100%;

      .left-container-top-second-center,
      .left-container-top-third-center {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 16px;

        .left-container-top-second-center-num,
        .left-container-top-third-center-num {
          font-size: 30px;
          font-weight: normal;
        }
      }
    }

    .left-container-top-third {
      color: rgba(89, 185, 157, 1);
      background: url("../../../assets/image/attackScreen/left-top-bg3.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .anhui {
    .left-container-top-frist {
      color: #ffffff;
    }
  }

  .left-container-table {
    margin-top: 24px;
    font-size: 14px;
    color: #fff;

    .left-container-table-title {
      font-weight: 400;
      color: #ffffff;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 37px;
      line-height: 37px;
      background: rgba(0, 174, 255, 0.16);
      border: 1px solid #1281b5;
      box-shadow: inset 1px 0 21px 0 rgba(0, 174, 255, 0.34);

      .left-container-table-title-city {
        margin-left: 14px;
      }

      .left-container-table-title-num {
        margin-left: 48px;
      }

      .left-container-table-title-point {
        margin-right: 22px;
      }
    }

    .left-container-table-warp {
      // overflow: auto;
      max-height: 725px;

      .left-container-table-list {
        margin-top: 28px;
        background: url("../../../assets/image/screen/threat-event/city-base-bg.png") no-repeat;
        background-size: 100% 100%;
        height: 44px;
        cursor: pointer;

        .left-container-table-center {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          color: #ccc;
          padding: 0 15px;

          .left-container-table-city {
            color: #8cecff;
            font-size: 16px;
            width: 70px;
            text-align: center;
            font-weight: 400;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .left-container-table-num {
            min-width: 60px;
            text-align: center;
            word-wrap: break-word;
            word-break: break-all;
            white-space: pre-wrap;
            white-space: nowrap;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #9aefff;
            font-size: 16px;
          }

          .left-container-table-point {
            // margin-right: 26px;
            width: 60px;
            text-align: center;
            word-wrap: break-word;
            word-break: break-all;
            white-space: pre-wrap;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #9aefff;
            font-size: 16px;
            white-space: nowrap;
          }

          .left-container-table-img {
            width: 30px;
            height: 32px;

            // margin-left: 9px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .left-page {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;

      .left-page-btn {
        .left-page-btn-left {
          margin-right: 10px;
        }
      }
    }

    .left-item-active {
      background: url("../../../assets/image/screen/threat-event/city-chose-bg.png") no-repeat !important;
      background-size: 100% 100% !important;

      .left-container-table-city,
      .left-container-table-num,
      .left-container-table-point {
        color: #fdff52 !important;
      }
    }
  }
}

.positionRelative {
  position: relative;
  top: 50px;
}
</style>
