<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/threatComponents/DistributionSecurityIndustry.vue
 * @Date: 2022-09-09 10:12:49
 * @Description: 
 * @LastEditTime: 2023-02-23 10:00:55
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">
import { ref, reactive, onMounted, watch, unref } from 'vue'
import CrossBarChart from "../../../components/chart/CustomChart/CrossBarChart.vue";
import { useGlobalThreatEvent } from "../logic/useGlobalThreatEvent";
import { useGetChartData } from "../../../components/chart/logic";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const { currentCity, currentDate } = useGlobalThreatEvent();

const barChartData = ref([]) as any;
const barYAxisData = ref([]) as any;

const handleResData = (res = []) => {
  let xAxisData = [] as any;
  let chartData = [] as any;
  if (res.length === 0) return { xAxisData, chartData };
  res.forEach((item) => {
    chartData.push({
      name: item.eventName,
      data: item.data,
    });
  });
  xAxisData = res.length && res[0].xaxisData;
  console.log(xAxisData, "xAxisDataxAxisDataxAxisData");
  return { xAxisData, chartData };
};

const getChartData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  const { xAxisData, chartData } = await useGetChartData(
    "threatIncidentScreen/searchIndustrySecurityIncidents",
    handleResData,
    params
  );
  console.log(xAxisData, "==", chartData);
  barYAxisData.value = xAxisData;
  barChartData.value = chartData;

  let dataList = JSON.parse(JSON.stringify(xAxisData));
  pageInfo.total = barYAxisData.value.length;
  barYAxisData.value = dataList.splice(
    (pageInfo.page - 1) * pageInfo.size,
    pageInfo.size
  );
  let leng = barYAxisData.value.length;
  if (leng < 10) {
    // let arr = ['','','']
    // arr.forEach((item,index) =>  {
    //   barYAxisData.value.push(item)
    // })
  }
  pageInfo.totalPage = Math.floor(
    (pageInfo.total + pageInfo.size - 1) / pageInfo.size
  );
};

const init = () => {
  getChartData();
};

onMounted(() => {
  init();
});

watch(currentCity, () => {
  init();
});

watch(currentDate, () => {
  init();
});
const pageInfo = reactive({
  page: 1,
  size: 10,
  totalPage: 0,
  total: 0,
});
const toPage = (type) => {
  if (type == "down") {
    if (pageInfo.totalPage == pageInfo.page) return;
    pageInfo.page = pageInfo.page + 1;
  } else {
    if (pageInfo.page == 1) return;
    pageInfo.page = pageInfo.page - 1;
  }
  getChartData();
};
</script>

<template>
  <div class="module-block">
    <div>
      <div class="module-block-flex" v-if="barYAxisData.length > 0">
        <div></div>
        <div>
          <img class="img1" v-if="pageInfo.page == 1" @click="toPage('up')"
            src="../../../assets/image/attackScreen/left-table-left.png" />
          <img class="img1" v-if="pageInfo.page > 1 && pageInfo.page == pageInfo.totalPage" @click="toPage('up')"
            src="../../../assets/image/attackScreen/left-table-left-click.png" />
          <img v-if="pageInfo.page == pageInfo.totalPage" @click="toPage('down')"
            src="../../../assets/image/attackScreen/left-table-right.png" />
          <img v-if="pageInfo.page < pageInfo.totalPage" @click="toPage('down')"
            src="../../../assets/image/attackScreen/left-table-right-click.png" />
        </div>
      </div>
    </div>
    <CrossBarChart autoXAxis :xname="'事件数'" :yname="'行业'" :gridTop="115" :gridRight="50" :yAxisData="barYAxisData"
      theme="dark" stack :chartData="barChartData" />
  </div>
</template>

<style lang="scss" scoped>
.module-block {
  width: 100%;
  height: 535px;
}

.module-block-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  position: absolute;
  right: 23px;
  top: 176px;
  z-index: 999;

  img {
    width: 18px;
    height: 18px;
  }

  img:hover {
    cursor: pointer;
  }

  .img1 {
    margin-right: 15px;
  }
}
</style>
