<!--
 * 轮播图
  -->
<script setup lang="ts">
import { reactive, onMounted, onBeforeUnmount } from 'vue';
import Com from 'src/components';
import { WarpTestData, WarpTestData2, WarpTestData3 } from '../config';
import * as echarts from 'echarts';

const state = reactive({
  list: [] as any,
  times: 5000,
  testChart: null as any,
});

onMounted(() => {
  test111();
  initData();
});

onBeforeUnmount(() => {
  //
});

function initData() {
  state.list = WarpTestData;
}

function onDataChange1() {
  state.list = WarpTestData;
}

function onDataChange2() {
  state.list = WarpTestData2;
}

function onDataChange3() {
  state.list = WarpTestData3;
}

function onSetToEnpty() {
  state.list = [];
}

function onChangeTimers() {
  state.times = 2000;
}

function test111() {
  let chartDom: any = document.getElementById('test111');
  state.testChart = echarts.init(chartDom);
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
      },
    ],
  };
  state.testChart.setOption(option);
}
function onDestructionChart() {
  state.testChart.dispose();
}
function onResetChart() {
  test111();
}
function onResetData() {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [300, 300, 300, 300, 300, 300, 300],
        type: 'line',
      },
    ],
  };
  state.testChart.setOption(option);
}
function onView() {
  console.log('查看 =', state.testChart);
}
</script>
<template>
  <div class="fit">
    <div class="my-warp-box">
      <Com.CarouselWarp
        navigation
        item-key="id"
        :list="state.list"
        :times="state.times"
      >
      </Com.CarouselWarp>
    </div>
    <div class="btns">
      <q-btn
        label="图表轮播图测试数据1"
        @click="onDataChange1"
        color="primary"
      />
      <q-btn
        label="图表轮播图测试数据2"
        @click="onDataChange2"
        color="primary"
      />
      <q-btn
        label="图表轮播图测试数据3"
        @click="onDataChange3"
        color="primary"
      />
      <q-btn label="将数据置为空" @click="onSetToEnpty" color="primary" />
      <q-btn label="改变轮播时间" @click="onChangeTimers" color="orange" />
    </div>

    <q-btn label="销毁图表" @click="onDestructionChart" color="orange" />
    <q-btn label="重绘图表" @click="onResetChart" color="orange" />
    <q-btn label="重新设置数据" @click="onResetData" color="orange" />
    <q-btn label="查看" @click="onView" color="orange" />
    <div class="test111" id="test111"></div>
  </div>
</template>

<style lang="scss" scoped>
.test111 {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
.my-warp-box {
  width: 500px;
  height: 300px;
}
.btns {
  padding-top: $padding-md;
  display: flex;
  flex-wrap: wrap;
  > button {
    margin-right: $padding-sm;
    margin-bottom: $padding-md;
  }
}
</style>