<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/threatComponents/DistributionSecurityIncidents.vue
 * @Date: 2022-09-09 10:12:49
 * @Description: 
 * @LastEditTime: 2023-09-01 17:39:16
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { Teleport, ref, reactive, unref, watch, onMounted } from "vue";
import screenDetailBg from "../../../assets/image/screen/screenDetailBg.png";
import screenDetailHeaderBg from "../../../assets/image/screen/screenDetailHeaderBg.png";
import screenDetailContentBg from "../../../assets/image/screen/screenDetailContentBg.png";
import CrossBarChart from "../../../components/chart/CustomChart/CrossBarChart.vue";
import { useGlobalThreatEvent } from "../logic/useGlobalThreatEvent";
import { useGetChartData } from "../../../components/chart/logic";
import { bigNumberTransform } from "../../../utils/utils";
import ProgressBar from "../../../components/ProgressBar/ProgressBar.vue";
import { getThemeColor } from "../../../components/chart/options/theme";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const { currentCity, currentDate } = useGlobalThreatEvent();
const dataListOne = ref([]);
const dataList = ref([]) as any;

const handleResData = (res) => {
  let list = [] as any;
  return res.map((item) => {
    return {
      eventName: item.eventName,
      eventSum: item.eventSum,
      unit: item.unit,
      percentage: item.percentage
        ? item.percentage.split("%")[0]
        : item.percentage,
    };
  });
};

const getChartData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  const res = await useGetChartData(
    "/threatIncidentScreen/queryEventNameSum",
    handleResData,
    params
  );
  dataList.value = res || [];
  dataList.value.forEach((item) => {
    item.eventSum = bigNumberTransform(item.eventSum);
  });
  if (dataList.value.length > 10) {
    dataList.value.forEach((item, index) => {
      if (index < 10) {
        dataListOne.value.push(item);
      }
    });
  } else {
    dataListOne.value = dataList.value;
  }
};
const dialogTitle = ref([
  {
    name: "排名",
    type: "安全事件类型",
    num: "事件数",
  },
  {
    name: "排名",
    type: "安全事件类型",
    num: "事件数",
  },
  {
    name: "排名",
    type: "安全事件类型",
    num: "事件数",
  },
]);

const detailShow = ref(false);
const detailDailog = reactive({
  showDialog: false,
  title: "安全事件类型分布",
});
const handleClose = () => {
  if (mapData?.en === "anhui") {
    detailDailog.showDialog = true;
    return;
  }
  detailShow.value = !detailShow.value;
};
const init = () => {
  dataListOne.value = [];
  dataList.value = [];
  getChartData();
};

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

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

watch(currentDate, () => {
  init();
});
</script>

<template>
  <div class="module-block">
    <div class="mores" @click="handleClose" v-if="dataListOne.length > 10">
      <img src="../../../assets/image/screen/threat-event/more.png" alt="" />
    </div>
    <div class="module-block-center">
      <div class="module-block-center-flex" v-for="(item, index) in dataListOne" :key="index">
        <div class="left">
          <div class="left-top">
            <div class="index">
              <img src="../../../assets/image/screen/threat-event/riskevent1.png" v-if="index == 0" alt="" />
              <img src="../../../assets/image/screen/threat-event/riskevent2.png" v-if="index == 1" alt="" />
              <img src="../../../assets/image/screen/threat-event/riskevent3.png" v-if="index == 2" alt="" />
              <img src="../../../assets/image/screen/threat-event/riskevent4.png" v-if="index > 2" alt="" />
              <span>TOP{{ index + 1 }}</span>
            </div>
            <div class="name">
              <div class="flex-bt">
                <div class="label">
                  <img src="../../../assets/image/screen/threat-event/riskevent5.png" alt="" />{{ item.eventName || "-" }}
                </div>
                <div class="count">{{ item.eventSum }}</div>
              </div>
            </div>
          </div>
          <div>
            <ProgressBar :color="'linear-gradient(90deg, rgba(38,156,200,0), #22D3E3)'" :percentage="item.percentage"
              backgroundColor="rgba(15, 37, 66, 1)"></ProgressBar>
          </div>
        </div>
      </div>
      <ya-empty class="ya-empty" v-if="!dataList.length"></ya-empty>
    </div>
    <Teleport to="body">
      <div class="mask-box" v-if="detailShow">
        <div class="custom-dialog">
          <img :src="screenDetailBg" alt="" class="custom-dialog-bg" />
          <img :src="screenDetailHeaderBg" alt="" class="custom-dialog-header" />
          <img @click.stop="handleClose"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAABACAMAAAA58ft6AAABU1BMVEUAKEoAAAAdQF4rTGjn6u7f4+cmSGXg5Oje4+cfQl8AgfLZ3+PV2+EhRGEaPVsAhvoAhPYWO1kALlQCivzr7vHc4eYAfenk6Ozi5uvy9PXv8fPp7O85WXIyUm0jRmIAMl0Afu0AeuUARH4AX7IAX6kAeeIAdtsBb84Ba8QBZroAd98AP3UAdNoAO2wAN2UBbssCasECZ74BY7UAYbUAX60AXKwAc5kBc9UCYbEBXagCT48UOVcAc9YAcdEAbs8CZ7oCZLkAY7Lh5enN1du2wssCWKECVZsCUpZof5NVcIUDbscDbcYCa8T///8AiP8eu/8du/8gv/8ZtP8Cjf8Uq/8PpP8Il/8Fkv8Sp/8NoP8Ej/8fvv8evf8Lm/8Jmf8GlP8Wrv8Vrf8Oov8bt/8Bi/8cuf8Rpv8Ysv8WsP8atf8Mnv8Djv8Kmv8Hlf8Sqf8Lnf8Spv8oQSfDAAAATXRSTlPXANvd+vnc+fnb+vj329r9/NrZ/vv49vr5/Pz6397b2/ju4S0M9/by8O7m397e3LqSgVZHHxUF9Ozq5dnXz8VyZTr59vHo5+bl4rGon8byxNwAAAOWSURBVGje5dtLV9NAFMDxm1Io0BaKtEDLQ3wrovh+4RNQQW0SDAjSAiJtAUOB779y7mTq7ekhC9vMhCT/M6vufudmmpPFBU2b092qiCyebdm2veW04bS7scur1+s/RDtOx9g2dnrKzh/WT95v0bqoxjvbFJ2crK2xg+2t7bF+iQ6xg8MD7LvoiLXPqzqZVdM0DNNglbFSubTKA83dWUEoMbnSdpQCSkpWi3MHlTyGZFDhJCk5z85qtc1aw8mkwomRlDt5pESngHKqyTN43FkqCSbrrT54FUIcMiPgRGYEnMh0ehNmJzIj4EQmOTN3IZyVmpjPXofWidOMgBOnGQGnM01yzuqZexC+nGlS12f1/hA6kRkB52oJtAg4aZrknNH770O4QqZvzpXk0jy4lF7ML3vIpIeWejqjT6twZovFlIuzL1EsFqRMU70zV2TOITdlMSVrmuS8ok9fBtlN5LnTRTneJZFJzhHfnH3dpJTCpJ6ocRYYKElOUsZRKYmp3jnJnQPQVMx7JZSR6eq8ocCZJWeTsgdkM8k5otApVQmlMmiuXWPOSyC7LnTmBpqUo6j0fJq+O8f/OWO9EpTIpGm6OG8qcMbRGWsopwDzfJr+O3vQ2RvjyjFUqmKSc1qJcxSdXJkGSvpDS31Q4pwaK/IWSKmGSc5+/bl8ZzqByoQcJRiMeSGcLUx106Qey3emF1BJf0BqmeS8BTJL49XslfPSxAwDNP+dU2P0QomTU9ndJGemIslJSoBYjj5OVE6TepSRMU96aXbHgDWQow9qxdMk522gpCiFM4tO1dMkZ0WGsydOSnQm0TmpnknOQXRKVZJTOZN6772ziyv7AFqchUk/mOS8I0tJDXHnhASmeid9UCcaSnKm2M95L50mMv+jd8PolKokp5RpqnemhNLFmfOFSc4X4E0FoXRxZn14aKmHnjmX84tpcGl+KbniG5OcwQof2jac1ksIVG0xcZ7BcpomaG30wArWPPFutun8CMHJYNOMgBOn2bbzEwQlvJtt9s2yA+NEZgfOzxCMkNl2Xy0rIE68mx05X0EQwml20JeAOJHZmXM4CE58aDtqzrYtWo9r7I3RflzdWRvjm2PH7Bxvs0ObY617Y+vO4liNb47h4pjTCdbYG2OHJdbGcHHswEnsjbFztM83x6rsYCYLtI6dW+etAWIta4AoJeQprQFi564BIpOHSMEUta4BolJEa4CCWUVmJPoLErTE6ocKNHEAAAAASUVORK5CYII="
            class="custom-dialog-header-close" alt="" />
          <div class="custom-header-text">安全事件类型分布</div>
          <img :src="screenDetailContentBg" alt="" class="custom-dialog-content-bg" />
          <div class="custom-dialog-content">
            <div class="custom-dialog-content-title-bg">
              <div class="custom-dialog-content-title-centent">
                <el-row>
                  <el-col :span="8" :class="index < 2 ? 'border-right' : ''" v-for="(item, index) in dialogTitle">
                    <div class="custom-dialog-content-title">
                      <div class="custom-dialog-content-flex">
                        <div class="custom-dialog-content-name">
                          {{ item.name }}
                        </div>
                        <div>{{ item.type }}</div>
                      </div>
                      <div class="custom-dialog-content-num">
                        {{ item.num }}（个）
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-row>
                <el-col :span="8" class="border-right custom-dialog-content-center" v-for="(item, index) in dataList">
                  <div class="custom-dialog-content-title">
                    <div class="custom-dialog-content-flex">
                      <div class="custom-dialog-content-name num" :class="index == 0
                        ? 'first'
                        : index == 1
                          ? 'second'
                          : index == 2
                            ? 'third'
                            : ''
                        ">
                        {{ index + 1 }}
                      </div>
                      <div class="flex-one">{{ item.eventName || "-" }}</div>
                    </div>
                    <div class="custom-dialog-content-num">
                      {{ item.eventSum }}
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <!-- 查看-->
      <div class="ya-dialog-info">
        <YaDialog custom-class="DistributionSecurityIncidentsDialog" :dialogProps="detailDailog">
          <template #content>
            <div class="custom-dialog-content">
              <div class="custom-dialog-content-title-bg">
                <div class="custom-dialog-content-title-centent">
                  <el-row>
                    <el-col :span="8" :class="index < 2 ? 'border-right' : ''" v-for="(item, index) in dialogTitle">
                      <div class="custom-dialog-content-title">
                        <div class="custom-dialog-content-flex">
                          <div class="custom-dialog-content-name">
                            {{ item.name }}
                          </div>
                          <div>{{ item.type }}</div>
                        </div>
                        <div class="custom-dialog-content-num">
                          {{ item.num }}（个）
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <el-row>
                  <el-col :span="8" class="border-right custom-dialog-content-center" v-for="(item, index) in dataList">
                    <div class="custom-dialog-content-title">
                      <div class="custom-dialog-content-flex">
                        <div class="custom-dialog-content-name num" :class="index == 0
                          ? 'first'
                          : index == 1
                            ? 'second'
                            : index == 2
                              ? 'third'
                              : ''
                          ">
                          {{ index + 1 }}
                        </div>
                        <div class="flex-one">{{ item.eventName || "-" }}</div>
                      </div>
                      <div class="custom-dialog-content-num">
                        {{ item.eventSum }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </template>
        </YaDialog>
      </div>
    </Teleport>
  </div>
</template>

<style lang="scss" scoped>
.module-block {
  width: 100%;
  // height: 500px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: Regular;
  flex: 1;

  // margin-top: 10px;
  .mores {
    position: absolute;
    top: 4px;
    right: 60px;
    font-size: 14px;
    font-weight: 400;
    color: #51c8f7;

    img {
      width: 45px;
      height: 25px;
    }
  }

  .mores:hover {
    cursor: pointer;
  }

  .ya-empty {
    position: relative;
    top: 50px;
  }

  .index {
    width: 36px;
  }

  .name {
    flex: 1;

    .label {
      display: flex;
      align-items: center;
      font-weight: 500;
      color: #8cecff;
      font-size: 16px;

      img {
        width: 30px;
        height: 30px;
        position: relative;
        left: 15px;
        top: 4px;
        margin-right: 15px;
      }

      // margin-left: ;
    }

    .count {
      font-size: 16px;
      font-weight: 400;
      color: #93e5f6;
      font-family: PangMenZhengDao;
    }
  }

  .number {
    flex: 1;
    text-align: right;
  }

  .module-block-center {
    height: 100%;

    .module-block-center-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 12px;
      height: 10%;

      // padding-right: 20px;
      // margin-bottom: 3px;
      .left {
        // display: flex;
        // align-items: center;
        flex: 1;

        .left-top {
          display: flex;
          align-items: center;

          .index {
            position: relative;
            font-size: 10px;

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

            span {
              position: absolute;
              top: 0;
              text-align: center;
              display: inline-block;
              width: 48px;
            }
          }
        }
      }

      .index-item {
        height: 16px;
        line-height: 16px;
        width: 25px;
        text-align: center;
        background: #565f61;
        // border-radius: 5px 0px 5px 0px;
        color: #fff;
        font-size: 12px;
      }

      // .parallelogram {
      //   width: 200px;

      //   height: 120px;
      //   transform:skew(-30deg);
      //   -webkit-transform: skew(-30deg);
      //   -moz-transform: skew(-30deg);
      //   -o-transform:skew(-30deg);
      //   -ms-transform:skew(-30deg);
      //   background-color: red;
      //   margin: 50px auto;
      // }

      .index-item-first {
        background: #f7cf54;
        color: #3a3a3a;
      }

      .index-item-second {
        background: #be7e6e;
        color: #3a3a3a;
      }

      .index-item-third {
        background: #8ab3ac;
        color: #3a3a3a;
      }
    }
  }

  .flex-bt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-bottom: 5px;
  }
}

.mask-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-dialog {
  width: 1214px;
  height: 625px;
  position: relative;

  .custom-dialog-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .custom-dialog-header {
    width: 1101px;
    height: 51px;
    position: absolute;
    top: 10px;
    left: 15px;
  }

  .custom-header-text {
    position: absolute;
    top: 28px;
    left: 45px;
    font-size: 20px;
    font-family: "PangMenZhengDao";
    color: #ffffff;
    line-height: 23px;
    letter-spacing: 3px;
    text-shadow: 0px 0px 8px #008aff;
  }

  .custom-dialog-header-close {
    width: 115px;
    height: 32px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
  }

  .custom-dialog-content-bg {
    width: 1182px;
    height: 532px;
    position: absolute;
    top: 76px;
    left: 16px;
  }

  .custom-dialog-content {
    width: 1182px;
    height: 532px;
    position: absolute;
    top: 76px;
    left: 16px;
    color: #fff;
    font-family: Arial;
    font-weight: 400;
    color: #ffffff;
    padding: 16px;
    box-sizing: border-box;
    word-break: break-all;
    overflow-y: auto;
  }
}

.custom-dialog-content-title-bg {
  border: 1px solid #58b4d5;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;

  .custom-dialog-content-title-centent {
    height: 28px;
    line-height: 28px;
    background: #13426b;
  }

  .border-right {
    border-right: 1px dashed rgba(88, 180, 213, 0.3);
  }

  .custom-dialog-content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .custom-dialog-content-flex {
      display: flex;
      align-items: center;
    }

    .custom-dialog-content-name {
      width: 50px;
      margin-left: 20px;
      // margin-right: 10px;
    }

    .num {
      width: 25px;
      height: 16px;
      line-height: 16px;
      background: #364d73;
      border-radius: 5px 0px 5px 0px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      margin-right: 25px;
    }

    .first {
      background: #fc8b18;
    }

    .second {
      background: #bfb035;
    }

    .third {
      background: #9b78dc;
    }

    .custom-dialog-content-num {
      width: 100px;
      text-align: right;
      padding-right: 22px;
    }
  }

  .custom-dialog-content-center {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(88, 180, 213, 0.3);
    // height: 28px;
    // line-height: 28px;
  }

  .flex-one {
    flex: 1;
  }

  .custom-dialog-content-center:nth-last-child(1) {
    border-bottom: none;
  }
}
</style>
