<template>
    <el-dialog v-model="dialogVisible" 
     width="450" 
     title="发票详情"
    :close-on-press-escape="false" :close-on-click-modal="false"
    @close="close">
      <div class="InvoiceVerify">
        <div class="InvoiceVerify-box fz14">
            <div class="row flex-between items-center q-py-sm">
                <span>开票金额</span>
                <span class="text-bold">￥{{InvoiceDetails.Money.toFixed(2)}}</span>
            </div>
            <div class="row flex-between items-center q-py-sm">
                <span>开具方式</span>
                <span class="text-bold">{{InvoiceDetails.IssuedType==1?'电子普通发票':'增值税专用发票'}}</span>
            </div>
            <div class="row flex-between items-center q-py-sm">
                <span>发票类型</span>
                <span class="text-bold">{{InvoiceDetails.InvoiceType==1?'企业':'个人'}}</span>
            </div>
            <div class="row flex-between items-center q-py-sm">
                <span>发票抬头</span>
                <span class="text-bold">{{InvoiceDetails.InvoiceTitle}}</span>
            </div>
            <div class="row flex-between items-center q-py-sm">
                <span>邮箱地址</span>
                <span class="text-bold">{{InvoiceDetails.Email}}</span>
            </div>
        </div>
      </div>
      <div v-if="Orders.length>0" class="order-body q-pt-md">
          <div class="order-item rounded">
            <div class="title row flex-between items-center">
              <span class="">订单</span>
              <el-button v-if="props.InvoiceDetails.OrderList.length>1" link
                  @clcik="MoreData">
                  <el-icon v-if="!isMore"><ArrowRight /></el-icon>
                  <el-icon v-else><ArrowUp /></el-icon>
              </el-button>
            </div>
            <!-- :class="[!isMore||isMore?'animate__fadeInUp':'']" -->
            <div class="animate__animated">
              <div v-for="x in Orders" :key="x.OrderId"
              class="order-list">
                <div class="bg-white row flex-between q-px-md q-pt-md text-5B5D62">
                  <span>{{ x.PayTime }}</span>
                  <span class="q-ml-md">{{ x.OrderNum }}</span>
                </div>
                <div class="bg-white rounded row items-center q-pb-md">
                    <div class="item items-center"  style="padding: 5px 10px;">
                      <div>{{ x.PriceTypeName }}_{{ x.VipName }}</div>
                    </div>
                    <div class="item">{{x.InvalidName}}</div>
                    <div class="item col text-right">¥{{ x.TradePrice.toFixed(2) }}</div>
                  </div>
              </div>
            </div>

          </div>
        </div>
        
        <!-- <template #footer>
          <div class="dialog-footer">
            <el-button @click="close">取消</el-button>
          </div>
        </template> -->
      </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ApiResult, VipType } from '@/configs/axios'
  import { EntMemberRight, FreeMemberRight, PersonMemberRight } from '@/configs/customer'
  import OrderService from '@/services/OrderService'
  import { ref, onMounted, reactive, watch } from 'vue'
  import { ElMessage, FormInstance, FormRules } from 'element-plus';
  
  const props = defineProps({
    InvoiceDetails: {} as Object,
    show: true as Boolean
  })
  
  const isMore = ref(false)
  const Orders = ref([] as any)
  const emit = defineEmits<{
    (event: 'close'): void,
    (event: 'success'): void
  }>()

  const dialogVisible = ref(false)

  const MoreData = () => {
    isMore.value = !isMore.value
    if(isMore.value) Orders.value = JSON.parse(JSON.stringify(props.InvoiceDetails.OrderList))
    else{
        Orders.value = []
        Orders.value.push(props.InvoiceDetails.OrderList[0])
    }
  }
  const close = ()=>{
    emit('close')
  }
  
  watch(()=>props.show,(n,o)=>{
    if(n) {
        Orders.value = []
        Orders.value.push(props.InvoiceDetails.OrderList[0])
        dialogVisible.value = true
    }
    else dialogVisible.value = false
  })
  </script>
  
  <style scoped>
.InvoiceVerify-title{
    color: #9BA1AA;
}
.InvoiceVerify-box{
    border-radius: 8px;
    background: #F6F7F9;
    padding: 10px 20px;
}
.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 14px;
  height: 35px;
  line-height: 35px;
  color:grey;
  white-space: nowrap;
  overflow: hidden;
}
.order-body .order-item .item{
  height: auto;
  line-height: 1;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 10px;
}
.order-list{
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.order-list:last-child{
    border: 0;
}
  </style>