<script setup>
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { user } from '@/store'
import MY_commonLeft from '@/assets/images/title_left.png'
import MY_commonRight from '@/assets/images/title_right.png'
const router = useRouter()
const baseURL = window.GLOBAL_CONFIG.myxjyszptx
console.log(user.value)
const timeValue = $ref('')
const query = $ref({
  area_id: '',
  school_id: '',
  class_id: '',
})
let classList = $ref([])
let areaList = $ref([])
let schoolList = $ref([])
function areaInit() {
  request({
    baseURL,
    url: '/area/main/index',
    data: {
      upid: '2615',
    },
  }).then((res) => {
    if (res.code == '1')
      areaList = res.data.page_data
  })
}
function selectArea(val) {
  query.school_id = ''
  query.class_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
        initData()
      }
    })
  }
  else {
    schoolList = []
  }
}
function selectSchool(val) {
  query.class_id = ''
  if (val) {
    request({
      baseURL,
      url: '/class/main/index',
      data: {
        schoolid: val,
        limit: 9999,
        page: 1,
      },
    }).then((res) => {
      if (res.code == '1') {
        classList = res.data.page_data
        initData()
      }
    })
  }
  else {
    classList = []
  }
}
if (user.value.user_role_id * 1 >= 3 && user.value.user_role_id * 1 <= 69)
  areaInit()
else if (user.value.user_role_id * 1 === 71)
  selectArea(user.value.area_info.area_id4)
else if (user.value.user_role_id * 1 === 72)
  selectSchool(user.value.sm_info.sm_id)

// let afterSchoolService = $ref({
//   // nums: {
//   //   upload_num: {
//   //     title: "上传资源数",
//   //     num: "12314",
//   //   },
//   //   classroom_num: {
//   //     title: "主讲教室数",
//   //     num: "123",
//   //   },
//   //   down_num: {
//   //     title: "资源下载数",
//   //     num: "123241",
//   //   },
//   //   lectures_num: {
//   //     title: "听课教室数",
//   //     num: 84,
//   //   },
//   //   createLesses_num: {
//   //     title: "创建课程",
//   //     num: "12314",
//   //   },
//   // },
//   // kskcData: {
//   //   xAxis_data: ["语文课", "语文课", "语文课", "语文课", "语文课"],
//   //   series_data: [[44], [55], [66], [34], [56]],
//   // },
//   // tableData: [
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 1,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 2,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 3,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 4,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 5,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 6,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 7,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "数学",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 8,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 9,
//   //   },
//   //   {
//   //     class_name: "张三",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 10,
//   //   },
//   //   {
//   //     class_name: "李四",
//   //     type: "语文",
//   //     kskbjs: "12",
//   //     bmrs: "123",
//   //     rank: 11,
//   //   },
//   // ],
// });

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

  request({
    baseURL,
    url: '/openapi/chart/after_class_data.php',
    data,
  }).then((res) => {
    if (res.code == '1') {
      afterSchoolService = res.data.school_base_data
      const kskx = document.getElementById('kskc')
      kskx.setAttribute('_echarts_instance_', '')
      kskcChart = echarts.init(kskx)
      initKskc(afterSchoolService.kskcData)
      removeDuplicateClass(afterSchoolService.tableData)
      removeDuplicateType(afterSchoolService.tableData)
      loading = false
    }
  })
}

const newClassName = []
const newTypeName = []
const removeDuplicateClass = (arr) => {
  const obj = {}
  if (arr.length !== 0) {
    arr = arr.reduce((newArr, next) => {
      obj[next.class_name]
        ? ''
        : (obj[next.class_name] = true && newArr.push(next))
      return newArr
    }, [])
    arr.forEach((item) => {
      newClassName.push({
        text: item.class_name,
        value: item.class_name,
      })
    })
  }
}
const removeDuplicateType = (arr) => {
  const obj = {}
  if (arr.length !== 0) {
    arr = arr.reduce((newArr, next) => {
      obj[next.type] ? '' : (obj[next.type] = true && newArr.push(next))
      return newArr
    }, [])
    arr.forEach((item) => {
      newTypeName.push({
        text: item.type,
        value: item.type,
      })
    })
  }
}

const filterClass = (value, row) => {
  return row.class_name === value
}
const filterType = (value, row) => {
  return row.type === value
}

// #region

let kskcChart
function initKskc(transData) {
  let kskcOption
  // 改变echarts 格式
  const changeData = transData.series_data
  // let formatArr = [{ data: [0, 1] }, { data: [0, 0] }, { data: [0, 0] }];
  const list1 = []
  // let list2 = [];
  // let list3 = [];

  changeData.forEach((item, index) => {
    list1.push(item[0])
    // list2.push(item[1]);
    // list3.push(item[2]);
  })
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  kskcOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      containLabel: false,
    },
    legend: {
      show: false,
      data: transEchartdata.legend_data,
      type: 'plain',
      left: 30,
      itemWidth: 15,
      icon: 'circle',
      textStyle: {
        color: '#68D5EA',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisTick: {
          show: false,
        },
        axisLabel: {
          // x轴文字的配置
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameLocation: 'end',
        name: '(个)',
        nameTextStyle: {
          color: 'rgba(253, 253, 253, 1)',
        },
        nameGap: 25,
        splitNumber: 5,
        axisLabel: {
          color: '#68D5EA',
        },
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
    ],
    series: [
      {
        // name: "教师评价",
        type: 'bar',
        data: list1,
        itemStyle: {
          barBorderRadius: [20, 20, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: '#FEDB65',
            },
            {
              offset: 0,
              color: '#07BA74',
            },
          ]),
        },
        barWidth: 15,
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 3,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
      },
      {
        type: 'slider',
        showDetail: false,
        start: 0,
        height: 5,
        // width: 5,
        // right: 0, //右边的距离
        // bottom: 10, //下边的距离
        brushSelect: false,
        showDataShadow: false,
        show: true, // 是否展示
        fillerColor: '#00fffa', // 滚动条颜色
        borderColor: 'transparent',
        borderColor: 'c2c2c2',
        maxValueSpan: 2,
      },
    ],
  }

  kskcOption && kskcChart.setOption(kskcOption)
}
// #endregion

function resizeEcharts() {
  kskcChart.resize()
}

onMounted(() => {
  initData()

  window.addEventListener('resize', resizeEcharts)
})
</script>

<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    class="bg_full pb-10 w-full"
  >
    <div class="bg_top w-full h-5.5vw flex px-4 pt-2">
      <div class="w-2/5">
        <el-form :inline="true" class="demo-form-inline w-full">
          <el-form-item v-if="user.user_role_id * 1 < 71" class="w-1/5">
            <el-select
              v-model="query.area_id"
              class="w-full"
              clearable
              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 v-if="user.user_role_id * 1 < 72" class="w-1/5">
            <el-select
              v-model="query.school_id"
              class="w-full"
              popper-class="el_date_picker_class"
              placeholder="学校"
              clearable
              @change="selectSchool"
            >
              <el-option
                v-for="s in schoolList"
                :key="s.id"
                :value="s.schoolid"
                :label="s.schoolname"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="user.user_role_id * 1 < 72" class="w-1/5">
            <el-select
              v-model="query.class_id"
              popper-class="el_date_picker_class"
              class="w-full"
              placeholder="班级"
              clearable
              @change="initData"
            >
              <el-option
                v-for="s in classList"
                :key="s.classid"
                :value="s.classid"
                :label="s.name"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <h1 class="text-white text-2vw text-center self-center flex-1">
        课后服务统计
      </h1>
      <div class="text_green text-sm leading-12 w-2/5 text-center">
        <el-date-picker
          v-model="timeValue"
          type="daterange"
          range-separator="-"
          popper-class="el_date_picker_class"
          start-placeholder="开始"
          end-placeholder="结束"
          value-format="YYYY-MM-DD"
          @change="initData"
        />
      </div>
    </div>
    <div v-if="afterSchoolService" class="px-2 flex justify-around main mt-4">
      <div class="h-full w-2/3">
        <div class="nav_left p-0 m-0 relative overflow-hidden">
          <img
            class="nav_l_img w-2/9 absolute"
            src="@/assets/img/dsj/no0.png"
            alt=""
          >
          <div class="flex justify-evenly w-full h-1/3">
            <div class="no no_1 flex justify-center w-1/2">
              <div class="no_1_title no_title align-middle">
                <div
                  class="text-1.3vw"
                  style="margin-top: 13%; margin-right: 15%"
                >
                  {{ afterSchoolService.nums?.upload_num.title }}
                </div>
              </div>
              <div class="no_1_num no_num self-end flex items-center ">
                <div class="text-center w-full h-full pt-3">
                  <p class="font-semibold text-1.2vw h-2/5">
                    {{ afterSchoolService.nums?.upload_num.num }}
                  </p>
                  <p class="text-0.8vw">
                    {{ afterSchoolService.nums?.upload_num.unit }}
                  </p>
                </div>
              </div>
            </div>
            <div class="no no_2 flex justify-center w-1/2">
              <div class="no_2_num no_num self-end text-1.2vw">
                <p class="font-semibold">
                  {{ afterSchoolService.nums?.classroom_num.num }}
                </p>
                <p class="text-0.8vw">
                  {{ afterSchoolService.nums?.classroom_num.unit }}
                </p>
              </div>
              <div class="no_2_title no_title text-1.3vw">
                <div style="margin-top: 13%; margin-left: 15%">
                  {{ afterSchoolService.nums?.classroom_num.title }}
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-around w-full h-1/3 px-5">
            <div class="no_3 no flex justify-aound w-1/2">
              <div class="no_3_title no_title self-end text-1.3vw">
                <div style="margin-top: 28%; margin-right: 15%">
                  {{ afterSchoolService.nums?.down_num.title }}
                </div>
              </div>
              <div class="no_3_num no_num self-center text-1.2vw">
                <p class="font-semibold">
                  {{ afterSchoolService.nums?.down_num.num }}
                </p>
                <p class="text-0.8vw">
                  {{ afterSchoolService.nums?.down_num.unit }}
                </p>
              </div>
            </div>
            <div class="no_4 no flex justify-end w-1/2">
              <div class="no_4_num no_num self-center text-1.2vw">
                <p class="font-semibold">
                  {{ afterSchoolService.nums?.createLesses_num.num }}
                </p>
                <p class="text-0.8vw">
                  {{ afterSchoolService.nums?.createLesses_num.unit }}
                </p>
              </div>
              <div class="no_4_title no_title self-end text-1.3vw">
                <div style="margin-top: 28%; margin-left: 15%">
                  {{ afterSchoolService.nums?.createLesses_num.title }}
                </div>
              </div>
            </div>
          </div>
          <div class="flex w-full h-1/4">
            <div class="no_5 no w-1/2">
              <div class="no_5_num no_num text-1.2vw">
                <p class="font-semibold">
                  {{ afterSchoolService.nums?.lectures_num.num }}
                </p>
                <p class="text-0.8vw">
                  {{ afterSchoolService.nums?.lectures_num.unit }}
                </p>
              </div>
              <div class="no_5_title no_title overflow-hidden">
                <div
                  style="margin-top: 28%; margin-left: 15%"
                  class="text-1.3vw"
                >
                  {{ afterSchoolService.nums?.lectures_num.title }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="nav_right w-1/3 h-full">
        <div class="nav_right_one" style="height: calc(50% - 12px)">
          <div class="MY_commonTitle">
            <p>
              开设课程统计图
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 10%" />
          </div>
          <div class="h-7/9">
            <div id="kskc" style="width: 100%; height: 100%" />
          </div>
        </div>
        <div class="nav_right_two mt-4" style="height: calc(50% - 12px)">
          <div class="MY_commonTitle">
            <p>
              课程排名表
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 10%" />
          </div>
          <el-table
            :data="afterSchoolService.tableData"
            stripe
            :default-sort="{ prop: 'rank', order: 'ascending' }"
            style="width: 100%; height: 80%"
            class="el_table_class p-4"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="class_name"
              label="课程名"
              :filters="newClassName"
              :filter-method="filterClass"
              filter-placement="bottom-end"
            />
            <el-table-column
              prop="type"
              :filters="newTypeName"
              :filter-method="filterType"
              filter-placement="bottom-end"
              label="所属分类"
            />
            <el-table-column
              prop="kskbjs"
              show-overflow-tooltip
              label="开设课班级数"
            />
            <el-table-column
              prop="bmrs"
              show-overflow-tooltip
              label="报名人数"
            />
            <el-table-column
              prop="rank"
              sortable
              show-overflow-tooltip
              label="排名"
            />
          </el-table>
        </div>
      </div>
    </div>

    <div class="footer h-1rem" />
  </div>
</template>

<style lang="scss" scoped>
@use "@/styles/el-table.scss";
@use "@/styles/date-picker.scss";
.main {
  height: calc(100% - 5.5vw - 2vw);
}
.MY_commonTitle {
  text-align: center;
  box-sizing: border-box;
  padding: 2%;

  p {
    font-size: 1.5vw;
    font-family: PingFang SC, PingFang SC-8;
    background-image: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
    display: inline-block;
    position: relative;
    padding: 0 8%;
  }

  .bottomLine {
    width: 20%;
    height: 4px;
    background-color: rgba(0, 255, 250, 1);
    border-radius: 3px;
    margin: 2px auto 0 auto;
  }

  .MY_commonLeft {
    width: 2.6vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 13;
  }

  .MY_commonRight {
    width: 2.6vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 13;
  }
}
.color_green {
  background-color: rgba(102, 255, 255, 0.2) !important;
}
.color_black {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
::deep .el-table {
  --el-table-tr-bg-color: none;
}
::deep .el-input__wrapper {
  width: 220px !important;
}
.text_green {
  color: #00fff4;
  font-family: SourceHanSansCN, SourceHanSansCN-Bold;
  font-weight: 700;
}
.bg_full {
  background-image: url("@/assets/img/dsj/bg.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  .bg_top {
    min-width: 1280px;
    background-image: url("@/assets/img/dsj/top.png");
    background-size: 100%;
    // background-position: center;
    background-repeat: no-repeat;
    justify-content: space-between;
  }
  .footer {
    width: 100%;
    min-width: 1280px;
    background-image: url("@/assets/img/dsj/under.png");
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
:deep .el-select {
  .el-input__inner {
    color: #fff;
  }
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

:deep .grid-content {
  // border-radius: 4px;
  min-height: 36px;
  background-color: rgba(1, 35, 55, 0.71);
}

.nav_right {
  .nav_right_one,
  .nav_right_two {
    background-color: rgba(1, 35, 55, 0.71);
  }
}
.nav_left {
  padding-top: 15px;
  background-image: url("@/assets/img/dsj/bg_five.png");
  width: 95%;
  height: 100%;
  background-size: 100%;
  // background-position: center center;
  background-repeat: no-repeat;
  .nav_l_img {
    top: 0;
    left: 0;
    right: 0;
    bottom: 40px;
    margin: auto;
  }
  .no {
    // width: 100%;
    height: 100%;
    // display: flex;
    .no_title {
      width: 45%;
      height: 100%;
      // line-height: 80px;
      text-align: center;
      // padding-left: 35px;
      color: #00e0db;
      // font-size: 22px;
    }
    .no_num {
      width: 20%;
      height: 40%;
      line-height: 30px;
      background-image: url("@/assets/img/dsj/text_bg.png");
      background-repeat: no-repeat;
      background-size: 100%;
      text-align: center;
      color: #fff;
    }
  }
  .no_1 {
    .no_1_title {
      width: 40%;
      background-image: url("@/assets/img/dsj/no1.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .no_2 {
    .no_2_title {
      width: 40%;
      background-image: url("@/assets/img/dsj/no2.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .no_3 {
    .no_3_title {
      width: 48%;
      height: 65%;
      background-image: url("@/assets/img/dsj/no5.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .no_4 {
    .no_4_title {
      width: 48%;
      height: 65%;
      background-image: url("@/assets/img/dsj/no3.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .no_5 {
    margin: 0 auto;
    .no_5_title {
      width: 50%;
      // height: 100%;
      background-image: url("@/assets/img/dsj/no4.png");
      background-repeat: no-repeat;
      margin: 0 auto;
      background-size: 100%;
      text-align: center;
    }
    .no_5_num {
      margin: 0 auto;
    }
  }
}
.nav_right {
  width: 38%;
}
.top_name {
  background-image: linear-gradient(to bottom, #c3f8b3, #66ffff 80%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 28px;
  text-align: center;
}
.routerLink {
  width: 85px;
  height: 38px;
  cursor: pointer;
  line-height: 38px;
  border: 1px solid #00e0db;
  border-radius: 8px;
  float: right;
  box-shadow: 0px 1px 39px 0px rgba(0, 255, 244, 0.5) inset;
  .click_routerLink {
    background-image: linear-gradient(to bottom, #c3f8b3, #66ffff 80%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 20px;
    text-align: center;
  }
}
.sub_title {
  margin: 0 auto;
}
.text_purple {
  color: #ed97ff;
}
.text_yellow {
  color: #fff57b;
}
.text_pink {
  color: #ff579a;
}
.text_blue {
  color: #57e1ff;
}
.text_green {
  color: #54ffd9;
}
</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>
