<script setup lang="ts">

import _request from '../utils/request';
import radars from './home/radars.vue';
import bar1 from './home/bar1.vue';

import geoblock from './home/geoblock.vue';

import blocks from './home/blocks.vue'
import scrollblock from './home/scrollblock.vue';

import bar2 from './home/bar2.vue';

import line1 from './home/line1.vue';
import line2 from './home/line2.vue';
import line3 from './home/line3.vue';


const AllResponse = ref('');

const left_top_ecahrtsData = ref("");
const left_bottom_ecahrtsData = ref("");

const middle_top_data = ref({})
const middle_middle_data = ref('');

const left_baseShow = ref({});
const onineClass=ref({})

const right_top_echartsData=ref("")
const right_middle_echartsData=ref("")
const right_bottom_echartsData=ref("")
const right_bottomSec_echartsData = ref("");

const initData = async () => {
  let  date=new Date;
  let getYear = date.getFullYear();
  let transData = {
    year:getYear
  };

 await  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL:window.GLOBAL_CONFIG.api,
    url: "/openapi/chart/home_data.php",
    data:transData,
  })
    .then(res => {
      if (res.code == '1') {
        AllResponse.value = res.data;
        console.log(res,"67567");
        left_top_ecahrtsData.value = res.data.left_top_ecahrtsData;
        left_bottom_ecahrtsData.value = res.data.left_bottom_ecahrtsData;

        middle_top_data.value = res.data.middle_top_data;
        middle_middle_data.value = res.data.middle_middle_data;

        left_baseShow.value = res.data.middle_bottom_data.left_baseShow;
        onineClass.value = res.data.middle_bottom_data.onineClass;

        right_top_echartsData.value = res.data.right_top_echartsData;

        right_middle_echartsData.value = res.data.right_middle_echartsData;
        right_bottom_echartsData.value = res.data.right_bottom_echartsData;
        right_bottomSec_echartsData.value=res.data.right_bottomSec_echartsData;
      }
    })
  .catch(error=>{console.log(error)})
}
await initData();


</script>

<template>
  <div class="flex justify-between">
    <div class="h-full flex flex-col justify-between" style="width: 25%;">
      <div class="border border-hex-0A337E bg-block p-4  h-1/2">
        <radars v-if="left_top_ecahrtsData"  :ecahrtsData="left_top_ecahrtsData" />
      </div>
      <div class="border border-hex-0A337E bg-block mt-4 h-1/2">
        <bar1 v-if="left_bottom_ecahrtsData" :ecahrtsData="left_bottom_ecahrtsData" />
      </div>
    </div>
    <div class="flex flex-col justify-between " style="width: 48%;">
      <div class="flex justify-evenly">
        <div class="flex flex-col">
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">全市学校数：</div>
            <div class="text-28px mr-1">{{ middle_top_data.allSchoolNum }}</div>
            <div>个</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">全市学校班级数：</div>
            <div class="text-28px mr-1">{{middle_top_data.allCitySchoolNum }}</div>
            <div>个</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">结对学校数：</div>
            <div class="text-28px mr-1">{{middle_top_data.linkSchool }}</div>
            <div>个(市外：{{middle_top_data.outlinkSchool}}个)</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">结对教师数：</div>
            <div class="text-28px mr-1">{{middle_top_data.linkTeacher }}</div>
            <div>个(市外：{{middle_top_data.outLinkTeacher}}个)</div>
          </div>
        </div>

        <div class="flex flex-col flex-grow max-w-480px">
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              缺少专职美术教师学校数：
            </div>
            <div class="text-28px mr-1">
              {{ middle_top_data.lackschool }}
            </div>
            <div>个</div>
            <div class="text-xs text-hex-16F5FF flex-auto text-right mr-2" v-if="false">
              百分比{{ middle_top_data.lackschoolPercent }}
            </div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              缺少专职美术教师学校班级数：
            </div>
            <div class="text-28px mr-1">
              {{ middle_top_data.lackClassNum }}
            </div>
            <div>个</div>
            <div class="text-xs text-hex-16F5FF flex-auto text-right mr-2" v-if="false">
              百分比{{ middle_top_data.lackClassNumPercent }}
            </div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              结对班级数：
            </div>
            <div class="text-28px mr-1">
              {{ middle_top_data.linkClass }}
            </div>
            <div>个 ( 市外：{{middle_top_data.outLinkClass}}个 )</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              结对学生数：
            </div>
            <div class="text-28px mr-1">
              {{ middle_top_data.linkStudentNum }}
            </div>
            <div>个 ( 市外：{{middle_top_data.outLinkStudentNum}}个 )</div>
          </div>
        </div>
      </div>

      <geoblock v-if="middle_middle_data" :list_blue="middle_middle_data.list_blue" :list_yellow="middle_middle_data.list_yellow" :list_red="middle_middle_data.list_red" />

      <div class="flex justify-between h-240px">
        <blocks :objectPackbage="left_baseShow" class="w-557px border border-hex-0A337E bg-block py-6 px-8 mr-4" />
        <!-- :packageAll="onineClass" -->
        <scrollblock v-if="onineClass" :packageAll="onineClass"  />
      </div>
    </div>
    <div class="h-full flex flex-col justify-between" style="width: 25%;">
      <div class="border border-hex-0A337E bg-block p-4 mb-4 h-1/4">
        <bar2 v-if="right_top_echartsData" :ecahrtsData="right_top_echartsData"  />
      </div>
      <div class="border border-hex-0A337E bg-block mb-4 h-1/4">
        <div class="w-full flex flex-row justify-between p-2" v-if="right_middle_echartsData.baseTitleObj">
          <div class="left_1">{{ right_middle_echartsData.baseTitleObj.titleShow}}</div>
          <div class="left_2">{{ right_middle_echartsData.baseTitleObj.pencent }}</div>
        </div>
        <line1 v-if="right_middle_echartsData" :ecahrtsData="right_middle_echartsData" />
      </div>
      <div class="border border-hex-0A337E bg-block mb-4 h-1/4" v-if="right_bottom_echartsData.baseTitleObj">
        <div class="w-full flex flex-row justify-between p-2">
          <div class="left_1">{{ right_bottom_echartsData.baseTitleObj.titleShow}}</div>
          <div class="left_2">{{ right_bottom_echartsData.baseTitleObj.pencent }}</div>
        </div>
        <line2 v-if="right_bottom_echartsData" :ecahrtsData="right_bottom_echartsData" />
      </div>
      <div class="border border-hex-0A337E bg-block mb-4 h-1/4" v-if="right_bottomSec_echartsData.baseTitleObj">
        <div class="w-full flex flex-row justify-between p-2">
          <div class="left_1">{{ right_bottomSec_echartsData.baseTitleObj.titleShow }}</div>
          <div class="left_2">{{ right_bottomSec_echartsData.baseTitleObj.pencent }}</div>
        </div>
        <line3 v-if="right_bottomSec_echartsData" :ecahrtsData="right_bottomSec_echartsData" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.left_1 {
  text-align: left;
  font-size: 14px;
  ;
}

.left_2 {
  text-align: right;
  color: #0FEEF1;
}
</style>
