<template>
  <app-view class="market-quote">
    <template #header>
      <app-filter v-bind="{ selectList, inputList, buttonList }" />
    </template>
    <!-- 表格数据 -->
    <app-table :data="dataList" v-model:columns="columns" :row-key="rowKey" :expand-row-keys="expandKeys"
      @row-click="rowClick" @row-contextmenu="rowContextmenu" border>
      <template #header>
        <app-auth-operation :menus="headerButtons" />
      </template>
      <template #footer>
        <app-pagination :total="400" />
      </template>
      <!-- 展开行 -->
      <template #expand="{ row }">
        <app-auth-operation :menus="handleTableButton(row)" :options="{ selectedRow: row }" />
      </template>
    </app-table>
    <!-- 右键菜单 -->
    <app-auth-operation type="contextmenu" :menus="handleTableButton(selectedRow)" :contextmenu="contextmenu"
      :options="{ selectedRow }" />
  </app-view>
</template>

<script lang="ts" setup>
import { ref, onActivated } from 'vue'
import { useDataTable } from '@/hooks/datatable'
import { onBeforeRouteLeave } from 'vue-router'
import { queryGoodsList } from '@/services/api/goods'
import { useTable } from '@pc/components/base/table'
import subscribe from '@/services/subscribe'
import AppTable from '@pc/components/base/table/index.vue'
import AppPagination from '@pc/components/base/pagination/index.vue'
import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
import AppFilter from '@pc/components/base/table-filter/index.vue'

const { selectedRow, rowKey, expandKeys, contextmenu, rowClick, rowContextmenu } = useTable<Model.GoodsRsp>('id');
const { dataList, selectList, inputList, buttonList } = useDataTable<Model.GoodsRsp>();
const quoteSubscribe = subscribe.addQuoteSubscribe(['cu2206', 'cu2207', 'cu2208', 'cu2209', 'cu2301', 'cu2303', 'cu2304']);
const headerButtons = ['market_quote_add', 'market_quote_delete'];

selectList.value = [
  {
    key: 'id',
    placeholder: '商品合约',
    options: [
      { label: '黄金', value: 1000 },
      { label: '昆特牌', value: 1001 }
    ],
  },
]

inputList.value = [
  { placeholder: '模糊搜索商品名称', keys: ['goodsName', 'goodsCode'] },
]

const columns = ref([
  {
    prop: 'id',
    label: '序号',
    sortable: true,
    show: true,
    fixed: '',
  },
  {
    prop: 'goodsCode',
    label: '合约',
    sortable: true,
    show: true,
  },
  {
    prop: 'goodsName',
    label: '商品',
    show: true,
  },
  {
    prop: 'lastPrice',
    label: '最新价',
    show: true,
  }
])

// 处理权限按钮显示
const handleTableButton = (item?: Model.GoodsRsp) => {
  const buttons = ['market_quote_trade', 'market_quote_detail'];
  switch (item?.goodsCode) {
    case 'CFN001': {
      return buttons.filter((code) => code !== 'market_quote_detail')
    }
    default: {
      return buttons;
    }
  }
}

queryGoodsList({
  success: (res) => {
    dataList.value = res.data;
  }
})

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

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