<template>
  <div class="">
    <el-tabs v-model="activeName" @tab-click="tabsHandlerClick" class="no-border dark sticky-header">
      <el-tab-pane label="全部订单" name="all"></el-tab-pane>
      <el-tab-pane label="待支付" name="pay"></el-tab-pane>
      <el-tab-pane label="已完成" name="finish"></el-tab-pane>
      <el-tab-pane label="待开票" name="invoice"></el-tab-pane>
      <el-tab-pane label="历史发票" name="invoiceHistory"></el-tab-pane>
      <div class="order-bar rounded row">
        <div class="item" style="width: 280px !important; min-width: 280px; text-align: left;">商品信息</div>
        <div class="item col">时长</div>
        <div class="item col" >单价</div>
        <div class="item col">数量</div>
        <div class="item none-width">
          <div style="background-color: rgba(0,0,0,.08);width:1px">&nbsp;</div>
        </div>
        <div class="item col">实付款</div>
        <div class="item col">订单状态</div>
        <div class="item">操作</div>
      </div>
    </el-tabs>

    <template v-if="orders && orders.length>0 && !loading">
      <div class="order-body q-mt-lg" v-for="x in orders" :key="x.orderid">
        <div class="order-item rounded">

          <div class="title">
            <span>{{ x.create }}</span>
            <span class="q-ml-md">{{ x.ordernum }}</span>
          </div>

          <div class="bg-white rounded row items-center">
            <div class="item row items-center"  style="width: 280px !important; min-width: 280px; text-align: left;padding:24px;">
              <img :src="x.cover" style="width:72px;" class="rounded" >
              <div class="q-ml-lg">{{ x.pricetypename }}_{{ x.vipname }}</div>
            </div>
            <div class="item col">{{ x.productname }}</div>
            <div class="item col">¥{{ x.price.toFixed(2) }}</div>
            <div class="item col">{{ x.use }}席位</div>
            <div class="item none-width">
              <div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
            </div>
            <div class="item col">
              <div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥{{ x.price.toFixed(2) }}</div>
              <!-- <div class="row items-center flex-end">
                <span class="text-grey-8 q-mr-md">已优惠 ¥10.00</span>
                <IconHelp :size="16" class="cursor-pointer"></IconHelp>
              </div> -->
            </div>
            <div class="item col">
              <div class="q-mb-sm" :class="{'text-waring':x.status==1,'text-grey-8':x.status==3}">{{ x.statusname }}</div>
              <el-button  link  @click="forwardOrderDetail(x.orderid)">订单详情</el-button>
            </div>
            <div class="item column">
              <el-button type="primary" v-if="x.status==2">发票</el-button>
              <br />
              <el-button type="default" v-if="x.status==2">售后</el-button>
              <el-button type="warning" v-if="x.status==1">支付</el-button>
              <br />
              <el-button type="default" v-if="x.status==1">取消</el-button>
            </div>
          </div>

        </div>
      </div>
    </template>
    <div v-if="loading" style="height: 200px;margin-top: 100px;" v-loading="loading"></div>
    <div v-if="(!orders || orders.length==0) && !loading">
      <el-empty class="q-ma-xl" description="暂无数据" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios";
import OrderService from "@/services/OrderService";
import { ref } from "vue";
import { useRouter } from "vue-router";
const activeName = ref<string>('all')
const parameters = ref({
  pageIndex:1,
  pageSize:15,
  starttime:'',
  endtime:'',
  orderstatus:0
})
const orders = ref<any[]>()
const count = ref(0)
const loading = ref(false)
const router = useRouter()

const tabsHandlerClick = (e:any)=>{
  console.log(e)
}

const getOrders = async ()=>{
  if(loading.value)return
  loading.value=true

  const response = await OrderService.GetOrders(parameters.value)
  if(response.data.resultCode == ApiResult.SUCCESS){
    orders.value = response.data.data.pageData
    count.value = response.data.data.pageCount
    
  }

  loading.value=false
}

const forwardOrderDetail = (id:string)=>{
  router.push('/u/order/'+encodeURIComponent(id))
}

getOrders()
</script>

<style scoped>
.sticky-header{
  position: sticky;
  top: 0;
  left: 0;
  background: #FFF;
}
.order-bar{
  background: #f6f7f9 !important;
}
.order-bar .item,
.order-body .order-item .item{
  padding: 0 24px;
  height: 42px;
  line-height: 42px;
  font-size: 14px;
  color:gray;
  text-align: right;
  min-width: 108px;
}
.order-bar .item.none-width,
.order-body .order-item .item.none-width{
  min-width: unset;
}
.order-body{

}
.order-body .order-item{
  background: #f6f7f9;
  border:1px solid rgba(0,0,0,.08);
  font-size: 14px;
  
}
.order-body .order-item .title{
  padding: 0 24px;
  height: 45px;
  line-height: 45px;
  color:grey;
  white-space: nowrap;
  overflow: hidden;
}
.order-body .order-item .item{
  height: auto;
  line-height: 1;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
}
</style>