<template>
  <div class="home-market g-flex">
    <app-navbar title="市场" :show-back-button="false"></app-navbar>
    <div class="home-market__container g-flex__body">
      <Grid :column-num="3" style="margin-bottom: .2rem;">
        <GridItem icon="photo-o" text="商品" :to="{ name: 'order' }" v-for="index in 6" :key="index" />
      </Grid>
      <app-table :data="quoteDayList" v-model:columns="columns" @row-click="rowClick">
        <template #expandRow>
          扩展
        </template>
        <template #last="{ row }">
          <span :class="handlePriceColor(row.last, row.presettle)">{{ handleNoneValue(row.last) }}</span>
        </template>
        <template #highest="{ row }">
          <span :class="handlePriceColor(row.highest, row.presettle)">{{ handleNoneValue(row.highest) }}</span>
        </template>
        <template #lowest="{ row }">
          <span :class="handlePriceColor(row.lowest, row.presettle)">{{ handleNoneValue(row.lowest) }}</span>
        </template>
        <template #bidvolume="{ row }">
          <span :class="handlePriceColor(row.bid, row.presettle)">{{ handleNoneValue(row.bidvolume) }}</span>
        </template>
        <template #askvolume="{ row }">
          <span :class="handlePriceColor(row.ask, row.presettle)">{{ handleNoneValue(row.askvolume) }}</span>
        </template>
      </app-table>
      <Button @click="showAction = true" plain block>更换主题</Button>
    </div>
    <ActionSheet v-model:show="showAction" :actions="actions" teleport="body" cancel-text="取消" @select="themeChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onActivated, onDeactivated } from 'vue'
import { Grid, GridItem, Button, ActionSheet, ActionSheetAction } from 'vant'
import { useFuturesStore, useThemeStore } from '@/stores'
import { handlePriceColor, handleNoneValue } from '@/filters'
import AppTable from '@mobile/components/base/table/index.vue'
import { TableColumn } from '@mobile/components/base/table/interface'
import subscribe from '@/services/subscribe'

const { setTheme } = useThemeStore();
const { quoteDayList } = useFuturesStore();
const quoteSubscribe = subscribe.addQuoteSubscribe(['cu2206', 'cu2207', 'cu2208', 'cu2209', 'cu2301', 'cu2303', 'cu2304']);
const showAction = ref(false);

const columns = reactive<TableColumn[]>([
  { prop: 'goodscode', label: '合约' },
  { prop: 'last', label: '最新' },
  { prop: 'highest', label: '最高' },
  { prop: 'lowest', label: '最低' },
  { prop: 'bidvolume', label: '买量' },
  { prop: 'askvolume', label: '卖量' }
])

const actions: ActionSheetAction[] = [
  { name: '默认' },
  { name: '浅色' },
  { name: '深色' }
]

const themeChange = (action: ActionSheetAction) => {
  switch (action.name) {
    case '默认': {
      setTheme('Default');
      break;
    }
    case '浅色': {
      setTheme('Light');
      break;
    }
    case '深色': {
      setTheme('Dark')
      break;
    }
  }
  showAction.value = false;
}

const rowClick = (index: number) => {
  console.log('row', index);
}

onActivated(() => quoteSubscribe.start());
onDeactivated(() => quoteSubscribe.stop());
</script>

<style lang="less">
@import './index.less';
</style>