<template>
  <div class="" ref="orderRef">
    <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 v-loading="CancelLoading">
        <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" @click="redicetTo('https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e')">售后</el-button>
                <el-button type="warning" v-if="x.status==1" @click="goControls(1,x.orderid)">支付</el-button>
                <br />
                <el-button type="default" v-if="x.status==1" @click="goControls(2,x.orderid)">取消</el-button>
              </div>
            </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>
  <WePay v-if="showPay" :orderid="orderid" @close="showPay=false" @success="showPay=false"></WePay> 
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios";
import OrderService from "@/services/OrderService";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { openNewBlank } from '@/utils/common'
import WePay from '@/components/Pay/WePay.vue'
import { ElMessageBox } from "element-plus";
const activeName = ref<string>('all')
const parameters = ref({
  pageIndex:1,
  pageSize:15,
  starttime:'',
  endtime:'',
  orderstatus:0
})
const orders = ref<any[]>()
const orderid = ref<Number>(0)
const count = ref(0)
const loading = ref(false)
const router = useRouter()
const showPay = ref(false)
const orderRef = ref<any>()
const CancelLoading = ref(false)

const goControls = (type:Number,id:any) => {
  orderid.value = id
  if(type==1) showPay.value = true
  else if(type==2) {
    ElMessageBox.confirm(
        `此操作将取消该订单，是否确定?`,
        "提示",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(async () => {
            try {
              await CanceltOrders()
            } catch (error) { }
        })
        .catch(() => { });
  }
}
const CanceltOrders = async ()=>{
  if(CancelLoading.value)return
  CancelLoading.value=true
  const response = await OrderService.CancelPPTOrder(orderid.value)
  if(response.data.resultCode == ApiResult.SUCCESS){
    await search()
  }

  CancelLoading.value=false
}
const redicetTo = (url:string)=>openNewBlank(url)
  
const tabsHandlerClick = (e:any)=>{
  console.log(e.props.name)
  if(e.props.name=='all') parameters.value.orderstatus = 0
  if(e.props.name=='pay') parameters.value.orderstatus = 1
  if(e.props.name=='finish') parameters.value.orderstatus = 2
  search()
}

const search = async () => {
  parameters.value.pageIndex=1
  await getOrders()
}
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 scrollingHandler = () =>{
    if(orderRef.value && !loading.value){
        let maxHeight = orderRef.value.scrollHeight - orderRef.value.offsetHeight
        let scrollTop = orderRef.value.scrollTop
        if(maxHeight - scrollTop==0 && parameters.value.pageCount > parameters.value.pageIndex) {
          parameters.value.pageIndex++
            getOrders()
        }
    }
    
}

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

getOrders()

onMounted(()=>{
    orderRef.value.addEventListener("scroll", scrollingHandler);
})
</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>