<template>
  <el-tabs v-model="activeName" @tab-click="tabsHandlerClick" class="no-border dark">
    <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:300px; 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>

    <div class="order-body q-mt-lg">
      <div class="order-item rounded">

        <div class="title">
          <span>2024-04-20 21:39:59</span>
          <span class="q-ml-md">订单号：202404202139000359</span>
        </div>

        <div class="bg-white rounded row items-center">
          <div class="item row items-center"  style="width:300px; text-align: left;padding:24px;">
            <img src="https://st0.dancf.com/02/tms/202308030952-517b.png?x-oss-process=image/resize,w_72,type_6/interlace,1/format,webp" style="width:72px;" class="rounded" >
            <div class="q-ml-lg">VIP_个人授权版本</div>
          </div>
          <div class="item col">1个月</div>
          <div class="item col">¥39.00</div>
          <div class="item col">1席位</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">¥29.00</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">交易完成</div>
            <el-button  link>订单详情</el-button>
          </div>
          <div class="item column">
            <el-button type="primary">发票</el-button>
            <br />
            <el-button type="default">售后</el-button>
          </div>
        </div>

      </div>
    </div>
    <div class="order-body q-mt-lg">
      <div class="order-item rounded">

        <div class="title">
          <span>2024-04-20 21:39:59</span>
          <span class="q-ml-md">订单号：202404202139000359</span>
        </div>

        <div class="bg-white rounded row items-center">
          <div class="item row items-center"  style="width:300px; text-align: left;padding:24px;">
            <img src="https://st0.dancf.com/02/tms/202308030952-517b.png?x-oss-process=image/resize,w_72,type_6/interlace,1/format,webp" style="width:72px;" class="rounded" >
            <div class="q-ml-lg">VIP_个人授权版本</div>
          </div>
          <div class="item col">1个月</div>
          <div class="item col">¥39.00</div>
          <div class="item col">1席位</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">¥29.00</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">交易完成</div>
            <el-button  link>订单详情</el-button>
          </div>
          <div class="item column">
            <el-button type="primary">发票</el-button>
            <br />
            <el-button type="default">售后</el-button>
          </div>
        </div>

      </div>
    </div>
    <div class="order-body q-mt-lg">
      <div class="order-item rounded">

        <div class="title">
          <span>2024-04-20 21:39:59</span>
          <span class="q-ml-md">订单号：202404202139000359</span>
        </div>

        <div class="bg-white rounded row items-center">
          <div class="item row items-center"  style="width:300px; text-align: left;padding:24px;">
            <img src="https://st0.dancf.com/02/tms/202308030952-517b.png?x-oss-process=image/resize,w_72,type_6/interlace,1/format,webp" style="width:72px;" class="rounded" >
            <div class="q-ml-lg">VIP_个人授权版本</div>
          </div>
          <div class="item col">1个月</div>
          <div class="item col">¥39.00</div>
          <div class="item col">1席位</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">¥29.00</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">交易完成</div>
            <el-button  link>订单详情</el-button>
          </div>
          <div class="item column">
            <el-button type="primary">发票</el-button>
            <br />
            <el-button type="default">售后</el-button>
          </div>
        </div>

      </div>
    </div>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName = ref<string>('all')

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

<style scoped>
.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: 128px;
}
.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;
}
.order-body .order-item .item{
  height: auto;
  line-height: 1;
  color: #000;
}
</style>