<script lang="ts" setup name="DeviceBench">
import type { Ref } from 'vue'
import LineChart from '@/components/Echart/LineChart.vue'
import PieChart from '@/components/Echart/PieChart.vue'
import BarChartHorizontal from '@/components/Echart/BarChartHorizontal.vue'
import BarChartVertical from '@/components/Echart/BarChartVertical.vue'
import type { lineDataI, pieDataI } from '@/components/Echart/echart-interface'
// 逻辑代码
const loading = ref(false)
const xAxis: Ref<string[]> = ref([])
const data: Ref<lineDataI[]> = ref([])

const piechartData: Ref<pieDataI[]> = ref([])
const total = ref(0)

onMounted(() => {
  loading.value = true
  xAxis.value = ['1月', '2月', '3月', '4月', '5月']
  data.value = [{ name: '出勤率', data: ['0', '0', '0', '0', '0'] }]
  setTimeout(() => {
    // 折线图数据
    xAxis.value = ['实验室一', '实验室二', '实验室三', '实验室四', '实验五']
    // data.value = [{ name: '出勤率', data: [1, 15, 10, 12, 6] }, { name: '应出勤', data: [3, 6, 1, 18, 20] }]
    data.value = [{ name: '出勤率', data: ['40', '80', '60', '12', '6'] }]
    // 饼状图数据
    piechartData.value = [{ name: '出勤', value: 10 }, { name: '缺勤', value: 15 }]
    // 饼状图中心值
    total.value = piechartData.value.reduce((prev, cur) => prev + cur.value, 0)
    loading.value = false
  }, 1000)
})
</script>

<template>
  <app-container>
    <div class="test-div">
      <line-chart :x-axis-data="xAxis" :data="data" unit="个" />
    </div>
    <div class="test-div">
      <bar-chart-horizontal :x-axis-data="xAxis" :data="data" :max="100" label-position="fixedEnd" color-by="series" :gradient="false" :axis-label-width="90" />
    </div>
    <div class="test-div">
      <bar-chart-vertical :x-axis-data="xAxis" :data="data" label-position="top" bar-width="25" color-by="series" :gradient="true" :axis-label-width="90" />
    </div>
    <div class="test-div">
      <pie-chart :data="piechartData" :label-formatter="`${total}`" />
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.test-div {
  width: 48%;
  height: 300px;
  background-color: #fff;
  padding: 10px;
  margin: 10px;
  float: left;
}
</style>