<template>
  <div style="width: 100%; height: 100%">
    <ul>
      <li>
        <span class="title">学生总人数：</span>
        <div class="numbox">
          <div v-for="(item, index) in studentPersonNum.totalNum" :key="index">
            <span class="num">{{ item }}</span>
          </div>
        </div>
        <img src="/static/screen/img/numaside.png" alt="" />
      </li>
      <li>
        <span class="title">男生人数：</span>
        <div class="numbox">
          <div v-for="(item, index) in studentPersonNum.maleNum" :key="index">
            <span class="num">{{ item }}</span>
          </div>
        </div>
        <img src="/static/screen/img/numaside.png" alt="" />
      </li>
      <li>
        <span class="title">女生人数：</span>
        <div class="numbox">
          <div v-for="(item, index) in studentPersonNum.femaleNum" :key="index">
            <span class="num">{{ item }}</span>
          </div>
        </div>
      </li>
    </ul>
    <div style="display: flex; justify-content: space-around; padding: 25px 0">
      <div style="width: 175px; height: 175px; position: relative; display: flex; justify-content: center; align-items: center">
        <div ref="chart1" style="width: 160px; height: 160px"></div>
        <img src="/static/screen/img/circle.png" style="position: absolute; top: 0; left: 0; width: 175px; height: 175px" alt="" />
      </div>
      <div style="width: 175px; height: 175px; position: relative; display: flex; justify-content: center; align-items: center">
        <div ref="chart2" style="width: 160px; height: 160px"></div>
        <img src="/static/screen/img/circle.png" style="position: absolute; top: 0; left: 0; width: 175px; height: 175px" alt="" />
      </div>
    </div>
    <div class="commontitle">
      <div class="left">
        <span>设备统计</span>
        <img src="/static/screen/img/titleIcon.png" alt="" />
      </div>
      <div class="right">
        设备总数：<span>{{ count }}</span>
      </div>
    </div>

    <div style="width: 100%; height: 200px">
      <div ref="chart3" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  screenData: {}
});
import * as echarts from "echarts";
let chart1 = ref(null);
let chart2 = ref(null);
let chart3 = ref(null);
onMounted(() => {
  init();
});
const init = () => {
  getstudentPersonNum();
  getCharts1();
  getCharts2();
  getCharts3();
};
// 学生人数
const studentPersonNumKeyValue = { femaleNum: "女生人数", maleNum: "男生人数", totalNum: "学生总人数" };
const studentPersonNum_ = reactive({
  femaleNum: 0,
  maleNum: 0,
  totalNum: 0
});
const studentPersonNum = reactive({
  femaleNum: [],
  maleNum: [],
  totalNum: []
});
const getstudentPersonNum = () => {
  studentPersonNum_.value = props.screenData.studentPersonNum || { femaleNum: 0, maleNum: 0, totalNum: 0 };
  for (const key in studentPersonNum_.value) {
    let item = studentPersonNum_.value[key];
    let arr = item.toString().split("");
    function initArr(arr) {
      if (arr.length < 4) {
        arr.unshift("0");
      }
      if (arr.length < 4) {
        return initArr(arr);
      }
      return arr;
    }
    arr = initArr(arr);
    studentPersonNum[key] = arr;
  }
};
const getCharts1 = () => {
  const chart = echarts.init(chart1.value);
  let arr = [];
  for (const key in studentPersonNum_.value) {
    if (key == "femaleNum") {
      arr[0] = {
        name: studentPersonNumKeyValue[key],
        value: studentPersonNum_.value[key]
      };
    }
    if (key == "maleNum") {
      arr[1] = {
        name: studentPersonNumKeyValue[key],
        value: studentPersonNum_.value[key]
      };
    }
  }
  var title = ((studentPersonNum_.value.maleNum * 100) / studentPersonNum_.value.totalNum).toFixed(0) + "%";
  let option = {
    backgroundColor: "#021841",
    animation: true,
    title: {
      text: title,
      subtext: "男",
      x: "center",
      y: "35%",
      textStyle: {
        color: "#D5C54A",
        fontSize: 25,
        fontWeight: "600",
        align: "center"
        // "width": "200px"
      },
      subtextStyle: {
        color: "#fff",
        fontSize: 20,

        fontWeight: "normal",
        align: "center"
      }
    },

    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["80%", "90%"],
        color: ["#154076", "#18EAFE"],
        labelLine: {
          normal: {
            length: 25
          }
        },
        label: {
          normal: {
            show: false
          }
        },
        data: arr
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
};
const getCharts2 = data => {
  const chart = echarts.init(chart2.value);
  let arr = [];
  for (const key in studentPersonNum_.value) {
    if (key == "maleNum") {
      arr[0] = {
        name: studentPersonNumKeyValue[key],
        value: studentPersonNum_.value[key]
      };
    }
    if (key == "femaleNum") {
      arr[1] = {
        name: studentPersonNumKeyValue[key],
        value: studentPersonNum_.value[key]
      };
    }
  }
  var title = ((studentPersonNum_.value.femaleNum * 100) / studentPersonNum_.value.totalNum).toFixed(0) + "%";
  let option = {
    backgroundColor: "#021841",
    animation: true,
    title: {
      text: title,
      subtext: "女",
      x: "center",
      y: "35%",
      textStyle: {
        color: "#D5C54A",
        fontSize: 25,
        fontWeight: "600",
        align: "center"
      },
      subtextStyle: {
        color: "#fff",
        fontSize: 20,

        fontWeight: "normal",
        align: "center"
      }
    },

    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["80%", "90%"],
        color: ["#154076", "#E74B3C"],
        startAngle: 270,
        labelLine: {
          normal: {
            length: 25
          }
        },
        label: {
          normal: {
            show: false
          }
        },
        data: arr
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
};
// 设备统计
const count = ref(0);
const getCharts3 = () => {
  const chart = echarts.init(chart3.value);
  let data = props.screenData.camera || [];
  let xArr = data.map(e => e.cameraInfos.length);
  xArr.forEach(element => {
    count.value += element;
  });
  let yArr = data.map(e => {
    return {
      value: e.name
    };
  });
  let option = {
    tooltip: {
      show: true,
      trigger: "item" //触发类型
    },
    textStyle: {
      color: "rgba(255, 255, 255, 0.64)"
    },
    grid: {
      left: "3%",
      right: "6%",
      bottom: "3%",
      top: "10%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      name: "个",
      axisLabel: {
        show: true,
        fontSize: 12
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.15)"
        }
      }
    },
    yAxis: {
      type: "category",
      data: yArr,
      axisTick: false,
      axisLabel: {
        show: true,
        color: "rgba(255, 255, 255, 0.64)",
        fontSize: 12,
        overflow: "break",
        width: 100
      }
    },
    series: [
      {
        name: "设备统计",
        type: "bar",
        barWidth: "11px",
        itemStyle: {
          color: {
            type: "linear",
            colorStops: [
              { offset: 0, color: "rgba(27,99,204,0.9)" },
              { offset: 1, color: "rgba(3,223,252,0.9)" }
            ]
          }
        },
        data: xArr
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
};
defineExpose({
  init
});
</script>
<style scoped lang="scss">
ul {
  display: flex;
  justify-content: space-between;
  li {
    position: relative;
    .title {
      color: #fff;
      font-family: "Microsoft YaHei UI";
      font-size: 20px;
    }
    .numbox {
      margin-top: 18px;
      display: flex;
      color: #fff;
      text-align: center;
      font-family: "Microsoft YaHei UI";
      font-size: 28px;
      > div {
        background: url("/static/screen/img/numborder.png") 100% 100% no-repeat;
        width: 34px;
        height: 42px;
        line-height: 42px;
        margin-right: 5px;
      }
      > div:last-child {
        margin-right: 0px;
      }
    }
    img {
      width: 6px;
      height: 79px;
      position: absolute;
      right: -36px;
      top: 6px;
    }
  }
  li:nth-child(2) {
    .title {
      color: #00fff4;
    }
    .numbox {
      > div {
        background: url("/static/screen/img/numborder1.png") 100% 100% no-repeat;
      }
    }
  }
  li:nth-child(3) {
    .title {
      color: #fde0b9;
    }
    .numbox {
      > div {
        background: url("/static/screen/img/numborder2.png") 100% 100% no-repeat;
      }
    }
  }
}
.commontitle .right {
  color: #79bde5;
  font-size: 16px;
  padding-top: 8px;
  span {
    font-size: 18px;
    font-weight: 700;
  }
}
</style>