<template>
  <view>
    <view class="tabs">
      <view
        class="item"
        v-for="item in tabs"
        :key="item.value"
        @click="changeTabs(item.value)">
        <text>{{ item.text }}</text>
        <view
          class="line"
          :class="tabsIndex == item.value ? 'active' : ''"></view>
      </view>
    </view>
    <view v-if="listData.length > 0">
      <view
        class="card"
        v-for="(item, index) in (listData as any[])"
        :key="index">
        <view class="header">
          <view>
            <text class="text-[#9C9C9C] text-[28px]"
              >台号: {{ item.seat }}</text
            >
            <!-- <text>点单人: {{ item.PlaceUser?.nickName }}</text> -->
          </view>
          <view
            :style="{
              color: get_color(item.status),
              fontWeight: 'bold',
            }"
            >{{ get_status_text(item.status) }}</view
          >
        </view>
        <view class="line"></view>
        <view @click="to_page(item)">
          <view
            class="goods-list"
            v-for="(itm, idx) in item.OrderGoods"
            :key="idx">
            <image :src="itm.Goods.cover"></image>
            <view class="center">
              <nut-ellipsis
                direction="end"
                :content="itm.Goods.name"
                rows="3"
                expand-text="展开"
                collapse-text="收起"></nut-ellipsis>
              <view class="text-[#9C9C9C]">
                <view>订单时间: {{ item.add_time.slice(0, 10) }}</view>
                <view>备注: {{ item.notes }}</view>
              </view>
            </view>
            <view class="num">
              <view>￥{{ itm.pay_price }}</view>
              <view>x{{ itm.number }}</view>
            </view>
          </view>
        </view>
        <!-- <view class="line"></view> -->
        <Footer :info="item" @ok="get_list" />
      </view>
    </view>
    <nut-empty v-else description="暂无订单"></nut-empty>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import Taro from '@tarojs/taro';
import Footer from './components/Footer.vue';
import {getAfterOrderList} from '@/api/admin';

const tabsIndex = ref(0);

const listData = ref([]);

const tabs = ref([
  {
    text: '全部',
    value: 0,
  },
  {
    text: '未收款',
    value: 1,
  },
  {
    text: '挂帐中',
    value: 3,
  },
  {
    text: '已收款',
    value: 2,
  },
]);

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

const changeTabs = (index: number) => {
  tabsIndex.value = index;
  get_list();
};

const get_list = async () => {
  Taro.showLoading({
    title: '加载中',
  });
  const user_info = await Taro.getStorageSync('userInfo');
  const {data: res} = await getAfterOrderList({
    bid: user_info.data.bid,
    status: tabsIndex.value,
  });
  listData.value = res.data || [];
  Taro.hideLoading();
};

const get_color = (status: number) => {
  switch (status) {
    case 0:
      return '#FD0100';
    case 1:
      return '#03A113';
    case 2:
      return '#FFA938';
  }
};

const get_status_text = (status: number) => {
  switch (status) {
    case 0:
      return '未付款';
    case 1:
      return '已付款';
    case 2:
      return '挂帐中';
  }
};

const to_page = item => {
  Taro.navigateTo({
    url: `/pages/admin/add_order/pending_order/pending_order_detail/index?bid=${item.bid}&oid=${item.oid}`,
  });
};
</script>

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