<script setup lang="ts">
import _request from '../utils/request';
import liquidfill from './teaching/liquidfill.vue';
import pie from './teaching/pie.vue';
import stackLine from './teaching/stackLine.vue'


const AllResponse = ref('');
const left_top_table = ref('');
const left_bottom_table = ref('');

const right_top_echartsData = ref('');
const right_bottom_echartsData_right = ref('');
const right_bottom_echartsData_left = ref('');

// const secSchollResourceTitle = ref(["资源名称", "点击量", "点赞数", "下载数"]);
// const secSchollResourceContent = ref([
//   { a1: "童谣童话（课件）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "家乡的古塔（教案）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "墙（教案）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "公交站台设计（课件）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "流动的风景线（课件）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "砖石上的雕刻（课件）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "墙（教案）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "公交站台设计（课件）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "流动的风景线（课件）", a2: 98150, a3: 220925, a4: 72645 },
//   { a1: "砖石上的雕刻（课件）", a2: 98150, a3: 220925, a4: 72645 }
// ])

// const secSchollOpenClassTitle = ref(["", "昨日", "本周", "本月","累计"]);
// const secSchollOpenClassContent = ref([
//   { a1: "开课课时数", a2: 2, a3: 12, a4: 16, a5: 50, a6:216 },
//   { a1: "参与教师数", a2: 6, a3: 28, a4: 32,a5: 76, a6:189 },
// ])
const initData = () => {
  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL:window.GLOBAL_CONFIG.api,
    url: "/openapi/chart/teaching_data.php",
    data:{},
  })
    .then(res => {
      if (res.code == '1') {
        AllResponse.value = res.data;
        console.log(res,"alvis")
        left_top_table.value = res.data.left_top_table;
        left_bottom_table.value = res.data.left_bottom_table;

        right_top_echartsData.value = res.data.right_top_echartsData;
        right_bottom_echartsData_right.value =res.data.right_bottom_echartsData_right
        right_bottom_echartsData_left.value=res.data.right_bottom_echartsData_left
      }
    })
  .catch(error=>{console.log(error)})
}
initData();





</script>

<template>
  <div class="flex justify-between">
    <div class="flex flex-col justify-between" style="width:59%;">

      <div class="w-full">
        <div class="text-lg py-4">{{ left_top_table.bigtitle }}</div>
        <div class="normalTable">
          <div class="flex justify-between normalTable_title" v-if="left_top_table.mainTable">
            <div class="wslice4" v-for="(item,index)  in left_top_table.mainTable.secScholltableTitle " :key="index" >{{item }}</div>
          </div>
          <div class="normalTable_content" v-if="left_top_table.mainTable"  v-for="(item,index) in left_top_table.mainTable.secSchollTableContent" :key="index">
            <div class="normalTable_contentDetile" >
             <div class="wslice4" >{{ item.a1}}</div>
             <div class="wslice4" >{{ item.a2 }}</div>
             <div class="wslice4" >{{ item.a3 }}</div>
             <div class="wslice4" >{{ item.a4 }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="w-full">
        <div class="text-lg py-2">{{ left_bottom_table.bigtitle }}</div>
        <div class="normalTable">
          <div class="flex justify-between normalTable_title" v-if="left_bottom_table.mainTable">
            <div class="wslice5" v-for="(item,index)  in left_bottom_table.mainTable.secScholltableTitle" :key="index" >{{item }}</div>
          </div>
          <div class="normalTable_content" v-if="left_bottom_table.mainTable" v-for="(item,index) in left_bottom_table.mainTable.secSchollTableContent" :key="index">
            <div class="normalTable_contentDetile" >
             <div class="wslice5" >{{ item.a1}}</div>
             <div class="wslice5" >{{ item.a2 }}</div>
             <div class="wslice5" >{{ item.a3 }}</div>
             <div class="wslice5" >{{ item.a4 }}</div>
             <div class="wslice5" >{{ item.a5 }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="w-965px flex flex-col justify-between " style="width:39%;">
      <div class="w-full h-362px flex flex-col border border-hex-0A337E bg-block p-6 mt-15">
        <div class="text-lg mb-4 ">{{ right_top_echartsData.bigtitle }}</div>
        <div class="flex flex-auto">
          <div class="w-1/2 h-full">
            <div class="flex items-end" v-if="right_top_echartsData.right_echartsData">
              <span class="text-sm ">{{ right_top_echartsData.right_echartsData.chat_oneTitle }}</span>
              <span class="text-xl ml-4">{{ right_top_echartsData.right_echartsData.chat_oneNumber }}</span>
            </div>
            <liquidfill  v-if="right_top_echartsData.right_echartsData" :val="right_top_echartsData.right_echartsData.chat_oneVal" />
          </div>
          <div class="w-1/2 h-full">
            <div class="flex items-end" v-if="right_top_echartsData.right_echartsData">
              <span class="text-sm">{{ right_top_echartsData.right_echartsData.chat_twoTitle }}</span>
              <span class="text-xl ml-4">{{ right_top_echartsData.right_echartsData.chat_twoNumber }}</span>
            </div>
            <liquidfill v-if="right_top_echartsData.right_echartsData" :val="right_top_echartsData.right_echartsData.chat_twoVal" />
          </div>
        </div>
      </div>

      <div class="w-full flex  h-457px justify-between mt-7">
        <div class="w-405px h-full p-4 flex flex-col border border-hex-0A337E bg-block" style="width:49%;">
          <div class="text-lg py-4">{{ right_bottom_echartsData_right.bigtitle }}</div>
          <div class="w-full flex-grow">
            <pie v-if="right_bottom_echartsData_right.echartsData" :ecahrtsData="right_bottom_echartsData_right.echartsData" />
          </div>
        </div>
        <div class="w-528px h-full p-4 flex flex-col border border-hex-0A337E bg-block" style="width:49%;">
          <div class="text-lg mb-4 ">{{ right_bottom_echartsData_left.bigtitle }}</div>
          <stackLine v-if="right_bottom_echartsData_left.echartsData"  :ecahrtsData="right_bottom_echartsData_left.echartsData" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wslice8{
  width: 12%;
}
.wslice7{
  width: 14%;
}
.wslice6{
  width: 16%;
}
.wslice5{
  width: 20%;
}
.wslice4{
  width: 25%;
}

.normalTable_title{
  height:50px;
  line-height: 50px;
  box-sizing: border-box;
  padding:0 2%;
  background: linear-gradient(90deg,rgba(11,38,147,1) 0%, rgba(27,66,131,0) 100%);
  font-size: 14px;
  font-weight: normal;
  
}
.normalTable_title div{
  text-align: center;
}

.normalTable_content{
  display: flex;
  justify-content: space-between;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  padding:0 2%;
  background-color: rgba(0,22,68, 0.5);
}
.normalTable_contentDetile{
  width:100%;
  display: flex;
  flex-direction: row;
  justify-content:space-between;

}
.normalTable_contentDetile div{
  text-align: center;
}
</style>
