<template>
  <div style="background-color: white;padding: 16px;" class="allCard">
    <Card v-for="(item,index) in cardList"  @click="cardClick(item)" :key="index">
      <template #title>
       <div class="title">
        {{ item.name }}
       </div>
      </template>
      <template #content>
        <div class="content">
          <div class="num" v-if="item.num!==undefined">
            {{ item.num }}
          </div>
          <div v-else id="homeMain" ref="main"> </div>
          <div class="describe">
            {{ item.describe }}
          </div>
        </div>
      </template>
    </Card>

  </div>
</template>

<script>
import Card from './card';
import * as echarts from 'echarts';
export default {
  data () {
    return {
      echarts: undefined,
      cardList: [
        {
          name: '数据集',
          num: 0,
          describe: '数据集总量'
        },
        {
          name: '模型',
          num: 0,
          describe: '模型总量'
        },
        {
          name: '应用接入',
          num: 0,
          describe: '应用接入总量'
        },
        {
          name: 'Prompt模板',
          num: 0,
          describe: 'Prompt模板总量'
        },
        {
          name: '调用统计'
     
        }
      ],
      option: {
        color: ['#37A2FF', '#FFBF00'],
        legend: {
          type: 'scroll',
          top: '0%',
          left: 'center',
          show: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219)'
                }
              ])
            },
            data: [140, 232, 101, 264, 90, 340, 250],
            type: 'line',
            name: '调用总量'
          }
        ]
      }
    }
  },
  components: {Card},
  mounted () {
    this.$nextTick(() => {
      this.echarts = echarts.init(document.getElementById('homeMain'));
      this.echarts.setOption(this.option, true);
    })
  },
  methods: {
    cardClick () {
      console.log(1);
    },
    resize () {
      if (this.echarts != null) {
        this.echarts.resize();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/assets/style/element-variables.scss';
  .title {
    border-left: 1px solid;
    border-left-width: 5px;
    border-left-color: $--color-primary;
    margin-bottom: 20px;
    font-size: 17px;
    padding-left: 10px;
  }
  #homeMain{
height:400px;
  width:100%;
}
  .title p {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    margin: 0px;
    padding-left: 20px;
  }

  .title p span {
    font-size: 20px;
    color: $--color-primary;
  }

  .item-list {
    margin: 0px;
  }
  .item-list li {
    margin: 10px 0px;
  }

  .item {
    height: 48px;
    display: flex;
    align-items: center;
  }

  strong.warning {
    color: red;
    font-size: 16px;
  }
  .allCard {
  display: grid !important;
  /* grid-column-gap: 50px;
  grid-row-gap: 50px; */
  grid-gap: 20px 20px;
  grid-template: 1fr 2fr / 1fr 1fr 1fr 1fr;
  height: 100%;
}

.allCard :nth-child(5) {
  grid-column-start: 1;
  grid-column-end: 5;

}
.content{
  
  height: calc(100% - 45px);
  display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

}
.num{
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
.describe{
  text-align: center;
}
</style>
