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

import { userDetail } from './school/apiItem';

const AllResponse = ref("");

const left_coneEchartsData = ref("");
const left_bottom_table = ref("");
const right_top_table = ref("");
const right_bottom_table = ref("");

// 二级分校基本情况
// const secScholltableTitle = ref(["二级分校", "结对学校数量", "结对教师数量", "结对班级数量", "开课数量", "资源贡献数量", "线上教研次数", "覆盖学生数量"]);
// const secSchollTableContent = ref([
//   { schollName: "尚阳学校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
//   { schollName: "振东小校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
//   { schollName: "尚阳学校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
//   { schollName: "振东小校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
//   { schollName: "尚阳学校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
//   { schollName: "振东小校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 }
// ])

//二级分校月考核数据表
// const secSchollYKTitle = ref(["学校", "硬件设施", "辐射范围", "教学管理", "教研活动", "教学效果", "总分"]);
// const secSchollYKContent = ref([
//   { a1: "尚阳学校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
//   { a1: "振东小校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
//   { a1: "尚阳学校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
//   { a1: "振东小校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
//   { a1: "尚阳学校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
//   { a1: "振东小校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 }
// ])


//受援学校月考核数据表
// const secSchollSupportTitle = ref(["学校", "硬件设施", "教学管理", "教研活动", "教学效果", "总分"]);
// const secSchollSupportContent = ref([
//   { a1: "河山", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
//   { a1: "大麻", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
//   { a1: "东方", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
//   { a1: "河山", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
//   { a1: "大麻", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
//   { a1: "东方", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
// ])


const initData = () => {
  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL:window.GLOBAL_CONFIG.api,
    url: "/openapi/chart/school_data.php",
    data:{},
  })
    .then(res => {
      if (res.code == '1') {
        AllResponse.value = res.data;
        console.log(res, "alvis")
        left_coneEchartsData.value = res.data.left_coneEchartsData;
        left_bottom_table.value = res.data.left_bottom_table;
        right_top_table.value = res.data.right_top_table;
        right_bottom_table.value = res.data.right_bottom_table;
      }
    })
  .catch(error=>{console.log(error)})
}
initData();



</script>

<template>
  <div class="flex flex-col justify-between">
    <div class="flex justify-between">
      <div style="width:49%;">
        <div class="w-full flex flex-col border border-hex-0A337E bg-block p-6">
          <div class="text-lg mb-2 ">桐乡农村学校艺术类教师结构性缺编情况</div>
          <div class="h-60">
            <cone v-if="left_coneEchartsData" :ecahrtsData="left_coneEchartsData" />
          </div>
          
        </div>
        
      </div>
      <div style="width:49%;">
        <div class="text-lg mb-2 ">{{ left_bottom_table.bigtitle }}</div>
        <div class="normalTable">
          <div class="flex justify-between normalTable_title" v-if="left_bottom_table.mainTable">
            <div class="wslice8" 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="wslice7">{{ item.a1}}</div>
              <div class="wslice7">{{ item.a2 }}</div>
              <div class="wslice7">{{ item.a3 }}</div>
              <div class="wslice7">{{ item.a4 }}</div>
              <div class="wslice7">{{ item.a5 }}</div>
              <div class="wslice7">{{ item.a6 }}</div>
              <div class="wslice7">{{ item.a7 }}</div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <div class="flex justify-between mt-4">
      <div style="width:49%;">
        
        <div class="text-lg mb-2 ">{{ right_top_table.bigtitle }}</div>
        <div class="normalTable">
          <div class="flex justify-between normalTable_title" v-if="right_top_table.mainTable">
            <div class="wslice7" v-for="(item,index)  in right_top_table.mainTable.secScholltableTitle " :key="index" >{{item}}</div>
          </div>
          <div class="flex justify-between normalTable_content" v-if="right_top_table.mainTable" v-for="(item,index) in right_top_table.mainTable.secSchollTableContent" :key="index">
            <div class="normalTable_contentDetile" >
             <div class="wslice8" >{{ item.schollName}}</div>
             <div class="wslice8" >{{ item.linkNum }}</div>
             <div class="wslice8" >{{ item.linkTeacherNum }}</div>
             <div class="wslice8" >{{ item.linkClassMates }}</div>
             <div class="wslice8" >{{ item.startClassNum }}</div>
             <div class="wslice8" >{{ item.resourceControNum }}</div>
             <div class="wslice8" >{{ item.onlineTeachNum }}</div>
             <div class="wslice8" >{{ item.coverStudentNum }}</div>
            </div>
          </div>
        </div>

      </div>
      <div style="width:49%;">
        <div class="text-lg mb-2 ">{{ right_bottom_table.bigtitle }}</div>
        <div class="normalTable">
          <div class="flex justify-between normalTable_title" v-if="right_bottom_table.mainTable">
            <div class="wslice6" v-for="(item,index)  in right_bottom_table.mainTable.secScholltableTitle " :key="index" >{{item }}</div>
          </div>
          <div class="flex justify-between normalTable_content" v-if="right_bottom_table.mainTable" v-for="(item,index) in right_bottom_table.mainTable.secSchollTableContent" :key="index">
            <div class="normalTable_contentDetile" >
             <div class="wslice6">{{ item.a1}}</div>
             <div class="wslice6">{{ item.a2 }}</div>
             <div class="wslice6">{{ item.a3 }}</div>
             <div class="wslice6">{{ item.a4 }}</div>
             <div class="wslice6">{{ item.a5 }}</div>
             <div class="wslice6">{{ item.a6 }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

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

.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>
