<script setup lang="ts">
import { Bottom } from '@element-plus/icons-vue';
import { onMounted } from 'vue';
import * as echarts from 'echarts';

const dateRange = ref([])
const hotModel = ref([])
const newModel = ref([])
const trendModel = ref(null)

onMounted(() => {
  const trend = echarts.init(trendModel.value);
  trend.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  })
})
</script>

<template>
  <div class="wrapper">
    <h2>仪表盘</h2>
    <div class="container">
      <div class="model-data">
        <div class="content">
          <div class="top">模型调用总量</div>
          <div class="mid">1,286,432</div>
          <div class="btm">
            <div>今日：12,456</div>
            <el-icon class="custom-icon" color="#52c41a"><Top /></el-icon>
            <div class="per">5.12%</div>
          </div>
        </div>
        <div class="content">
          <div class="top">成功率</div>
          <div class="mid">99.82%</div>
          <div class="btm">
            <div>今日：99.95%</div>
            <el-icon class="custom-icon" color="#52c41a"><Top /></el-icon>
            <div class="per">0.13%</div>
          </div>
        </div>
        <div class="content">
          <div class="top">平均响应时间</div>
          <div class="mid">1.24s</div>
          <div class="btm">
            <div>今日：1.18s</div>
            <el-icon class="custom-icon" color="#52c41a"><Bottom /></el-icon>
            <div class="per">0.06%</div>
          </div>
        </div>
        <div class="content">
          <div class="top">模型配置总数</div>
          <div class="mid">42</div>
          <div class="btm">
            <div>本周新增：3</div>
            <el-icon class="custom-icon" color="#52c41a"><Top /></el-icon>
            <div class="per">7.7%</div>
          </div>
        </div>
      </div>
      <div class="echart-img">
        <div class="left">
          <div class="top">
            <div>模型调用趋势</div>
            <div>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="defaultTime"
              />
            </div>
          </div>
          <div class="bottom">
            <div ref="trendModel" style="width: 100%; height: 400px;"></div>
          </div>

        </div>
        <div class="right">
          <div class="top">
            模型类型分布
          </div>
          <div class="bottom">

          </div>
        </div>
      </div>
      <el-row>
        <el-col :span="3">
          <h4>热门模型排名</h4>
        </el-col>
        <el-col :span="3" :offset="18">
          <el-button>查看全部</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="hotModel"
        empty-text="暂无数据"
        class="table"
      >
        <el-table-column label="排名">
          <template #default="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column label="模型名称"/>
        <el-table-column label="服务商"/>
        <el-table-column label="调用次数"/>
        <el-table-column label="平均响应时间"/>
        <el-table-column label="成功率"/>
      </el-table>
      <el-row>
        <el-col :span="3">
          <h4>最近新增模型配置</h4>
        </el-col>
        <el-col :span="3" :offset="18">
          <el-button>查看全部</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="newModel"
        class="table"
        empty-text="暂无数据"
      >
        <el-table-column label="模型名称"/>
        <el-table-column label="服务商"/>
        <el-table-column label="类型"/>
        <el-table-column label="创建人"/>
        <el-table-column label="创建时间"/>
      </el-table>
    </div>

  </div>
</template>

<style scoped lang="scss">
.table{
  width: 100%;
  min-height: 300px;
}
.container{
  width: 100%;
  margin-left: 20px;
}

.model-data{
  display: flex;
  justify-content: space-between;
}
.content{
  display: flex;
  flex-direction: column;
  .top{
    color:#999999;
    font-size: 13px;
  }
  .mid{
    color: #222222;
    font-size: 22px;
    font-weight: 600;
  }
  .btm{
    color:#999999;
    display: flex;
    div{
      font-size: 8px;
    }
    .custom-icon{
      font-weight: 600;
      height: 100%;
      svg {
        stroke-width: 2px !important;
        /* 或 */
        font-weight: bold !important;
      }
    }
    .per{
      color: #52c41a;
      text-align: center;
    }
  }
}
.echart-img{
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  .left,
  .right{
    width: 49%;
    display: flex;
    flex-direction: column;
    .top{
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .bottom{
      min-height: 400px;
      width: 100%;
    }
  }

}
.wrapper{
  margin:10px auto;
  width:90%;
}
</style>
