<script setup>
import { useRoute, useRouter } from 'vue-router'
import { onMounted } from 'vue'
import NumbBlock from './components/numb.vue'
import MY_commonLeft from '@/assets/images/title_left.png'
import MY_commonRight from '@/assets/images/title_right.png'
const router = useRouter()
const route = useRoute()
console.log(route.query, '11111111111111')
const baseURL = window.GLOBAL_CONFIG.myxjyszptx
const timeValue = $ref('')
let visiable = $ref(false)
// let query = $ref({
//   area_id: "",
//   school_id: "",
// });
function handleLink() {
  router.go(-1)
}
const converToArray = number => [...`${number}`].map(el => parseInt(el))

// const discussData = (
//   await request({
//     url: "/openapi/chart/class_analyse_data.php",
//     data:{
//       date_range: timeValue[0]+'~'+timeValue[1]
//     }
//   })
// ).data.discussData;
const areaList = $ref([])
const schoolList = $ref([])
// 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 = "";
//   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 = [];
//   }
// }
let discussData = $ref({})
let classInfo = $ref({})
let loading = $ref(false)
function initData() {
  loading = true
  const data = {
    // ...query
    ...route.query,
  }
  if (timeValue != '')
    Object.assign(data, { date_range: `${timeValue[0]}~${timeValue[1]}` })

  request({
    baseURL,
    url: '/openapi/chart/class_analyse_data.php',
    data,
  }).then((res) => {
    if (res.code == '1') {
      discussData = res.data.discussData
      classInfo = res.data.discussData.classInfo
      res.data.discussData.classInfo.tlData.forEach((item) => {
        item.num = converToArray(item.num)
        if (item.num.length < 7) {
          const zero = []
          for (let i = 0; i < 7 - item.num.length; i++)
            zero.push(0)

          item.num = [...zero, ...item.num]
        }
      })
      loading = false
    }
  })
}
initData()
const tableRowClassName = ({ row, rowIndex }) => {
  // console.log(rowIndex%2);
  if (rowIndex % 2 == 0)
    return 'warning-row'
  else
    return 'success-row'

  // return "";
}
let img = $ref('')
function picLook(e) {
  visiable = true
  img = e
}
</script>

<template>
  <div v-loading="loading" class="bg_full min-w-1200px pb-10 text-white auto_size">
    <div class="bg_top w-full h-5.5vw flex pt-2 px-4">
      <div class="w-2/5">
        <el-form :inline="true" class="demo-form-inline w-full">
          <el-form-item class="w-1/4">
            <el-date-picker
              v-model="timeValue"
              type="daterange"
              class="w-full"
              range-separator="-"
              popper-class="el_date_picker_class"
              start-placeholder="开始"
              end-placeholder="结束"
              value-format="YYYY-MM-DD"
              @change="initData"
            />
          </el-form-item>
          <!-- <el-form-item class="w-1/4">
            <el-select
              @change="selectArea"
              clearable
              class="w-full"
              popper-class="el_date_picker_class"
              v-model="query.area_id"
              placeholder="区域"
            >
              <el-option
                v-for="a in areaList"
                :key="a.id"
                :value="a.id"
                :label="a.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="w-1/4">
            <el-select
              popper-class="el_date_picker_class"
              v-model="query.school_id"
              placeholder="学校"
              class="w-full"
              @change="initData"
              clearable
            >
              <el-option
                v-for="s in schoolList"
                :key="s.id"
                :value="s.schoolid"
                :label="s.schoolname"
              ></el-option>
            </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">
        <div class="routerLink">
          <div class="click_routerLink" @click="handleLink">
            返回
          </div>
        </div>
      </div>
    </div>
    <div class="w-full flex justify-around mt-2" style="height: calc(100% - 5.5vw)">
      <div class="nav_left w-3/5 h-full">
        <div
          class="nav_bg w-full flex justify-between"
          style="height: calc(35% - 12px)"
        >
          <div class="flex justify-around items-center w-1/2">
            <img class="w-1/2" src="@/assets/img/dsj/bar.png" alt="">
            <div class="text-center w-1/2">
              <p class="w-full text_blue text-center">
                {{ classInfo.sm_name }}
              </p>
              <p class="w-full mt-4 text-white text-sm text-center">
                {{ classInfo.grade }}{{ classInfo.class }}
              </p>
            </div>
          </div>
          <div class="w-1/2 pl-5">
            <div
              v-for="(v, i) in classInfo.tlData"
              :key="i"
              class="w-full h-1/2"
            >
              <div class="line_bg title1 line_bg_1 h-1/3">
                {{ v.title }}
              </div>
              <div class="ml-4 mt-1">
                <span v-for="n in v.num" class="flex num_bg">{{ n }} </span>
              </div>
            </div>
          </div>
        </div>
        <div class="nav_table p-4 mt-4" style="height: calc(65% - 10px)">
          <el-table
            :data="discussData.tableData"
            stripe
            style="width: 100%; height: 100%"
            class="el_table_class"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="讨论图片">
              <template #default="scope">
                <el-button v-if="scope.row.tltp" type="success" link @click="picLook(scope.row.tltp)">
                  查看
                </el-button>
                <el-button v-else type="text" link>
                  --
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="tlwz"
              width="180"
              show-overflow-tooltip
              label="讨论文字"
            />
            <el-table-column
              prop="lspj"
              width="180"
              show-overflow-tooltip
              label="老师评价"
            />
            <el-table-column
              prop="tlnr"
              width="320"
              show-overflow-tooltip
              label="讨论内容"
            />
          </el-table>
        </div>
      </div>
      <div class="nav_right w-1/3 h-full">
        <div class="MY_commonTitle">
          <p class="px-10">
            讨论内容展示墙
            <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
            <img :src="MY_commonRight" class="MY_commonRight" alt="">
          </p>
          <div class="bottomLine" style="width: 20%" />
        </div>
        <el-table
          :data="discussData.tlnrData"
          style="height: calc(100% - 110px)"
          stripe
          class="el_table_class mt-4 center w-full"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="date_time"
            label="时间"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="tlnr"
            width="320"
            show-overflow-tooltip
            label="讨论内容"
          />
        </el-table>
      </div>
    </div>
    <el-dialog v-model="visiable" class="text-center">
      <img class="w-2/3" :src="img" alt="">
    </el-dialog>
    <div class="footer h-1rem" />
  </div>
</template>

  <style lang="scss" scoped>
@use "@/styles/el-table.scss";
@use "@/styles/date-picker.scss";
:deep .el-dialog {
  // width: 1300px;
  background-color: #011d2e;
  padding: 10px;
  .el-dialog__header {
    margin-top: 10px;
  }
  .el-dialog__title {
    color: #fff;
  }
  --el-color-info: #fff;
  .el_table_class {
    margin: 0 auto;
  }
}
.auto_size {
  --el-component-size-large: 3rem;
  --el-component-size: 2.5rem;
  --el-component-size-small: 2rem;

  // :deep(.el-date-table) {
  //   font-size: .75rem;
  // }
}
.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 6%;
  }

  .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;
}
.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;
  }
  .main {
    .m_left {
      //background-color: #012337;
    }
  }
  .footer {
    width: 100%;
    // min-width: 1200px;
    background-image: url("@/assets/img/dsj/under.png");
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}

.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 {
  background-color: rgba(1, 35, 55, 0.71);
}
.nav_left {
  .nav_table {
    // width: 1050px;
    background-color: rgba(1, 35, 55, 0.71);
  }
  .nav_bg {
    // height: 195px;
    background-image: url("@/assets/img/dsj/tl_bg.png");
    // background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .line_bg {
    width: 80%;
    // height: 40px;
    // line-height: 40px;
    background-image: url("@/assets/img/dsj/tl_1.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    margin-top: 5px;
    margin-left: 20px;
  }

.title1 {
  // background-image: url('~/assets/img/dsj/title.webp');
  // background-repeat: no-repeat;
  // background-size: contain;
  // height: 2.5rem;
  // line-height: 2.5rem;
  // padding-left: 7rem;
  // font-size: 1.123rem;
  // font-weight: 600;
  // margin-bottom: 0.6rem;
}
  .num_bg {
    display: inline-block;
    color: #66ffff;
    width: 2.4vw;
    height: 3.0vw;
    line-height: 2.7vw;
    margin: 0 3px;
    font-size: 2vw;
    text-align: center;
    background-image: url("@/assets/img/dsj/num_bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
}
.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>
