<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/tamperingAttack.vue
 * @Date: 2022-08-31 11:12:48
 * @Description: 
 * @LastEditTime: 2023-08-31 20:05:53
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import CommonCardVue from '../../../components/CommonCard/CommonCard.vue';
import LineChart from '../../../components/chart/LineChart/LineChart.vue'
import BarChart from '../../../components/chart/BarChart/BarChart.vue'
import RingProcessChart from '../../../components/chart/RingProcessChart/RingProcessChart.vue'
import { useGetChartData } from '../../../components/chart/logic'
import { ElScrollbar } from 'element-plus';

const title = ref('近一周域名篡改比例')
const title2 = ref('近一周被篡改域名总量变化情况')
const title3 = ref('被篡改重要域名列表')
const title4 = ref('域名前一周被篡改情况')

const domainTamperCount = ref(0) //篡改域名数
const domainTamperPercent = ref(0) // 占比
const notDomainTamperCount = ref(0) //篡改域名数
const notDomainTamperPercent = ref(0) // 占比

const MODULE_API = 'networkSafeDetect/'
const API_MAP = {
  '近一周域名篡改比例': 'domainSafe/domainTamper/oneWeekRatio',
  '近一周被篡改域名总量变化情况': 'domainSafe/domainTamper/oneWeekTotalChange',
  '被篡改重要域名列表': 'domainSafe/domainTamper/list',
  '域名前一周被篡改情况': 'domainSafe/domainTamper/lastWeekStat'
}

// 近一周域名篡改比例
const getWeekTamperPercent = async () => {
  const { tamperDomainCount = 0, tamperRatio = 0, untamperDomainCount = 0, untamperRatio = 0 } = await useGetChartData(MODULE_API + API_MAP[title.value])
  domainTamperCount.value = tamperDomainCount
  domainTamperPercent.value = tamperRatio.replace('%', '')
  notDomainTamperCount.value = untamperDomainCount
  notDomainTamperPercent.value = untamperRatio.replace('%', '')
}


const lineChartData = ref([]) as any
const linexAxisData = ref([]) as any

const handleTotalRes = (list) => {
  let xAxisData: string[] = []
  let chartData = [
    {
      name: '域名数量',
      data: []
    }
  ] as any
  let _data: number[] = []
  list.forEach(item => {
    xAxisData.push(item.time)
    _data.push(Number(item.tamperCount))
  })
  chartData[0].data = _data
  console.log(xAxisData, 'xAxisData==', chartData)
  return {
    xAxisData,
    chartData
  }
}

const getLineChartData = async () => {
  const { xAxisData, chartData } = await useGetChartData(MODULE_API + API_MAP[title2.value], handleTotalRes)
  linexAxisData.value = xAxisData
  lineChartData.value = chartData
}


const domainListData = ref([]) as any
const currentDomain = ref() as any
const currentPage = ref(1) as any
const pageSize = ref(10) as any
const total = ref(0) as any

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getDomainListData()
}

const handleClickDomain = (item) => {
  currentDomain.value = item.domainName
  getBarChartData()
}

const getDomainListData = async () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }
  const res = await useGetChartData(MODULE_API + API_MAP[title3.value], (res) => res, params)
  const _list = res.rows
  total.value = res.total
  domainListData.value = _list
  currentDomain.value = _list[0].domainName
  getBarChartData()
}


const barChartData = ref([]) as any
const barXAxisData = ref([]) as any

const handleBarRes = (res) => {
  let chartData = [{
    name: '域名被篡改情况',
    data: []
  }] as any
  let xAxisData = [] as any
  let _data = [] as any
  res.forEach(item => {
    xAxisData.push(item.time)
    _data.push(Number(item.tamperCount))
  }
  )
  chartData[0].data = _data
  return {
    xAxisData,
    chartData
  }
}

const getBarChartData = async () => {
  const params = {
    domainName: currentDomain.value
  }
  const { xAxisData, chartData } = await useGetChartData(MODULE_API + API_MAP[title4.value], handleBarRes, params)
  barChartData.value = chartData
  barXAxisData.value = xAxisData
}


const init = () => {
  getWeekTamperPercent()
  getLineChartData()
  getDomainListData()
}

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


</script>

<template>
  <div class="domain-tampering-attack-page">
    <ElRow :gutter="16" class="custom-row" justify="space-between">
      <ElCol :md="10" :lg="8" :xl="6">
        <CommonCardVue :title="title" class="custom-row-item">
          <div class="ring-circle-process-box">
            <div class="ring-process-chart">
              <RingProcessChart :chartData="domainTamperPercent" color="rgba(217, 8, 8, 1)" />
            </div>
            <div class="ring-process-other">
              <div class="name ya-primary-text">篡改域名数</div>
              <div class="count ya-regular-text">{{ domainTamperCount }}</div>
            </div>
          </div>

          <div class="ring-circle-process-box">
            <div class="ring-process-chart">
              <RingProcessChart :chartData="notDomainTamperPercent" color="rgba(0, 149, 255, 1)" />
            </div>
            <div class="ring-process-other">
              <div class="name ya-primary-text">未被篡改域名数</div>
              <div class="count ya-regular-text">{{ notDomainTamperCount }}</div>
            </div>
          </div>
        </CommonCardVue>
      </ElCol>
      <ElCol :md="14" :lg="16" :xl="18">
        <CommonCardVue :title="title2" class="custom-row-item">
          <LineChart :chartData="lineChartData" :xAxisData="linexAxisData" title="域名数/个"
            :areaGradientColor="['rgba(49, 150, 250, 0.3)', 'rgba(49, 150, 250, 0)']" />
        </CommonCardVue>
      </ElCol>
    </ElRow>

    <ElRow class="custom-row mt-16">
      <ElCol :md="10" :lg="9" :xl="8">
        <CommonCardVue :title="title3" class="custom-row-item">
          <div class="domain-list-card">
            <div class="domain-top-card">
              <ElScrollbar>
                <div class="domain-list-card-content">
                  <div class="domain-list-card-item" @click="handleClickDomain(domain)"
                    :class="currentDomain === domain.domainName && 'is-active'" v-for="(domain, index) in domainListData"
                    :key="index">
                    <div class="top">

                      <div class="number-plane">
                        {{ index + 1 }}</div>
                      <div class="top-name">{{ domain.domainName || '' }}</div>
                    </div>

                    <div class="center">
                      <div class="center-text">
                        <div class="center-text-label">备案IP：</div>
                        <div class="center-text-value">{{ domain.recordIp || '' }}</div>
                      </div>
                      <div class="center-text">
                        <div class="center-text-label">解析IP：</div>
                        <div class="center-text-value">{{ domain.resolveIp || '' }}</div>
                      </div>
                    </div>

                    <div class="bottom">
                      <div class="center-text">
                        <div class="center-text-label">发现时间：</div>
                        <div class="center-text-value">{{ domain.time || '' }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </ElScrollbar>
            </div>

            <div class="tampering-page-container">
              <YaPagination v-model:currentPage="currentPage" layout="prev, pager, next"
                @current-change="handleCurrentChange" v-model:page-size="pageSize" small :total="total">
              </YaPagination>
            </div>

          </div>

        </CommonCardVue>
      </ElCol>
      <ElCol :md="14" :lg="15" :xl="16">
        <CommonCardVue :title="title4" class="custom-row-item">
          <BarChart title="次数/次" :chartData="barChartData" :xAxisData="barXAxisData"
            :barGradientColor="['rgba(42, 144, 255, 1)', 'rgba(42, 144, 255, 0.2000)']" />
        </CommonCardVue>
      </ElCol>
    </ElRow>
  </div>
</template>

<style lang="scss" scoped>
.domain-tampering-attack-page {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.custom-row {
  height: calc((100vh - 56px - 40px - 12px - 12px - 16px) / 2);

  .custom-row-item {
    width: 100%;
    height: 100%;
  }
}

.domain-list-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-right: 12px;
  box-sizing: border-box;

  .domain-top-card {
    width: 100%;
    display: flex;
    height: calc(((100vh - 56px - 40px - 12px - 12px - 16px) / 2) - 68px - 8px - 48px);
    margin-top: 9px;
    flex-direction: column;
    box-sizing: border-box;
  }

  .domain-list-card-content {
    width: 100%;
    display: flex;
    height: 100%;
    margin-top: 9px;
    flex-direction: column;
    padding-right: 12px;
    box-sizing: border-box;
  }


  .domain-list-card-item {
    width: 100%;
    height: 102px;
    margin-bottom: 8px;
    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);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    box-sizing: border-box;
    justify-content: space-between;


    .top {
      display: flex;
      align-items: center;
      width: 100%;

      .number-plane {
        width: 32px;
        height: 16px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgBAMAAABQs2O3AAAAIVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt0UjBAAAAC3RSTlMzAC4HJBEpHBgMIMDuLyUAAACpSURBVDjLddO7DcJQEETRJ/6QLX+IoAPoADqADqADuwO7A7sDu1NH7zqZ2XSPtNJoNkWeT1IzG8FNginglOSUgIfcTwLwkmAOOOgLb8BWgyegkvtlZLBLcu6AvQZfQCP3iwD8JFgDzvpCD3AxAjoJVoCLvvAHHDVoATrGTQBMVwBXfaEGuBgBJkaA6wrAdQVQmBgzcF0BuK4AzMsFwMQIcC8HcF0BmJcDDCVuHnykuPw+AAAAAElFTkSuQmCC);
        background-size: 100% 100%;
        font-size: 14px;
        font-family: 'DIN';
        font-weight: bold;
        color: #FFFFFF;
        z-index: 1;
      }

      .top-name {
        font-size: 14px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.8);
        margin-left: 8px;
        max-width: 80%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

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

    .bottom {
      display: flex;
      align-items: center;
    }

    .center-text {
      display: flex;
      align-items: center;
      margin-right: 40px;

      .center-text-label {
        color: rgba(0, 0, 0, 0.6500);
        font-size: 14px;
        font-weight: 400;
      }

      .center-text-value {
        color: rgba(0, 0, 0, 0.4000);
        font-size: 14px;
        margin-left: 4px;
        font-weight: 400;
      }
    }

    .center-text+.center-text {
      margin-left: 16px;
    }

  }

  .domain-list-card-item.is-active {
    background: #0095FF;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);

    .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%;
    }

    .top-name {
      color: #FFFFFF;
    }

    .center-text-label {
      color: #FFFFFF;
    }

    .center-text-value {
      color: #FFFFFF;
    }
  }
}


.tampering-page-container {
  width: 100%;
  height: 48px;
  display: flex;
  padding-right: 12px;
  box-sizing: border-box;
  align-items: center;
  flex-direction: row-reverse;
  margin-top: 20px;
}


.ring-circle-process-box {
  width: 100%;
  height: calc((((100vh - 56px - 40px - 12px - 12px - 16px) / 2) - 68px - 16px - 16px) / 2);
  background: rgba(216, 216, 216, 0.1);
  border-radius: 5px;
  margin-top: 16px;
  display: flex;
  align-items: center;

  .ring-process-chart {
    width: 50%;
    height: 100%;
  }

  .ring-process-other {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

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

    .count {
      margin-top: 16px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4);
    }
  }
}
</style>
