<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/attackEvent/FlowBack.vue
 * @Date: 2022-09-15 15:05:58
 * @Description: 
 * @LastEditTime: 2023-08-31 14:51:39
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, unref, reactive, watch, onMounted, computed } from 'vue'
import FlyLineWorldMap from "../../../components/chart/map/FlyLineWorldMap.vue";
import { getContryItemIcon } from "../../../assets/js/countryFlagBase64";
import { ElRow, ElCol, ElScrollbar } from "element-plus";
import { useGetChartData } from "../../../components/chart/logic/useGetChartData";
import { useIntervalFn, tryOnUnmounted } from "@vueuse/core";
import { getThemeColor } from "../../../components/chart/options/theme";
import { mapMapping } from "../../../assets/map/provinceData";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
const colorList = getThemeColor().colorList || [];
const mapData = reactive(mapMapping());
const ddosPage = ref(1);
const ddosTotal = ref(0);
const ddosList = ref([]) as any;
const ddosPageSize = ref(10);
const ddosListApi =
  "/networkSafeDetect/ddosAttackEvent/flowRecall/queryAttackEvent";
const activeDdosIp = ref("") as any;
const startTime = ref("");
const endTime = ref("");
const sumDate = ref("");
const handleDdosListClick = (item: any) => {
  if (unref(activeIndex) == item.jindex) return;
  unref(pause)();
  activeDdosIp.value = item.attackedIp;
  endTime.value = item.endTime;
  startTime.value = item.startTime;
  sumDate.value = item.attackData;
  activeIndex.value = item.jindex;
};
const activeIndex = ref(1);

// watch(activeDdosIp, (val) => {
//   if (val) {
//     initOther()
//   }
// })

watch(activeIndex, (val) => {
  if (val) {
    initOther();
  }
});

const { pause, resume, isActive } = useIntervalFn(() => {
  // const _currentActiveIpIndex = unref(ddosList).findIndex((item: any) => item.goalIp === unref(activeDdosIp))
  const _currentActiveIpIndex = unref(ddosList).findIndex(
    (item: any) => item.jindex === unref(activeIndex)
  );
  let _nextIndex = _currentActiveIpIndex + 1;
  if (_currentActiveIpIndex === unref(ddosList).length - 1) {
    _nextIndex = 0;
  }
  activeDdosIp.value = unref(ddosList)[_nextIndex]?.attackedIp;
  activeIndex.value = unref(ddosList)[_nextIndex]?.jindex;
  endTime.value = unref(ddosList)[_nextIndex]?.endTime;
  startTime.value = unref(ddosList)[_nextIndex]?.startTime;
  sumDate.value = unref(ddosList)[_nextIndex]?.attackData;
}, 3000);

tryOnUnmounted(() => {
  unref(pause)();
});

const handleDdosPageChange = (val: number) => {
  unref(pause)();
  ddosPage.value = val;
  getDDosList(false);
  unref(resume)();
};

const currentIpData = computed(() => {
  if (activeDdosIp.value) {
    return ddosList.value.find(
      (item: any) => item.attackedIp === activeDdosIp.value
    );
  }
  return {};
});

const getDDosList = async (init) => {
  if (init) {
    ddosPage.value = 1;
  }
  const params = {
    pageNum: unref(ddosPage),
    pageSize: unref(ddosPageSize),
  };
  const res = await useGetChartData(ddosListApi, (res) => res, params);
  if (res) {
    ddosList.value =
      res?.rows?.map((item, index) => {
        item.jindex =
          (ddosPage.value - 1) * ddosPageSize.value + index + 1 > 9
            ? (ddosPage.value - 1) * ddosPageSize.value + index + 1
            : `${(ddosPage.value - 1) * ddosPageSize.value + index + 1}`;
        item.jindex = Number(item.jindex);
        return item;
      }) || [];
    console.log(
      ddosList.value,
      typeof res.total,
      "ddosList.valueddosList.value"
    );
    ddosTotal.value = parseInt(res.total);
    activeDdosIp.value = ddosList.value[0] && ddosList.value[0].attackedIp;
    startTime.value = ddosList.value[0] && ddosList.value[0].startTime;
    endTime.value = ddosList.value[0] && ddosList.value[0].endTime;
    sumDate.value = ddosList.value[0] && ddosList.value[0].attackData;
    initOther();
  }
};

const initOther = () => {
  getMapChartData();
  getTableData(1, true);
  getTableData(2, true);
};

const attackTableColumn = [
  // {
  //   prop: "serialNumber",
  //   label: "序号",
  //   width: 80,
  // },
  {
    prop: "attackIp",
    label: "攻击IP",
    width: 165,
    fixed: "left",
  },
  {
    prop: "attackOperator",
    label: "运营商",
    width: 100,
  },
  // {
  //   prop: "attackEnterprise",
  //   label: "单位",
  //   width: 80,
  // },
  {
    prop: "address",
    label: "所属地",
    minWidth: 130,
    slotName: "countries",
  },
  {
    prop: "attackData",
    label: "攻击流量",
    width: 160,
  },
  {
    prop: "attackProportion",
    label: "流量占比",
    width: 110,
  },
];
const attackTableData = ref([]) as any;
const attackPage = ref(1);
const attackTotal = ref(0);
const attackApi =
  "/networkSafeDetect/ddosAttackEvent/flowRecall/queryAttackInformation";
const handleAttackPageChange = (val: number) => {
  attackPage.value = val;
  getTableData(1, false);
};

const attackSourceTableData = ref([]) as any;
const attackSourceApi =
  "/networkSafeDetect/ddosAttackEvent/flowRecall/queryAttackSourceLocation";
const attackSourceTableColumn = [
  // {
  //   prop: "serialNumber",
  //   label: "序号",
  //   width: 80,
  // },
  {
    prop: "address",
    label: "所属地",
    minWidth: 140,
    slotName: "countries",
  },
  {
    prop: "attackData",
    label: "攻击流量",
    width: 160,
  },
  {
    prop: "attackProportion",
    label: "流量占比",
    width: 110,
  },
];
const attackSourcePage = ref(1);
const attackSourceTotal = ref(0);
const handleAttackSourcePageChange = (val: number) => {
  attackSourcePage.value = val;
  getTableData(2, false);
};

const chartData = ref([]) as any;
const chartApi =
  "/networkSafeDetect/ddosAttackEvent/flowRecall/queryAttackSourceLocation";
const targetCoordinates = mapData?.coord[0].center;

const getMapChartData = async () => {
  const params = {
    goalIp: unref(activeDdosIp),
    startTime: unref(startTime),
    endTime: unref(endTime),
    sumDate: unref(sumDate),
  };
  const res = await useGetChartData(chartApi, (res) => res, params);
  if (!res) return;
  chartData.value = res.map((item) => {
    item.state = item.attackCountry;
    return item;
  });
};

const tooltipFormatter = function (params) {
  const { attackData = "", attackProportion = "", unit = "" } = params.data;
  return `<div class="light-map-tip-box">
      <div class="light-map-tip-box-content">
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">攻击流量</div>
          <div class="light-map-tip-box-value">${attackData || 0}${unit}</div>
        </div>
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">流量占比</div>
          <div class="light-map-tip-box-value">${attackProportion || 0}</div>
        </div>
      </div>

    </div>`;
};

const handleResData = (list) => {
  return list.map((item, index) => {
    return {
      ...item,
      serialNumber: index + 1 < 10 ? index + 1 : index + 1,
      countryIcon: getContryItemIcon("name", item.attackCountry),
    };
  });
};

const getTableData = async (type, init) => {
  const isAttack = type === 1;
  const _api = isAttack ? attackApi : attackSourceApi;
  if (init) {
    if (isAttack) {
      attackPage.value = 1;
    } else {
      attackSourcePage.value = 1;
    }
  }
  const params = {
    // pageNum: isAttack ? unref(attackPage) : unref(attackSourcePage),
    // pageSize: 5,
    goalIp: unref(activeDdosIp),
    startTime: unref(startTime),
    endTime: unref(endTime),
    sumDate: unref(sumDate),
  };
  const res = await useGetChartData(_api, (res) => res, params);
  if (res) {
    if (isAttack) {
      // attackTotal.value = res.total
      attackTableData.value = handleResData(res);
    } else {
      // attackSourceTotal.value = res.total
      attackSourceTableData.value = handleResData(res);
    }
  }
};

const init = () => {
  getDDosList(true);
};

onMounted(() => {
  init();
});
</script>

<template>
  <div class="flow-back-container ya-bg-colors">
    <ElCol :md="8" :lg="6" :xl="6">
      <CommonCardVue class="ya-ddos" title="近24小时DDoS攻击事件列表">
        <div class="left-box">
          <!-- <div class="title-box">
          <div class="title prefix ya-primary-text">
            近24小时DDoS攻击事件列表
          </div>
        </div> -->
          <div class="list-box">
            <ElScrollbar v-if="ddosList.length">
              <div class="list-box-card-wrap">
                <div class="list-box-card" @click="handleDdosListClick(ditem)" :class="activeIndex === ditem.jindex
                  ? 'is-active ya-primary-bg-color'
                  : ' ya-fill-color'
                  " v-for="(ditem, index) in ddosList" :key="index">
                  <!-- <div class="number-plane">{{ ditem.jindex }}</div> -->
                  <div class="list-box-card-right">
                    <div class="name-ip ya-primary-text">
                      目的IP：{{ ditem.attackedIp }}
                    </div>
                    <div class="time ya-regular-text" :class="activeIndex === ditem.jindex && 'is-active-color'">
                      {{ ditem.startTime }}
                    </div>
                  </div>
                </div>
              </div>
            </ElScrollbar>
            <ya-empty v-else></ya-empty>
          </div>
          <div class="page-box" v-if="ddosList.length">
            <YaPagination :pageSize="ddosPageSize" :currentPage="ddosPage" layout="prev, pager, next"
              @currentChange="handleDdosPageChange" small :total="ddosTotal">
            </YaPagination>
          </div>
        </div>
      </CommonCardVue>
    </ElCol>
    <ElCol :md="16" :lg="18" :xl="18">
      <div class="right-box">
        <div class="right-box-con">
          <div class="right-box-title ya-primary-text">{{ activeDdosIp }}</div>
          <div class="right-box-tags">
            <div class="tags-info blueness-tag" :style="{
              color: colorList[0],
              borderColor: colorList[0],
            }">
              地理位置：{{ currentIpData.location || "-" }}
            </div>
            <div class="tags-info blue-tag" :style="{
              color: colorList[1],
              borderColor: colorList[1],
            }">
              运营商：{{ currentIpData.operator || "-" }}
            </div>
            <div class="tags-info yellow-tag" :style="{
              color: colorList[2],
              borderColor: colorList[2],
            }">
              单位：{{ currentIpData.attackedEnterprise || "-" }}
            </div>
            <div class="tags-info orange-tag" :style="{
              color: colorList[3],
              borderColor: colorList[3],
            }">
              被攻击流量：{{ currentIpData.attackData || "-" }}
            </div>
            <div class="tags-info" :style="{
              color: colorList[4],
              borderColor: colorList[4],
            }">
              开始时间：{{ currentIpData.startTime || "-" }}
            </div>
            <div class="tags-info" :style="{
              color: colorList[5],
              borderColor: colorList[5],
            }">
              结束时间：{{ currentIpData.endTime || "-" }}
            </div>
            <div class="tags-info green-tag" :style="{
              color: colorList[6],
              borderColor: colorList[6],
            }">
              攻击类型：{{ currentIpData.protocol || "-" }}
            </div>
          </div>
          <div class="word-chart-box">
            <FlyLineWorldMap :tooltipFormatter="tooltipFormatter" :chartData="chartData"
              :targetCoordinates="targetCoordinates" />
          </div>
          <div class="bottom-table-box">
            <ElCol :md="14" :lg="14" :xl="14" style="margin-right: 20px">
              <CommonCardVue title="攻击者流量TOP10">
                <div class="left-table">
                  <div>
                    <YaTable class="custom-table-attack" :data="attackTableData" :column="attackTableColumn">
                      <template #countries="{ item }">
                        <div class="countries-table-column">
                          <img :src="item.countryIcon" alt="" class="country-icon" />
                          <div class="countries-name ya-primary-text">
                            {{ item.address }}
                          </div>
                        </div>
                      </template>
                    </YaTable>
                    <!-- <div class="page-box">
                    <YaPagination :pageSize="5" :currentPage="attackPage" layout="prev, pager, next"
                      @currentChange="handleAttackPageChange" small :total="attackTotal">
                    </YaPagination>
                  </div> -->
                  </div>
                </div>
              </CommonCardVue>
            </ElCol>
            <ElCol :md="10" :lg="10" :xl="10">
              <CommonCardVue title="攻击者地域流量TOP10">
                <div class="right-table">
                  <div style="padding-right: 0">
                    <YaTable class="custom-table-attack" :data="attackSourceTableData" :column="attackSourceTableColumn">
                      <template #countries="{ item }">
                        <div class="countries-table-column">
                          <img :src="item.countryIcon" alt="" class="country-icon" />
                          <div class="countries-name ya-primary-text">
                            {{ item.address }}
                          </div>
                        </div>
                      </template>
                    </YaTable>

                    <!-- <div class="page-box">
                      <YaPagination :pageSize="5" :currentPage="attackSourcePage" layout="prev, pager, next"
                        @currentChange="handleAttackSourcePageChange" small :total="attackSourceTotal">
                      </YaPagination>
                    </div> -->
                  </div>
                </div>
              </CommonCardVue>
            </ElCol>
          </div>
        </div>
      </div>
    </ElCol>
  </div>
</template>

<style lang="scss" scoped>
.ya-ddos {
  :deep .title-center {
    overflow: hidden; // 济南直联点
    width: 100%;
  }
}

.flow-back-container {
  width: 100%;
  height: calc(100% - 12px);
  // background: #FFFFFF;
  border-radius: 4px;
  display: flex;

  .left-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // padding: 16px 0;
    box-sizing: border-box;

    // border: 1px solid #ffffff;
    .title-box {
      height: 20px;
      box-sizing: border-box;
    }

    .list-box {
      flex: 1;
      width: 100%;
      margin-top: 12px;
      overflow: auto;
      // padding: 0 10px 0 24px;
      box-sizing: border-box;

      .list-box-card-wrap {
        width: 100%;
        height: 100%;
        // padding-right: 14px;
        box-sizing: border-box;
      }

      .list-box-card {
        width: 100%;
        padding: 12px 16px;
        box-sizing: border-box;
        background: linear-gradient(90deg,
            rgba(0, 149, 255, 0) 0%,
            rgba(0, 149, 255, 0.05) 100%);
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        cursor: pointer;
        margin-bottom: 8px;
      }

      .list-box-card.is-active {
        // background: #0095ff !important;

        .number-plane {
          color: #0095ff;
          background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMzIgMTYiIHZlcnNpb249IjEuMSI+CiAgICA8dGl0bGU+55m96Imy5Y+N6YCJ5o6S5ZCNPC90aXRsZT4KICAgIDxnIGlkPSLnvZHnu5zlronlhajnm5HmtYvmqKHlnZciIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLln5/lkI3nr6HmlLnmlLvlh7vliIbmnpAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTEuMDAwMDAwLCAtNjAzLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iMy7mlbDmja7lvZXlhaUvNi5EYXRlUGlja2Vy5pel5pyf6YCJ5oup5qGGL+aXpeacn+WMuumXtOWkh+S7vS0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTUuMDAwMDAwLCA1ODguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0i55m96Imy5Y+N6YCJ5o6S5ZCNIiBwb2ludHM9IjI1LjQ3Mjg0MzQgMTUgNDggMTUgMzguNTI3MTU2NiAzMSAxNiAzMSIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
          background-size: 100% 100%;
        }

        .name-ip {
          font-weight: 600;
          color: #ffffff;
        }

        .time {
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .number-plane {
        width: 32px;
        height: 16px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAAXNSR0IArs4c6QAAAbNJREFUSEutlD9IG1Ecx7+/xIRgsBRcCg4dujiotFOHFgqCQx00W+4GYwbp0EuhKNZe6nCLd5FSEXvpEijWgLlsUSh0KAWhU5ciZujg4ODgKEraNLb3Ewv9p/HdL3BvfZ/3/X74Pd4jCJdmODbAphCXYYQqSUjNsG8D+AigS8ILmYM4MBAokM1aiWYy/hlAvzBYhDH8VLU4vxEooBuFFwx/WpQqhIhoreKak2e4UkB/WLjL5G8BiAizBRjtN2PfB2vL1qFSYGLiefLkSmsboBuCVCnCFKXRyor57veBSyegGbYLwJAmizhCyXPzD/5l2wroOWfY9/k9kfqKRKV/ob2v36JDm6/njpUCY08We7obP3cAXO+wQIX7RDRScc0P56ELE9ANp8TgqRDLASLXc81H7TL/E0jnFu4T09ug19Gh3G7sKHazXJ5tKAVSj62riZN4HUBfhwXq0XPkXuXV07NftO36MwE957xh5kyI5WBgqVrMz6gyfwmkjcI4wa+FWQ7gS6LRurW6ajWVAhnD7m2B6gBfC1HgRyQSvbP+cu5TUCZpOdsDIx0EdrbPjld8lpecOQXtsXhlLPRehQAAAABJRU5ErkJggg==);
        background-size: 100% 100%;
        font-size: 14px;
        font-family: "DIN";
        font-weight: bold;
        color: #ffffff;
        z-index: 1;
        margin-right: 8px;
        margin-top: 3px;
      }

      .list-box-card-right {
        width: 100%;
        display: flex;
        flex-direction: column;

        .name-ip {
          font-size: 14px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.8);
        }

        .time {
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
          margin-top: 8px;
        }
      }
    }

    .page-box {
      height: 22px;
      box-sizing: border-box;
      margin-top: 16px;
      width: 100%;
      flex-shrink: 0;
      // padding: 0 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row-reverse;
    }
  }

  .prefix {
    position: relative;
  }

  .prefix::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    width: 3px;
    height: 14px;
    background: #0095ff;
  }

  .title-box {
    min-width: 0;
    // padding: 0 24px;
    box-sizing: border-box;
  }

  .title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    padding-left: 11px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .right-box {
    width: 100%;
    height: 100%;
    position: relative;

    .right-box-con {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 20px 24px;
      box-sizing: border-box;
      padding-bottom: 2px;
    }

    .right-box-title {
      font-size: 30px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.8);
    }

    .right-box-tags {
      margin-top: 5px;
      display: flex;

      .tags-info {
        --tag-color: rgba(0, 0, 0, 0.3);
        padding: 0 8px;
        height: 20px;
        box-sizing: border-box;
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        color: var(--tag-color);
        border: 1px solid var(--tag-color);
        border-radius: 2px;
        white-space: nowrap;
      }

      .tags-info+.tags-info {
        margin-left: 8px;
      }

      .blueness-tag {
        --tag-color: #0095ff;
      }

      .orange-tag {
        --tag-color: #fe7f09;
      }

      .green-tag {
        --tag-color: #4e9b40;
      }

      .blue-tag {
        --tag-color: #45bcca;
      }

      .yellow-tag {
        --tag-color: #f1d13d;
      }
    }

    .word-chart-box {
      min-height: 0;
      flex: 1;
    }

    .bottom-table-box {
      width: 100%;
      box-sizing: border-box;
      display: flex;

      ::v-deep .el-table__body-wrapper {
        height: 235px;
      }

      .custom-table-attack {
        margin-top: 12px;
      }

      .page-box {
        display: flex;
        margin-top: 12px;
        flex-direction: row-reverse;
      }

      .left-table {
        width: 100%;
        box-sizing: border-box;
      }

      .right-table {
        width: 100%;
        box-sizing: border-box;
      }
    }
  }
}

.countries-table-column {
  .country-icon {
    width: 18px;
    height: 14px;
    margin-right: 4px;
    display: inline-block;
    vertical-align: -2px;
  }

  .countries-name {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
  }
}

.is-active-color {
  color: rgba(255, 255, 255, 0.8) !important;
}
</style>
