<script setup>
import { initFontSize } from '~/utils/size'
const ruleFormRef = ref(null)
const baseURL = window.GLOBAL_CONFIG.myxjyszptx

initFontSize()
window.addEventListener('resize', async () => {
  initFontSize()
})
// const colorData = ref([
//   {
//     index: "1",
//     color: "#ffcd00"
//   },
//   {
//     index: "2",
//     color: "#d4d3d4"
//   },
//   {
//     index: "3",
//     color: "#ff7700"
//   },
// ])
let first = $ref([])
let second = $ref([])
let third = $ref([])
let fourth = $ref([])
let fifth = $ref([])
let sixth = $ref([])
const timeValue = $ref('')
const query = $ref({
  area_id: '',
  school_id: '',
})
let loading = $ref(false)

function initData() {
  loading = true
  const data = {
    ...query,
  }
  if (timeValue != '')
    Object.assign(data, { date_range: `${timeValue[0]}~${timeValue[1]}` })

  request({
    baseURL,
    timeout: 30 * 1000,
    url: '/openapi/chart/kz_classroom_data.php',
    data,
  }).then((res) => {
    if (res.code == '1') {
      first = res.data.kz_classroom_data.firstData.firstNum
      second = res.data.kz_classroom_data.secondData.secondNum
      third = res.data.kz_classroom_data.thirdData.thirdNum
      fourth = res.data.kz_classroom_data.fourthData.firstNum
      fifth = res.data.kz_classroom_data.fifthData.fifthNum
      sixth = res.data.kz_classroom_data.sixthData.sixthNum
      loading = false
    }
  })
}
initData()

let areaList = $ref([])
let schoolList = $ref([])
request({
  baseURL,
  url: '/area/main/index',
  data: {
    upid: '2615',
    limit: 9999,
    page: 1,
  },
}).then((res) => {
  if (res.code == '1')
    areaList = res.data.page_data
})
function selectArea(val) {
  query.school_id = ''
  if (val) {
    request({
      baseURL,
      url: '/school/main/index',
      data: {
        upid4: val,
        limit: 9999,
        page: 1,
      },
    }).then((res) => {
      if (res.code == '1')
        schoolList = res.data.page_data
    })
  }
  else {
    schoolList = []
  }
}
</script>

<template>
  <div class="kzktsj overflow-hidden relative w-full">
    <div class="banner relative w-full h-28 mb-4">
      <img
        class="w-full h-full absolute"
        src="@/assets/images/banner.png"
        alt=""
      >
      <div class="banner-title relative">
        空中课堂数据
      </div>
      <el-form ref="ruleFormRef" :model="ruleForm" :inline="true">
        <el-form-item class="w-54 absolute top-4 left-4">
          <el-select
            v-model="query.area_id"
            clearable
            class="w-full"
            popper-class="el_date_picker_class"
            placeholder="区域"
            @change="selectArea"
          >
            <el-option
              v-for="a in areaList"
              :key="a.id"
              :value="a.id"
              :label="a.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="w-54 absolute top-4 left-64">
          <el-select
            v-model="query.school_id"
            popper-class="el_date_picker_class"
            class="w-full"
            placeholder="学校"
            clearable
            @change="initData"
          >
            <el-option
              v-for="s in schoolList"
              :key="s.id"
              :value="s.schoolid"
              :label="s.schoolname"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="xx" class="absolute top-4 right-47 w-44">
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            range-separator="-"
            popper-class="el_date_picker_class"
            start-placeholder="Start date"
            end-placeholder="End date"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            @change="initData"
          />
        </el-form-item>
      </el-form>
    </div>

    <div
      v-loading="loading"
      element-loading-background="rgba(022, 022, 022, 0.8)"
      class="main p-4 flex"
    >
      <div class="firstCol mr-6 w-1/3">
        <div class="whole mb-6 px-20 pt-4 mb-6">
          <!-- <div class="w-45 h-14 mb-8 relative mx-auto">
            <img class="absolute top-0 left-0" src="@/assets/images/title.png" alt="" />
            <span class="title absolute top-0 left-10"> 课堂数据</span>
            <div style="background: #00fffa; border-radius: 3px" class="w-14 h-1 absolute bottom-1.5 left-14" />
          </div> -->
          <title-bg title="课堂数据" />
          <div class="grid grid-cols-2 gap-9 pt-6">
            <div v-for="(item, index) in first" :key="item" class="conDiv p-2">
              <div class="percentage">
                {{ item.percentage }}
                <img
                  class="w-2 h-3 inline-block"
                  src="@/assets/images/up.png"
                  alt=""
                >
              </div>
              <div class="num">
                {{ item.num }}
              </div>
              <div class="num-name">
                {{ item.num_name }}
              </div>
            </div>
          </div>
        </div>

        <div class="whole px-5 py-12">
          <div class="h-90">
            <el-table :data="second" size="" height="100%" style="width: 100%">
              <el-table-column
                prop="school_name"
                label="学校名称"
                show-overflow-tooltip
              />
              <el-table-column prop="small_course" label="小班课程" />
              <el-table-column prop="student_num" label="学生数量" />
              <el-table-column prop="small_course_rank" label="小班课程排行" />
              <el-table-column
                prop="student_num_rank"
                label="学生数量排行"
                show-overflow-tooltip
                sortable
              />
            </el-table>
          </div>
        </div>
      </div>
      <div class="secondCol mr-6 w-1/3">
        <div class="third">
          <!-- flex justify-center space-x-20 -->
          <div class="pt-8 pb-5 px-8 flex justify-center space-x-10">
            <div
              v-for="(item, index) in third"
              v-show="index < 2"
              :key="index"
              class=""
            >
              <div class="third-student-num w-60 mx-auto p-2">
                <!-- <img class="mx-auto" :src="item.resourceNameImg" alt="" />
                <img class="mx-auto mt-2 mb-3" :src="item.resourceNumImg" alt="" /> -->
                <div v-show="index == 0" class="resource-name">
                  上传资源数
                </div>
                <div v-show="index == 1" class="resource-name">
                  资源下载数
                </div>
                <div v-show="index == 0" class="resource-num">
                  {{ item.resourceNum }}个
                </div>
                <div v-show="index == 1" class="resource-num">
                  {{ item.resourceNum }}次
                </div>
                <div class="resource-per">
                  {{ item.percentage }}
                </div>
              </div>
            </div>
          </div>
          <div
            v-for="(item, index) in third"
            v-show="index == 2"
            :key="index"
            class="mx-auto"
          >
            <div class="third-student-num w-90 mx-auto p-2">
              <div class="resource-name">
                学生数量
              </div>
              <div class="resource-num">
                {{ item.resourceNum }}个
              </div>
              <div class="resource-per">
                {{ item.percentage }}
              </div>
            </div>
          </div>
        </div>

        <div class="fourth px-20 pt-4 mb-6">
          <!-- <div class="w-45 h-14 mb-8 relative mx-auto">
            <img class="absolute top-0 left-0" src="@/assets/images/title.png" alt="" />
            <span class="title absolute top-0 left-10">作业数据</span>
            <div style="background: #00fffa; border-radius: 3px" class="w-14 h-1 absolute bottom-1.5 left-14" />
          </div> -->
          <title-bg title="作业数据" />
          <div class="grid grid-cols-2 gap-8 pt-6">
            <div v-for="(i, index) in fourth" :key="index" class="conDiv p-2">
              <div class="percentage">
                {{ i.percentage }}
                <img
                  class="w-2 h-3 inline-block"
                  src="@/assets/images/up.png"
                  alt=""
                >
              </div>
              <div class="num">
                {{ i.num }}
              </div>
              <div class="num-name">
                {{ i.num_name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="thirdCol w-1/3">
        <div class="whole px-20 pt-4 mb-6">
          <!-- <div class="w-63 h-14 mb-8 relative mx-auto">
            <img class="absolute top-0 left-0" src="@/assets/images/title1.png" alt="" />
            <span class="title absolute top-0 left-10">精彩回放数据</span>
            <div style="background: #00fffa; border-radius: 3px" class="w-14 h-1 absolute bottom-1.5 left-20" />
          </div> -->
          <title-bg title="精彩回放数据" />
          <div class="grid grid-cols-2 gap-9 pt-6">
            <div v-for="(item, index) in fifth" :key="index" class="conDiv p-2">
              <div class="percentage">
                {{ item.percentage }}
                <img
                  class="w-2 h-3 inline-block"
                  src="@/assets/images/up.png"
                  alt=""
                >
              </div>
              <div class="num">
                {{ item.num }}
              </div>
              <div class="num-name">
                {{ item.num_name }}
              </div>
            </div>
          </div>
        </div>

        <div class="whole p-5">
          <!-- <div class="w-63 h-16 relative mx-auto">
            <img class="absolute top-0 left-0" src="@/assets/images/title1.png" alt="" />
            <span class="title absolute top-0 left-10">直播时长排行</span>
            <div style="background: #00fffa; border-radius: 3px" class="w-14 h-1 absolute bottom-1.5 left-20" />
          </div> -->
          <title-bg title="直播时长排行" />
          <div class="timeRank ssbjlbDiv">
            <!-- <div v-for="(item, index) in sixth" :style="{ color: index < 3 && colorData[index % 3].color }" :key="index" class="table-main">
              <span class="rank">{{ item.rank }}</span>
              <span>{{ item.name }}</span>
              <span>{{ item.school_name }}</span>
              <span>直播时长:{{ item.time }}</span>
            </div> -->

            <el-table :data="sixth" size="large" :show-header="false">
              <el-table-column prop="rank" label="" show-overflow-tooltip />
              <el-table-column prop="name" label="" width="" />
              <el-table-column prop="school_name" label="" width="" />
              <el-table-column
                prop="time"
                label=""
                show-overflow-tooltip
                sortable
              >
                <template #default="scope">
                  直播时长:{{ scope.row.time }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <img src="/images/dsj/bottomBg.png" alt="">
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/dsj-table.scss";

.kzktsj {
  background: url(/images/dsj/bg.png) no-repeat;
  background-size: 100% 100%;
  background-color: #000; // height: calc(100% - 140px - 16px);
}

.main {
  width: 100%;
  height: calc(100% - 7.8125rem - 1rem);

  .firstCol,
  .secondCol,
  .thirdCol {
    height: 100%;
    flex: 33%;
    .whole {
      width: 100%;
      height: calc(50% - 0.75rem);
      background: rgba($color: #012337, $alpha: 0.6);
    }

    .third {
      height: calc(35% - 0.75rem);
      width: 100%;
      margin-bottom: 1.5rem;
      // background: rgba($color: #012337, $alpha: 0.6);
    }
    .fourth {
      height: calc(65% - 0.75rem);
      width: 100%;
      background: rgba($color: #012337, $alpha: 0.6);
    }
  }
}
.footer {
  width: 100%;
  height: 1rem;
  position: absolute;
  bottom: 0;
  img {
    width: 100%;
    height: 100%;
  }
}
.conDiv {
  background: url(/images/dsj/conBg.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  text-align: center;
  // max-width: 160px;
  //font-size: 0.75rem;
  font-weight: 400;
}

:deep(.el-form) {
  .el-form-item__content {
    .el-input__wrapper {
      box-shadow: none;
      width: 11rem;
      height: 3rem;
      background: rgba(102, 255, 255, 0.1);
      border: 0.06rem solid #00b7b2;
      border-radius: 0.12rem;
    }
  }
}

.banner-title {
  font-size: 1.8rem;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2rem;
  line-height: 5.6rem;
}

.title {
  font-size: 1.6rem;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: center;
  line-height: 3.7rem;
  color: transparent;
  background: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
  -webkit-background-clip: text;
}
.percentage {
  color: #ffffff;
  font-size: 0.75rem;
  font-family: PingFangSC, PingFangSC-Regular;
}
.num {
  color: #66ffff;
  font-size: 1.625rem;
  font-family: PingFang, PingFang-Heavy;
  font-weight: 800;
  text-align: center;
}
.num-name {
  color: #ffffff;
  font-size: 1rem;
  font-family: PingFangSC, PingFangSC-Regular;
  text-align: center;
}

.schoolInfo {
  overflow-x: hidden;
  overflow-y: scroll;
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.table-title {
  width: 100%;
  height: 2.7rem;
  line-height: 2.7rem;
  background: rgba(102, 255, 255, 0.2);
  & div {
    display: inline-block;
    width: 20%;
    font-size: 0.7rem;
    font-family: PingFang, PingFang-Medium;
    font-weight: 500;
    text-align: left;
    color: #66ffff;
    padding: 0 1rem;
  }
}
.table-content {
  width: 100%;
  height: 4.1rem;
  line-height: 4.1rem;
  background: rgba(0, 0, 0, 0.1);
  & div {
    display: inline-block;
    width: 20%;
    font-size: 0.8rem;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    padding: 0 1rem;
  }
}
.bg {
  background: rgba(102, 255, 255, 0.1);
}
.third-student-num {
  height: 6.5rem;
  background: linear-gradient(
    180deg,
    #006a76,
    rgba(0, 44, 65, 0.7) 25%,
    rgba(0, 10, 37, 0) 50%,
    rgba(0, 33, 57, 0.7) 73%,
    #005262
  );

  border: 0.05rem solid rgba(35, 255, 249, 0.27);
  border-radius: 0.15rem;
}
.resource-name {
  font-size: 1.2rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #fff;
}
.resource-num {
  font-size: 1.6rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #fff;
}
.resource-per {
  background: linear-gradient(180deg, #c3f8b3, #66ffff);
  font-size: 0.875rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: transparent;
  -webkit-background-clip: text;
}

// .timeRank {
//   height: 370px;
//   overflow-x: hidden;
//   overflow-y: scroll;
// }

// /*滚动条样式*/
// .timeRank::-webkit-scrollbar {
//   width: 3px;
//   height: 127px;
// }
// // /* 上下滚动的滚动条颜色 */
// .timeRank::-webkit-scrollbar-thumb {
//   border-radius: 2px;
//   background: #0cd3dc;
//   -webkit-box-shadow: inset 0 0 5px #0cd3dc;
// }
// .table-main {
//   height: 72px;
//   line-height: 72px;
//   font-size: 14px;
//   font-family: PingFangSC, PingFangSC-Semibold;
//   font-weight: 600;
//   text-align: left;
//   color: #0cd3dc;
//   border-bottom: 1px dashed #00fffa;
//   & span {
//     display: inline-block;
//     width: 25%;
//   }
// }
// .rank {
//   font-size: 16px;
//   font-family: Arial, Arial-Black;
//   font-weight: 900;
//   text-align: left;
//   color: #66ffff;
// }
.ssbjlbDiv {
  height: 19.5rem;
  height: calc(100% - 3.7rem);
  overflow-x: hidden;
  overflow-y: scroll;
  :deep(.el-table) {
    .el-table__body {
      tr {
        height: 3.1rem;
        color: #0cd3dc;
        font-size: 0.7rem;
        font-weight: 700;
        &:nth-child(even) {
          background: transparent !important;
        }
        &:nth-child(1) {
          color: #ffcd00;
        }
        &:nth-child(2) {
          color: #d4d3d4;
        }
        &:nth-child(3) {
          color: #ff7700;
        }
        .el-table__cell {
          border-bottom: 0.05rem dashed #00fffa !important;
        }
        .cell {
          padding: 0;
        }
      }
    }
  }
}
/*滚动条样式*/
.ssbjlbDiv::-webkit-scrollbar {
  width: 0.15rem;
  height: 8rem;
}
// /* 上下滚动的滚动条颜色 */
.ssbjlbDiv::-webkit-scrollbar-thumb {
  border-radius: 0.1rem;
  background: #0cd3dc;
  -webkit-box-shadow: inset 0 0 0.25rem #0cd3dc;
}
</style>

<style lang="scss">
// 自定义类名就是防止全局修改样式造成样式混乱
.el_date_picker_class {
  background: rgb(24, 24, 24) !important;
  .el-picker-panel {
    background: rgba(102, 255, 255, 0.1) !important;
    color: #fff;
  }
  .in-range {
    color: #000;
  }
  .el-scrollbar {
    background: rgba(102, 255, 255, 0.1) !important;
    .el-select-dropdown__item {
      color: #fff;
    }
    .el-select-dropdown__item.hover {
      color: #000;
    }
  }
}
</style>
