<template>
  <div class="body1" v-loading="isLoading">
    <barList :dataExponentList="dataExponentList"></barList>
    <div class="AIAppOne">
      <div style="background-color: #fff;">
        <BubbleChart :grades="alldata[1]" :subjects="alldata[2]" :courses="alldata[3]"></BubbleChart>
      </div>
      <div style="display: flex;flex-direction: column;gap: 10px;padding: 0;">
          <div class="AIAppOneCon" style="flex: 1;">
            学生参与Top5
            <div class="hotCon">
              <div v-for="(i,index) in alldata[4]" :key="index" class="hotConA">
                <div class="hotConAA">
                  <span>{{ index + 1 }}</span>
                  <div class="hotConAATxt">{{ i.title }}</div>
                </div>
                <div style="color: #3072D8;width: 80px;text-align: right">{{ i.num }}次</div>
              </div>
            </div>
          </div>
          <div class="AIAppOneCon" style="flex: 1;">
            课程复用Top5
            <div class="hotCon">
              <div v-for="(i,index) in alldata[5]" :key="index" class="hotConA">
                <div class="hotConAA">
                  <span>{{ index + 1 }}</span>
                  <div class="hotConAATxt">{{ i.title }}</div>
                </div>
                <div style="color: #3072D8;width: 80px;text-align: right">{{ i.opennum }}次</div>
              </div>
            </div>
          </div>
      </div>
      
    </div>

    <div class="AIAppTwo">
      <div class="AIAppOneCon">
        AI辅助设计分析
        <aidedDesign :alldata="alldata[0]" :subject="alldata[2]"></aidedDesign>
      </div>
      <div class="AIAppOneCon">
        AI应用使用分析
        <appUseAss :alldata="alldata[0]" :subject="alldata[2]"></appUseAss>
      </div>
    </div>
  </div>
</template>

<script>
  import BubbleChart from "./chartList/BubbleChart.vue";
  import aidedDesign from "./chartList/aidedDesign.vue";
  import appUseAss from "./chartList/appUseAss.vue";
  import barList from '../barList.vue';
import { API_CONFIG } from "@/common/apiConfig";
  
export default {
  name:'TeaingChartComponent',
  components: {
    BubbleChart,
    aidedDesign,
    appUseAss,
    barList
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    }
  },

  data() {
    return {
      alldata:[],
      dataExponentList:[],
      isLoading:false,
    };
  },
  mounted() {
    this.getTeaData()
  },
  watch:{
        oid(newL){
            console.log(newL);

            this.getTeaData()
        }
    },
  methods: {
    async getTeaData() {
      this.isLoading = true;
      let params = [
        {
          functionName: API_CONFIG.getKanbanTeadata.functionName,
          oid: this.oid,
          org: '',
        },
      ];
      
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
            let top = [
              { label: '课程总量', value: 0 },
              { label: '本月新增课程', value: 0 },
              { label: '新增课程环比', value: 0 },
              { label: 'AI应用嵌入数量', value: 0 },
            ]

            top[0].value = res.data[0][0].num
            top[1].value = res.data[1][0].num //本月新增
            //上月新增
            if(!res.data[1][0].num || !res.data[2][0].num){
              top[2].value = '0%'
            }else{
              top[2].value = ((res.data[1][0].num - res.data[2][0].num) / res.data[2][0].num).toFixed(2) * 100 + '%'
            }
            
            // 课程所有阶段整合
            let k =  this.Aitool(res.data[3].filter(e => e.state != 7))
            top[3].value = k

            this.dataExponentList = top

            this.alldata = res.data.slice(3)
            // console.log('getTeaData',this.alldata);
            
            this.isLoading = false;
        })
        .catch((err) => {
            this.isLoading = false; 
            console.error(err);
        });
    },
    Aitool(val){
        // 一层一层往下剥，最后得出所有工具的数组
        let data = val.map(e=> JSON.parse(e.chapters)).flat(); 
        let a = data.map(e => e.chapterInfo[0].taskJson).flat()
        let b = a.map(e => {
          if (e.toolChoose && e.toolChoose.length) { 
            return e.toolChoose
          }
        }).flat()
        
        let alltool = b.map(e=>{ 
          if (e && e.tool && e.tool.length) {
            return e.tool[0]
          }
        }).filter(num => num === 72).length
        // console.log('alltool',alltool); 

        return  alltool
    }
  },
};
</script>


<style scoped>
.body1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.AIAppOne{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 3列网格 */
  min-height: 598px;
  gap: 20px;  /* 间距 */
}
.AIAppOne > div{
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  /* background: #fff; */
  box-sizing: border-box;
}

.AIAppOneCon{
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.AIAppTwo{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 3列网格 */
  height: 500px;
  gap: 20px;  /* 间距 */
}
.footCon{
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fff;
  height: 350px;
}
.hotCon{
  display: flex;
  flex: 1;
  flex-direction: column;
  background: #F8FAFC;
  padding: 20px 15px;
  box-sizing: border-box;
  border-radius: 8px;
  gap: 10px;
  margin-top: 10px;
}
.hotConA{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 8px;
  /* height: 30px; */
  box-sizing: border-box;
  border-bottom:1px #e7e7e7 solid;
}
.hotConAA{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.hotConAA > span{
  padding: 0px 5px;
  color: #fff;
  margin-right: 5px;
  box-sizing: border-box;
  background: #0358D2;
  border-radius: 3px;
}
.hotConAATxt{
  -webkit-line-clamp: 1;
  display: -webkit-box;
  font-size: 14px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
  width: 100%;
}
</style>