<template>
  <div class="q-gutter-md overflow-hidden">
    <q-virtual-scroll
      ref="virtualListRef"
      :items="heavyList"
      v-slot="{ item, index }"
      class="container-height"
      :virtual-scroll-slice-ratio-before="1"
      :virtual-scroll-slice-ratio-after="0.1"
      :virtual-scroll-item-size="600"
      :virtual-scroll-sticky-size-start="0"
      :virtual-scroll-sticky-size-end="10"
    >
      <q-item :key="index" v-if="item.id === '1'">
        <div class="q-gutter-sm full-width">
          <q-btn
            outline
            label="success"
            color="positive"
            @click="onClick('success')"
          />
          <q-btn
            outline
            label="error"
            color="negative"
            @click="onClick('error')"
          />
          <q-btn
            outline
            label="warn"
            color="warning"
            @click="onClick('warn')"
          />
          <q-btn outline label="info" color="info" @click="onClick('info')" />
        </div>
      </q-item>

      <q-item :key="index" dense v-if="item.id === '2'">
        <div class="q-gutter-sm full-width">
          <Com.DateTimePick
            style="width: 220px"
            v-model="dates"
            format24h
            with-seconds
          />
        </div>
      </q-item>

      <q-item :key="index" dense v-if="item.id === '3'">
        <div class="actions full-width">
          <div class="q-ml-sm">
            <q-btn
              round
              color="primary"
              :icon="ICON.mapLocation"
              @click="getLocation"
              title="定位"
            />
          </div>
          <div class="q-mr-sm q-gutter-sm">
            <q-btn
              v-if="!state.isPlay"
              round
              color="play"
              :icon="ICON.play"
              @click="chartRaceRun"
              title="开始"
            />
            <q-btn
              v-else
              round
              color="pause"
              :icon="ICON.pause"
              @click="chartRaceStop"
              title="停止"
            />
          </div>
        </div>
      </q-item>

      <q-item :key="index" dense v-if="item.id === '4'">
        <div class="map full-width">
          <div class="left-area q-ml-sm" ref="leftMapRef">
            <template v-if="state.isRenderMap">
              <Com.BaiduMap
                id="allmap"
                ref="allmapRef"
                :scrollWheelZoom="false"
                navigationControl
                overviewMapControl
                scaleControl
                :width="state.width"
                :height="state.height"
              />
            </template>
          </div>
          <div v class="right-area q-mr-sm">
            <!-- 动态排序柱状图 -->
            <ChartsRace ref="faChartsRaceRef" />
          </div>
        </div>
      </q-item>

      <q-item :key="index" dense v-if="item.id === '5'">
        <div class="map full-width">
          <div class="left-area q-ml-sm">
            <!-- 动态数据 -->
            <ChartDynamic />
          </div>
          <div class="right-area q-mr-sm">
            <!-- 时钟 -->
            <ChartsClock />
          </div>
        </div>
      </q-item>

      <q-item :key="index" dense v-if="item.id === '6'">
        <div class="map full-width">
          <div class="left-area q-ml-sm">
            <!-- 多Y轴示例 -->
            <ChartMultipleY />
          </div>
          <div class="right-area q-mr-sm">
            <!-- 联动和共享数据集 -->
            <ChartShareDataset />
          </div>
        </div>
      </q-item>

      <q-item :key="index" dense v-if="item.id === '7'">
        <div class="actions full-width">
          <div class="q-ml-sm">
            <q-btn color="primary" label="重置图节点" @click="resetChartNode" />
          </div>
        </div>
      </q-item>

      <q-item :key="index" dense v-if="item.id === '8'">
        <div class="map full-width">
          <div class="left-area q-ml-sm">
            <!-- 动态增加图节点 -->
            <ChartGraphDynamic ref="faGraphDynamicChartRef" />
          </div>
          <div class="right-area q-mr-sm">2</div>
        </div>
      </q-item>

      <q-item :key="index" dense v-if="index > 7">
        <ChartItem :id="`item-chart${item.id}`" />
      </q-item>
    </q-virtual-scroll>
  </div>
</template>
<script lang="ts">
export default {
  name: 'PAGE1',
};
</script>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { date, dom } from 'quasar';
import { useMessage } from 'src/common/hooks';
import ICON from 'src/config/icons';
import Com from 'src/components';
import ChartsRace from './elements/ChartsRace.vue';
import ChartDynamic from './elements/ChartDynamic.vue';
import ChartsClock from './elements/ChartsClock.vue';
import ChartMultipleY from './elements/ChartMultipleY.vue';
import ChartShareDataset from './elements/ChartShareDataset.vue';
import ChartGraphDynamic from './elements/ChartGraphDynamic.vue';
import ChartItem from './elements/ChartItem.vue';

// function renewStore() {
//   user_store.$patch((state) => {
//     state.count++;
//     state.arr.push(1);
//   });
//   user_store.changeState(10);
// }

const { height, width } = dom;
const { success, error, warn, info } = useMessage();
const dates = ref(date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm:ss'));
const virtualListRef = ref<any>(null);
const leftMapRef = ref<any>(null);
const allmapRef = ref<any>(null);
const faChartsRaceRef = ref<any>(null);
const faGraphDynamicChartRef = ref<any>(null);
const state = reactive({
  width: 0,
  height: 0,
  isRenderMap: false,
  bMapApi: null as any,
  isPlay: true,
});

const heavyList = ref<any>([
  { id: '1' },
  { id: '2' },
  { id: '3' },
  { id: '4' },
  { id: '5' },
  { id: '6' },
  { id: '7' },
  { id: '8' },
]);

onMounted(() => {
  for (let index = 0; index < 500; index++) {
    heavyList.value.push({
      id: String(heavyList.value.length + 1),
    });
  }

  setTimeout(() => {
    console.log('宽', width(leftMapRef.value), '高', height(leftMapRef.value));
    if (leftMapRef.value) {
      state.width = width(leftMapRef.value);
      state.height = height(leftMapRef.value) - 2;
      state.isRenderMap = true;
      nextTick(() => {
        state.bMapApi = allmapRef.value.bMapApi;
      });
    }
  }, 500);
});

function onClick(type: string) {
  switch (type) {
    case 'success':
      success('成功');
      break;
    case 'error':
      error('失败');
      break;
    case 'warn':
      warn('警告');
      break;
    case 'info':
      info('提示信息');
      break;

    default:
      break;
  }
}

function getLocation() {
  let myCity = new (window as any).BMap.LocalCity();
  myCity.get((result: any) => {
    const cityName = result.name;
    state.bMapApi = allmapRef.value.bMapApi;
    state.bMapApi.setCenter(cityName);
  });
}

function chartRaceRun() {
  state.isPlay = true;
  faChartsRaceRef.value.setTimer();
}

function chartRaceStop() {
  state.isPlay = false;
  faChartsRaceRef.value.clearTimer();
}

function resetChartNode() {
  faGraphDynamicChartRef.value.reset();
}
</script>

<style lang="scss" scoped>
.actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: $padding-md;
}
.map {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: $padding-md;
  > div {
    border: 1px solid $border-color;
    height: 600px;
  }
}
</style>