<template>
  <section class="main">
    <!--element-plus组件使用-->
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
    </el-row>
    <!--使用element-plus图标-->
    <def-icon icon="location" />
    <def-icon icon="share" />
    <def-icon icon="loading" />
    <def-icon icon="loading" />
    <el-button type="primary">
      <def-icon icon="loading" />
      <span style="vertical-align: middle"> Search </span>
    </el-button>
    <!--图表使用-->
    <div class="chart">
      <def-chart :options="options"></def-chart>
    </div>
    <!--自定义本地图标使用-->
    <def-icon icon="svg-article" />
    <!--    <LayoutTabs/>-->
    <div class="main-color-bg">
      <p>main-color-bg</p>
      <p class="font-color">font-color</p>
      <p class="font-color-active">font-color-active</p>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import * as echarts from 'echarts'
type EChartsOption = echarts.EChartsOption

/* 初始化图表配置 */
const options = reactive<EChartsOption>({
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
})
</script>

<style scoped lang="scss">
.main {
  height: 100%;

  @include flexCol;
  .chart {
    width: 100%;
    height: 300px;
  }
}

/* .def-icon{
  font-size: 20px;
  color: red;
} */
</style>
