<template>
  <div style="width: 100%; height: 100%">
    <div class="commontitle">
      <div class="left">
        <span>今日场景预警次数</span>
        <img src="/static/screen/img/titleIcon.png" alt="" />
      </div>
      <div class="right"></div>
    </div>
    <div style="display: flex">
      <div class="safe myborder1">
        <div class="commonTitle1">
          <span class="left">校园安全</span>
          <span class="right"
            >预警次数：<span class="num">{{ typeStatistiCount }}</span></span
          >
        </div>
        <div style="height: 410px; margin-top: 18px; overflow-y: auto">
          <ul>
            <template v-for="(item, index) in typeStatisti" :key="index">
              <li>
                <div class="title">
                  <span class="top">Top{{ index + 1 }}</span>
                  <span class="title_">{{ item.name }}</span>
                </div>
                <div class="progressBox">
                  <el-progress
                    :percentage="item.value"
                    :show-text="false"
                    :stroke-width="8"
                    style="width: 100%"
                    :color="
                      index == 0
                        ? 'linear-gradient(to right,rgba(226,74,59,0.01),rgba(226,74,59,1))'
                        : index == 1
                        ? 'linear-gradient(to right,rgba(246,152,14,0.01),rgba(246,152,14,1))'
                        : 'linear-gradient(to right,rgba(55,116,237,0.01),rgba(55,116,237,1))'
                    "
                  />
                </div>
                <div class="num">{{ item.value }}次</div>
              </li>
            </template>
          </ul>
        </div>
      </div>
      <div class="cate">
        <ul>
          <template v-for="(item, index) in groupStatisti" :key="index">
            <li class="myborder1">
              <div class="commonTitle1">
                <span class="left">{{ item.name }}</span>
                <span class="right"
                  >预警次数：<span class="num">{{ item.value }}</span></span
                >
              </div>
              <div style="height: 146px; margin-top: 24px; overflow: auto">
                <ul>
                  <template v-for="(item1, index1) in item.subset" :key="index1">
                    <li>
                      <div>{{ item1.name }}：</div>
                      <div>{{ item1.value }}次</div>
                    </li>
                  </template>
                </ul>
              </div>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  screenData: {}
});
// 校园安全
const typeStatisti = ref([]);
const typeStatistiCount = ref(0);
const getData = () => {
  typeStatisti.value = props.screenData.alarmStatisti.typeStatisti.sort((a, b) => {
    return b.value - a.value;
  });
  typeStatisti.value.forEach(e => {
    typeStatistiCount.value += e.value;
  });
};
onMounted(() => {
  init();
});
const init = () => {
  getData();
  getRightData();
};
// 右边模块
const groupStatisti = ref([]);
const getRightData = () => {
  groupStatisti.value = props.screenData.alarmStatisti.groupStatisti;
  nextTick(() => {
    setBoder1();
  });
};
// 边框添加1
const setBoder1 = () => {
  let borderEle = document.querySelectorAll(".myborder1");
  borderEle.forEach(e => {
    if (e.classList.contains("hasSetBoder")) return;
    e.classList.add("hasSetBoder");
    e.style.cssText = "position:relative;border: 1px solid #2e84e5;background: linear-gradient(179deg, #081340 -54.28%, #111e55 124.4%);";
    let borderImgs = document.createElement("div");
    borderImgs.style.cssText = `position: absolute;top: -2px;left: -2px;width: calc(100% + 4px);;height: calc(100% + 4px);;display: flex;justify-content: space-between;flex-flow: column;pointer-events:none`;
    borderImgs.innerHTML = `<div style="width: 100%;display: flex;justify-content: space-between;">
            <img src="/static/screen/img/topleft1.png" alt="" style="width:12.7px;height:12.7px"/>
            <img src="/static/screen/img/topright1.png" alt="" style="width:12.7px;height:12.7px"/></div>
            <div style="width: 100%;display: flex;justify-content: space-between;"><img src="/static/screen/img/bottomleft1.png" alt="" style="width:12.7px;height:12.7px"/>
            <img src="/static/screen/img/bottomright1.png" alt="" style="width:12.7px;height:12.7px"/></div>`;
    e.append(borderImgs);
  });
};
defineExpose({
  init
});
</script>
<style scoped lang="scss">
.commontitle {
  margin-bottom: 22px;
}
.safe {
  box-sizing: border-box;
  width: 456px;
  height: 494px;
  padding: 24px 29px 0;
  ul {
    padding-right: 10px;
    li {
      display: flex;
      margin-top: 18.6px;
      &:first-child {
        margin-top: 0;
      }
      .title {
        display: flex;
        font-size: 12px;
        color: #e3e9f3;
        .top {
          box-sizing: border-box;
          display: inline-block;
          width: 60px;
          height: 20px;
          padding-left: 10px;
          background: linear-gradient(to left, rgb(55 116 237 / 1%), rgb(55 116 237 / 100%));
          border-radius: 10px;
        }
        .title_ {
          position: relative;
          right: 10px;
          display: block;
          width: 76px;
        }
      }
      .progressBox {
        width: 190px;
        padding-top: 6px;
      }
      .num {
        display: block;
        width: 42px;
        font-size: 14px;
        color: #ffffff;
        text-align: right;
      }
      &:nth-child(1) {
        .title {
          .top {
            background: linear-gradient(to right, rgb(226 74 59 / 100%), rgb(226 74 59 / 1%));
          }
        }
      }
      &:nth-child(2) {
        .title {
          .top {
            background: linear-gradient(to left, rgb(246 152 14 / 1%), rgb(246 152 14 / 100%));
          }
        }
      }
    }
  }
}
.cate {
  box-sizing: border-box;
  width: calc(100% - 200px);
  height: 494px;
  margin-left: 22px;
  overflow-y: auto;
  > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 10px;
    > li {
      box-sizing: border-box;
      width: 383.228px;
      height: 235.65px;
      padding: 22px;
      margin-right: 16px;
      margin-bottom: 22px;
    }
    > li:nth-child(3n) {
      margin-right: 0;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        width: 48%;
        height: 40.92px;
        padding: 0 8px;
        margin-bottom: 7.7px;
        font-size: 12px;
        line-height: 40.92px;
        color: #ffffff;
        background: #0e298b;
        box-shadow: 0 0 10px 0 #3877f2 inset;
      }
    }
  }
}
:deep(.el-progress-bar__outer) {
  background: #404c80;
}
</style>
