<script setup lang="ts">
import _request from '../utils/request';

import bar from './txwx/bar.vue'
import lines from './txwx/lines.vue'

import geo from '~/assets/img/home/geo.png'
import under from '~/assets/img/home/under.webp'
import stu from '~/assets/img/home/stu.webp'



// const b1data = $ref([
//   { title: '教师数量', num: '4366', unit: '人' },
//   { title: '学生数量', num: '111', unit: '人' },
//   { title: '学校数量', num: '111', unit: '人' },
//   { title: '名师总数', num: '11', unit: '所' },
//   { title: '上传资源总数', num: '111', unit: '人' },
//   { title: '教师直播次数', num: '111', unit: '次' },
// ])

// const b3data = $ref([
//   ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
//   ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
//   ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
//   ['桐乡市第十中学桐乡市第十中学桐乡市第十中学桐乡市第十中学', '第一名', '2345人', '1.5W'],
//   ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
// ])

// const b4data = $ref([
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
// ])

// const b7data = $ref([
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
// ])
// const b8data = $ref([
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
//   ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
// ])


const b1data = ref("");
const b3data = ref("");
const b4data = ref("");
const b7data = ref("");
const b8data = ref("");
const barEchartsData = ref('');
const lineEchartsData = ref('');
const initData = () => {
  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL: window.GLOBAL_CONFIG.txwxapi,
    url: "/openapi/chart/index_data.php",
    data: {},
  })
    .then(res => {
      if (res.code == '1') {
        b1data.value = res.data.b1data;
        b3data.value = res.data.b3data;
        b4data.value = res.data.b4data;
        b7data.value = res.data.b7data;
        b8data.value = res.data.b8data;
        barEchartsData.value = res.data.barEchartsData;
        lineEchartsData.value = res.data.lineEchartsData;

      }
    })
    .catch(error => { console.log(error) })
}
initData();


const router = useRouter()
function go(name: string) {
  router.push({ name })
}


</script>

<template>
  <div class="flex flex-col justify-between space-y-4">
    <div class="h-520px flex justify-between">
      <div
        class="border border-hex-0A337E bg-block px-27px py-44px gap-x-33px gap-y-37px h-full grid grid-rows-3 grid-cols-2"
        style="width:40%;">
        <div v-for="({ title, num, unit }) in b1data" :key="title"
          class="b1-item flex justify-center space-y-3 items-center flex-col">
          <div class="text-30px font-bold text-hex-6ff">
            {{ num }}<span class="text-20px">{{ unit }}</span>
          </div>
          <div class="text-18px font-bold opacity-80">
            {{ title }}
          </div>
        </div>
      </div>
      <div class="py-2 px-2 flex_center">
        <img :src="geo" alt="">
      </div>

      <div class="w-560px h-full flex flex-col justify-between">
        <div class="border border-hex-0A337E bg-block p-3 w-full">
          <div>学校平均积分全市排名</div>
          <div class="mt-2 mb-4">
            <img class="h-7px" :src="under">
          </div>
          <div class="b-table">
            <div v-for="(row, i) in b3data" :key="i" class="b-table-row">
              <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 0 ? '55%' : '15%'}`">
                {{ col }}
              </div>
            </div>
          </div>
        </div>
        <div class="border border-hex-0A337E bg-block p-3 w-full">
          <div>学生积分排名</div>
          <div class="mt-2 mb-4">
            <img class="h-7px" :src="under">
          </div>
          <div class="b-table">
            <div v-for="(row, i) in b4data" :key="i" class="b-table-row">
              <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 1 ? '55%' : '15%'}`">
                {{ col }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="h-430px flex justify-between">
      <div class="border border-hex-0A337E bg-block p-3 h-full" style="width:33%;">
        <div class="flex">
          <div>
            <div>课程浏览点赞统计</div>
            <div class="mt-2 mb-4">
              <img class="h-7px" :src="under">
            </div>
          </div>
          <div class="b-btn flex_center ml-8" @click="go('txwx-detail')">
            点击查看详情
          </div>
        </div>

        <div class="w-full h-400px">
          <bar v-if="barEchartsData" :echarts-data="barEchartsData" />
        </div>
      </div>
      <div class="border border-hex-0A337E bg-block p-3 h-full" style="width:33%;">
        <div>用户登录趋势</div>
        <div class="mt-2 mb-4">
          <img class="h-7px" :src="under">
        </div>
        <div class="w-full h-400px">
          <lines v-if="lineEchartsData" :echarts-data="lineEchartsData" />
        </div>
      </div>
      <div class=" h-full flex flex-col justify-between" style="width:33%;">
        <div class="border border-hex-0A337E bg-block p-3 w-full h-207px">
          <div>教师积分排名</div>
          <div class="mt-2 mb-4">
            <img class="h-7px" :src="under">
          </div>
          <div class="b-table">
            <div v-for="(row, i) in b7data" :key="i" class="b-table-row">
              <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 1 ? '55%' : '15%'}`">
                {{ col }}
              </div>
            </div>
          </div>
        </div>
        <div class="border border-hex-0A337E bg-block p-3 w-full h-207px">
          <div>今日访问用户</div>
          <div class="mt-2 mb-4">
            <img class="h-7px" :src="under">
          </div>

          <div>
            <div v-for="(row, i) in b8data" :key="i"
              class="flex items-center h-42px justify-start text-14px px-18px text-20px">
              <img :src="stu" alt="" class="h-20px mr-4">
              <div class="w-100px tracking-1px">
                {{ row[0] }}
              </div>
              <div class="cell flex-auto tracking-1px max-w-400px">
                {{ row[1] }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.bg_img {
  background-image: url('~/assets/img/txwx/bg.webp');
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: 100%;
}

.bg_img_header {
  background-image: url('~/assets/img/txwx/header.webp');
  background-repeat: no-repeat;
  /* background-position: top center; */
  background-origin: content-box;
  background-size: 100%;
}

.hovered:hover .switched {
  display: block;
  opacity: .8;
}

.active .switched {
  display: block;
}


.b-btn {
  width: 137px;
  height: 32px;
  background: #0d5bf7;
  border: 1px solid #1bced7;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
}

.b1-item {
  width: 180px;
  height: 114px;
  background: linear-gradient(90deg, rgba(0, 224, 219, 0.40) 3%, rgba(79, 248, 247, 0.09) 25%, rgba(102, 255, 255, 0.00) 52%, rgba(78, 248, 247, 0.10) 75%, rgba(0, 224, 219, 0.42));
  border: 1px solid;
  border-image: linear-gradient(270deg, #00d2d5, rgba(0, 210, 213, 0.18) 13%, rgba(0, 210, 213, 0.00) 50%, rgba(0, 210, 213, 0.20) 90%, rgba(0, 210, 213, 0.75)) 1 1;
}

.b-table .b-table-row {
  width: 100%;
  height: 42px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  letter-spacing: .5px;

}

.b-table .b-table-row:nth-child(2n+1) {
  background: rgba(35, 160, 226, 0.20);
  border-radius: 24px;
}

.b-table .b-table-row:nth-child(2n) {
  background: transparent
}

.b-table .b-table-cell {
  padding: 0 5px;
  /* 超过一行省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
