<template>
  <div class="body1" v-loading="isLoading">
    <barList :dataExponentList="dataExponentList"></barList>
    <!-- 第一行 -->
    <div class="AIAppOne">
      <div style="display: flex;flex-direction: column;gap: 10px;max-width: 360px;min-width: 314px;">
        <div class="AIAppOneCon" style="flex: 1;">
          热门应用Top5
          <div class="hotCon">
            <div v-for="(i,index) in alldata[0]" :key="index" class="hotConA">
              <div class="hotConAA">
                <span>{{ index + 1 }}</span>
                <div class="hotConAATxt">{{ i.name }}</div>
              </div>
              <div style="color: #3072D8;width: 80px;text-align: right">{{ i.form_count }}次</div>
            </div>
          </div>
        </div>
        <div class="AIAppOneCon" style="flex: 1;">
          创作者Top5
          <div class="hotCon">
            <div v-for="(i,index) in alldata[1]" :key="index" class="hotConA">
              <div class="hotConAA">
                <span>{{ index + 1 }}</span>
                <div class="hotConAATxt">{{ i.username }}</div>
              </div>
              <div style="color: #3072D8;width: 80px;text-align: right;">{{ i.form_count }}个</div>
            </div>
          </div>
        </div>
      </div>
      <div class="AIAppOneCon" style="flex: 1;">
        <ParetoChart :chartData="alldata[4]"></ParetoChart>
      </div>
    </div>

    <div class="AIAppTwo">
      <div>
        <appPub :chartData="alldata[3]"></appPub>
      </div>
      <div>
        <appUse :chartData="alldata[2]"></appUse>
      </div>
    </div>
  </div>
</template>

<script>
import appUse from "./chartList/appUse.vue";
import appPub from "./chartList/appPub.vue";
import ParetoChart from "./chartList/ParetoChart.vue";
import barList from '../barList.vue';
import { API_CONFIG } from "@/common/apiConfig";

export default {
  name:'AIappComponent',
  components: {
    appUse,
    appPub,
    ParetoChart,
    barList
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
    userid:{
      type: String,
    },
  },
  data() {
    return {
      dataExponentList:[],
      alldata:[],
      isLoading: false,
    };
  },
  watch:{
        oid(newL){
            console.log(newL);

            this.getAIData()
        }
    },
   methods: {
        async getAIData() {
          this.isLoading = true;
          let params = [
            {
              functionName: API_CONFIG.getKanbanAIdata.functionName,
              suserid:this.userid,
              oid: this.oid,
              org: '',
              exportType:"",
            },
          ];
          // let cot = await this.getAppStoreControl()
          
          this.$ajax
            .post(API_CONFIG.baseUrl, params)
            .then((res) => {
                let top = [
                  { label: 'AI应用数量', value: 0 },
                  { label: '今日用户数量', value: 0 },
                  { label: '知识库数量', value: 0 },
                  { label: '文件数量', value: 0 },
                ]

                top[0].value = res.data[0][0].num
                top[1].value = res.data[1][0].num
                top[2].value = res.data[2][0].num
                top[3].value = res.data[3][0].num
              
                this.dataExponentList = top

                this.alldata = res.data.slice(4)
                this.isLoading = false;

            })
            .catch((err) => {
                this.isLoading = false;
                console.error(err);
            });
        },
    },
    mounted() {
        // console.log(666);
      
        this.getAIData()
    },
};
</script>

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

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

.hotCon{
  display: flex;
  flex-direction: column;
  background: #F8FAFC;
  padding: 20px 15px;
  flex: 1;
  box-sizing: border-box;
  border-radius: 10px;
  margin-top: 10px;
  gap: 10px;
}
.hotConA{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 8px;
  box-sizing: border-box;
  border-bottom:1px #e7e7e7 solid;
}
.hotConAA{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.hotConAATxt{
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis; 
  width: 100%;
}
.hotConAA > span{
  padding: 0px 5px;
  color: #fff;
  margin-right: 5px;
  box-sizing: border-box;
  background: #0358D2;
  border-radius: 3px;
}
</style>