<template>
  <nut-tabs
    style="height: 100vh"
    v-model="val"
    title-scroll
    ellipsis
    :animated-time="10"
    name="tabs"
    direction="vertical"
    @change="tabChange"
  >
    <nut-tab-pane
      v-for="item in list"
      :title="(item.name as string)"
      :key="item.ID"
    >
      <view v-if="goodList.length > 0">
        <view
          class="list"
          v-for="(item, index) in (goodList as any)"
          :key="index"
        >
          <view class="item">
            <img :src="item.cover" />
            <view class="right">
              <view class="name">{{ item.name }}</view>
              <view class="bom">
                <view class="price"
                  ><text style="font-size: 15px">{{ item.number }}</text>
                  积分</view
                >
                <nut-button
                  size="mini"
                  type="primary"
                  @click.stop="toGoodDetails(item.gid as number)"
                  >去兑换</nut-button
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <nut-empty v-else description="暂无商品"></nut-empty>
    </nut-tab-pane>
  </nut-tabs>
</template>

<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { ref } from "vue";
import { getCategoryList, getCategoryGoods } from "@/api/goods";

const val = ref(0);

interface List {
  ID?: number;
  name?: string;
}

const list = ref<Array<List>>([]);

const goodList = ref([]);

Taro.useDidShow(() => {
  getGoodsType();
});

// 获取商品分类
const getGoodsType = async () => {
  const res = await getCategoryList();
  list.value = res.data.data;

  getData(list.value[val.value].ID as number);
};

const getData = async (id: number) => {
  const res = await getCategoryGoods({
    class_id: id,
  });
  goodList.value = res.data.data;
};

const tabChange = async () => {
  getData(list.value[val.value].ID as number);
};

const toGoodDetails = (gid: number) => {
  Taro.navigateTo({
    url: `/pages/goods/goods_detail/index?gid=${gid}`,
  });
};
</script>

<style lang="scss">
.list {
  .item {
    display: flex;
    margin-bottom: 10px;
    img {
      width: 140px;
      height: 140px;
      border-radius: 10px;
    }

    .right {
      flex: 1;
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      // text-align: right;

      .name {
        // height: 20px;
        font-size: 28px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
      }

      .bom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 10px;
        .price {
          font-size: 20px;
          font-weight: bold;
          color: #ff0000;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
