<template>
  <div class="container">
    <!-- 基本信息区域 -->
    <div class="top">
      <div class="top_tilte">
        <img src="@/assets/images/box-icon.png" />
        基本信息
      </div>
      <div class="top_detail">
        <div class="detail_photo">
          <img
            class="img"
            src="https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
          />
          <div class="photo_icon">
            <el-icon size="20" color="#2493F1"><ArrowDownBold /></el-icon>
          </div>
        </div>
        <div class="detail_msg">
          <div>姓名：张晓晓</div>
          <div>性别：男</div>
          <div>编号：2216161</div>
          <div>部门：班主任</div>
        </div>
      </div>
    </div>

    <!-- 考勤情况区域 -->
    <div class="container_box">
      <div class="box_title">
        <img src="@/assets/images/box-icon.png" />
        考勤情况
      </div>

      <!-- 数据展示区域 -->
      <div class="box_msg">
        <div class="msg_change">
          <div
            class="change_box"
            :class="currentTimeRang === 0 ? 'active' : ''"
            @click="changeTimeRang(0)"
          >
            本学期
          </div>
          <div
            class="change_box"
            :class="currentTimeRang === 1 ? 'active' : ''"
            @click="changeTimeRang(1)"
          >
            本周
          </div>
          <div
            class="change_box"
            :class="currentTimeRang === 2 ? 'active' : ''"
            @click="changeTimeRang(2)"
          >
            本月
          </div>
        </div>

        <div class="msg_detail">
          <div class="detail_box">
            <div class="box_num" ref="valueDom">{{ value }}</div>
            <div class="box_type">正常</div>
          </div>
          <div class="detail_box">
            <div class="box_num" ref="valueDom2">{{ value2 }}</div>
            <div class="box_type">早退</div>
          </div>
          <div class="detail_box">
            <div class="box_num" ref="valueDom3">{{ value3 }}</div>
            <div class="box_type">迟到</div>
          </div>
          <div class="detail_box">
            <div class="box_num" ref="valueDom4">{{ value4 }}</div>
            <div class="box_type">严重迟到</div>
          </div>
          <div class="detail_box">
            <div class="box_num" ref="valueDom5">{{ value5 }}</div>
            <div class="box_type">旷工迟到</div>
          </div>
          <div class="detail_box">
            <div class="box_num" ref="valueDom6">{{ value6 }}</div>
            <div class="box_type">未打卡</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人资源上传情况区域 -->
    <div class="container_box">
      <div class="box_title">
        <img src="@/assets/images/box-icon.png" />
        个人资源上传情况
      </div>

      <!-- 数据展示区域 -->
      <div class="box_msg">
        <div class="msg_change">
          <div
            class="change_box"
            :class="currentTimeRang2 === 0 ? 'active' : ''"
            @click="changeTimeRang2(0)"
          >
            本学期
          </div>
          <div
            class="change_box"
            :class="currentTimeRang2 === 1 ? 'active' : ''"
            @click="changeTimeRang2(1)"
          >
            本周
          </div>
          <div
            class="change_box"
            :class="currentTimeRang2 === 2 ? 'active' : ''"
            @click="changeTimeRang2(2)"
          >
            本月
          </div>
        </div>

        <div class="msg_detail2">
          <div class="detail2_box">
            <img src="@/assets/images/teacher_icon2.png" />
            <div class="box_content">
              <div>集体备课资源</div>
              <div class="text_color" ref="teamValueDom">{{ teamValue }}</div>
            </div>
          </div>

          <div class="detail2_line"></div>
          <div class="detail2_box">
            <img src="@/assets/images/teacher_icon.png" />
            <div class="box_content">
              <div>个人备课资源</div>
              <div class="text_color2" ref="personValueDom">
                {{ personValue }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { countUpNum } from "@/utils/countUpNum";

const value = ref(50);
const value2 = ref(50);
const value3 = ref(50);
const value4 = ref(50);
const value5 = ref(50);
const value6 = ref(50);

const valueDom = ref();
const valueDom2 = ref();
const valueDom3 = ref();
const valueDom4 = ref();
const valueDom5 = ref();
const valueDom6 = ref();

const teamValue = ref(273);
const personValue = ref(273);

const teamValueDom = ref(273);
const personValueDom = ref(273);

// 切换考勤统计时间 0本学期 1本周 2本月
const currentTimeRang = ref(0);

// 切换个人资源上传情况时间 0本学期 1本周 2本月
const currentTimeRang2 = ref(0);

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

// 考勤统计切换时间范围按钮回调
const changeTimeRang = (value: number) => {
  if (currentTimeRang.value !== value) {
    if (value === 0) {
      currentTimeRang.value = 0;
    } else if (value === 1) {
      currentTimeRang.value = 1;
    } else if (value === 2) {
      currentTimeRang.value = 2;
    }
  }
};

// 个人资源上传情况切换时间范围按钮回调
const changeTimeRang2 = (value: number) => {
  if (currentTimeRang2.value !== value) {
    if (value === 0) {
      currentTimeRang2.value = 0;
    } else if (value === 1) {
      currentTimeRang2.value = 1;
    } else if (value === 2) {
      currentTimeRang2.value = 2;
    }
  }
};

// 让数字跳动
const getCountUpNum = () => {
  countUpNum(valueDom.value, value.value);
  countUpNum(valueDom2.value, value2.value);
  countUpNum(valueDom3.value, value3.value);
  countUpNum(valueDom4.value, value4.value);
  countUpNum(valueDom5.value, value5.value);
  countUpNum(valueDom6.value, value6.value);
  countUpNum(teamValueDom.value, teamValue.value);
  countUpNum(personValueDom.value, personValue.value);
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  height: 834px;
  color: #fff;

  .top {
    padding: 17px 0 0 22px;
    height: 272px;
    background-image: url(@/assets/images/box-bg2.png);
    background-size: 100% 100%;

    .top_tilte {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      img {
        margin-right: 12px;
        width: 24px;
        height: 24px;
      }
    }

    .top_detail {
      margin-top: 40px;
      display: flex;
      align-items: center;

      .detail_photo {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 122px;
        height: 122px;
        border-radius: 50%;
        background-color: #2493f1;

        img {
          width: 112px;
          height: 112px;
          border-radius: 50%;
          object-fit: cover;
        }

        .photo_icon {
          position: absolute;
          top: 45px;
          right: -14px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background-color: #fff;
        }
      }

      .detail_msg {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 63px;
        height: 122px;
        font-size: 14px;
      }
    }
  }

  .container_box {
    padding: 17px 0 0 22px;
    height: 272px;
    background-image: url(@/assets/images/box-bg2.png);
    background-size: 100% 100%;

    .box_title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      img {
        margin-right: 12px;
        width: 24px;
        height: 24px;
      }
    }

    .box_msg {
      height: 262px;
      overflow: hidden;

      .msg_change {
        display: flex;
        justify-content: space-between;
        margin: 16px 0 20px 220px;
        padding: 2px;
        width: 200px;
        height: 32px;
        font-size: 14px;
        border-radius: 2px;
        border: 1px solid #9c9c9c;

        .change_box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 61px;
          border-radius: 2px;
          background-color: rgba(114, 151, 179, 0.3);
          cursor: pointer;
        }

        .active {
          border: 1px solid #70b7fa;
          background-color: rgba(114, 151, 179, 1);
        }
      }

      .msg_detail {
        display: flex;
        flex-wrap: wrap;

        .detail_box {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 25%;
          height: 80px;

          .box_num {
            font-size: 28px;
            font-weight: bold;
          }

          .box_type {
            margin-top: 4px;
            font-size: 14px;
          }
        }
      }

      .msg_detail2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 22px;
        padding-right: 58px;
        height: 160px;

        .detail2_box {
          display: flex;
          font-size: 16px;
          font-weight: bold;

          img {
            margin-right: 14px;
            width: 48px;
            height: 48px;
            object-fit: cover;
          }

          .box_content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .text_color {
              color: #ffbf00;
            }

            .text_color2 {
              color: #2bff80;
            }
          }
        }

        .detail2_line {
          width: 1px;
          height: 40px;
          border-left: 1px solid rgba(230, 239, 242, 0.2);
        }
      }
    }
  }
}
</style>
