<template>
  <div>
    <el-card :body-style="{'padding':'10px 0 0'}" class="mb60">
<!--      <div class="indexTitle">-->
<!--        <h3 class="leftboderTT">{{ language==0?'电子发票':'E-invoice' }}-->
<!--        </h3>-->
<!--      </div>-->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="language==0?'赛事报名':'REGISTRATION'" name="5"></el-tab-pane>
        <el-tab-pane :label="language==0?'酒店订单':'HOTEL'" name="0"></el-tab-pane>
        <el-tab-pane :label="language==0?'票务订单':'Ticket'" name="6"></el-tab-pane>
        <el-tab-pane :label="language==0?'化妆订单':'MakeUp'" name="3"></el-tab-pane>
        <el-tab-pane :label="language==0?'车辆订单':'TRANSPORTATION'" name="1"></el-tab-pane>
        <el-tab-pane :label="language==0?'餐饮订单':'DINING'" name="2"></el-tab-pane>
        <el-tab-pane :label="language==0?'摄像订单':'Shooting'" name="4"></el-tab-pane>
      </el-tabs>
      <el-empty :image="`/img/order_no.png`" :image-size="228"  v-if="list?.length == 0"/>
      <div v-if="activeName=='6'" class="pd20">

      </div>
      <div v-else-if="activeName=='5'" class="pd20">
        <div v-for="b in list" class="item" v-loading="loading">
          <div class="title">
            <label class="bg-lineg"> {{ language==0?'大赛报名':'REGISTRATION' }} </label>
            <span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span>
            <span class="fr text-warning status">{{b.invoiceStr}}</span>
          </div>
          <el-row class="pd20" justify="space-between" align="middle">
            <el-col :lg="9" :md="12" :sm="12" :xs="24">
              <div>
                <h4 class="m0">{{b.cptName}}</h4>
                <p v-if="b.groupName">{{ language == 0 ?'团队名称':'Team name' }}：{{b.groupName}}</p>
                <p v-if="b.payTime">{{ language == 0 ?'支付时间':'Pay time'}}：{{b.payTime}}</p>
              </div>
            </el-col>
            <el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center">
              <span class="text-warning"> {{ b.languageSource=='100'?'¥':'€' }}
                <span class="bigMoney">{{b.totalPayAmount}}</span>
              </span>
            </el-col>
            <el-col :lg="6" :md="16" :sm="16" :xs="16">
              <div class="text-right">
                <el-button type="primary" plain round v-if="b.isInvoice == '0'&&!b.invoiceId&&b.languageSource=='100'" @click.stop="gokp(b)">
                  {{ language == 0 ? '开发票' : 'Invoice' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.isInvoice == '0'&&b.invoiceId&&b.languageSource=='100'" @click.stop="editkp(b)">
                  {{ language == 0 ? '重开发票' : 'Rebilling' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.invoiceId&&b.languageSource=='100'"
                           @click.stop="showDetail(b)">{{ language == 0 ? '查看发票' : 'Detail' }}
                </el-button>
                <el-button type="primary" v-if="b.isInvoice == '0'&&!b.invoiceId&&b.languageSource!='100'" plain round  @click.stop="goSj(b)">
                  {{ language == 0 ? '开收据' : 'Receipt' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.invoiceId&&b.languageSource!='100'"
                           @click.stop="showSJ(b)">{{ language == 0 ? '查看收据' : 'Detail' }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="pd20" v-else>
        <div v-for="b in list" class="item" v-loading="loading">
          <div class="title">
            <label class="blueTag" v-if="b.orderType == 0"> {{ language==0?'酒店':'HOTEL' }} </label>
            <label class="purpleTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label>
            <label class="orangeTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label>
            <label class="orangeTag" v-if="b.orderType == 3"> {{ language==0?'化妆':'MakeUp' }} </label>
            <label class="orangeTag" v-if="b.orderType == 4"> {{ language==0?'拍摄':'Shooting ' }} </label>
            <span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span>
            <span class="fr text-warning status">{{b.invoiceStr}}</span>
          </div>

          <el-row class="pd20 mt10" justify="space-between" align="middle">
            <el-col :lg="9" :md="12" :sm="12" :xs="24">
              <div v-if="b.orderType == 0">
                <h3 class="m0">{{b.name}}</h3>
                <p>{{b.messageObj.roomName}}</p>
                <p>{{b.messageObj.roomInfo}}</p>
                <p>{{b.messageObj.roomType}}</p>
                <p>{{b.messageObj.roomStayDate}}</p>
              </div>
              <div v-if="b.orderType == 1">
                <div v-for="(car,index) in b.messageObj.carsList" :key="index">
                  <p v-if="car.num>0">{{car.name}}：{{car.num}} 辆</p>
                </div>
              </div>
              <div v-if="b.orderType == 2">
                <div v-for="(n,index) in b.messageObj.foodsList" :key="index">
                  <p v-if="n.num > 0">
                    {{n.name}}({{n.categoryName}}) <text>{{n.num}} 份</text>
                  </p>
                </div>
              </div>
              <div v-if="b.orderType == 3 || b.orderType == 4">
                <div>
                  {{language==0?'套餐名称：':''}}{{b.messageObj.packageName}}
                </div>
                <div>
                  {{language==0?'预约时间：':''}}{{b.deliveryTime.slice(0,10)}} {{b.messageObj.timePeriod}}
                </div>
              </div>
            </el-col>
            <el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center">
              <span class="text-warning"> {{ language==0?'¥':'€' }}
                <span class="bigMoney">{{language==0?b.total:b.totalEn}}</span>
              </span>
            </el-col>
            <el-col :lg="6" :md="16" :sm="16" :xs="16">
              <div class="text-right">
                <el-button type="primary" plain round v-if="b.isInvoice == '0'&&!b.invoiceId&&b.paymentType!='3'" @click.stop="gokp(b)">
                  {{ language == 0 ? '开发票' : 'Invoice' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.isInvoice == '0'&&b.invoiceId&&b.paymentType!='3'" @click.stop="editkp(b)">
                  {{ language == 0 ? '重开发票' : 'Rebilling' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.invoiceId&&b.paymentType!='3'"
                           @click.stop="showDetail(b)">{{ language == 0 ? '查看发票' : 'Detail' }}
                </el-button>
                <el-button type="primary" v-if="b.isInvoice == '0'&&!b.invoiceId&&b.paymentType=='3'" plain round  @click.stop="goSj(b)">
                  {{ language == 0 ? '开收据' : 'Receipt' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.invoiceId&&b.paymentType=='3'"
                           @click.stop="showSJ(b)">{{ language == 0 ? '查看收据' : 'Detail' }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <el-dialog :title="language==0?'开收据':'Issue a receipt'" v-model="showSJDialog" width="460px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="flex">
        <el-form-item :label="language==0?'开票人':'Name'">
          <div class="flex">
            <el-input v-model="lpName" :placeholder="language==0?'请输入开票人':'Please enter your name'"></el-input>
            <el-button type="primary" @click="submitSJ">{{ language==0?'提交并预览':'Submit' }}</el-button>
          </div>
        </el-form-item>
      </div>
        <div class="tip mt20">
          <label>{{ language==0?'开电子收据须知':'Receipt notice' }}:</label>
          <div class="pd10">
            {{remark}}
          </div>
        </div>

    </el-dialog>
  </div>
</template>

<script setup>
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {
  getCanInvoiceBills,
  getCanInvoiceBm,
  getInvoiceByActiveId,
  ppOtaReceipt,
  getReceipt,
  getBaseInfoByActiveId
} from "@/apiPc/booking";
import {getCurrentInstance, onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {md5} from "md5js";
import {loginFree,getCanInvoiceTicket} from "@/viewsPc/seat/api";
import {setToken} from "@/viewsPc/seat/utils/local-store";
const router = useRouter()
const route = useRoute()
const language= useStorage('language',0)
const activeName = ref('5')
const lpName = ref('')
const remark = ref('')
const showSJDialog = ref(false)
const user = useUserStore().user || {}
const userStore = useUserStore();
const query = ref({
  createById: user.userId,
  orderType:'5'
})
const {proxy} = getCurrentInstance()
const list = ref([])
const loading = ref(false)
onMounted(() => {
  if(!user.utype){
    router.push({name: 'home'})
    return
  }
  getList()
})
const getList = () => {
  loading.value = true
  if(query.value.orderType=='5'){
    getCanInvoiceBm().then(res=>{
      list.value = res.rows
      loading.value = false
    })
  }else if(query.value.orderType=='6'){
    login()
    // 用户免登录
  }else {
    query.value.invoiced = 1
    getCanInvoiceBills(query.value).then(res=>{
      list.value = res.rows
      for (let b of list.value) {
        b.messageObj = JSON.parse(b.message)
      }
      loading.value = false
    })
  }

}
const login = async () => {
  const userId = userStore.user?.userId;
  const sign = md5(`uid=${userId}lgo1acfkw51jfo`, 32);
  return loginFree({
    userId: userId,
    sign,
  }).then((res) => {
    setToken(res.data.token);
    getCanInvoiceTicket().then(res=>{
      list.value = res.lists
    })
  })
}
const handleClick = (e) => {
  console.log(e.paneName)
  query.value.orderType = e.paneName
  list.value = []
  getList()
}
const gokp = (item) => {
  router.push({
    path: '/booking/addInvoice',
    query: {
      orders: encodeURIComponent(JSON.stringify(item)),
      totalMoney:item.total||item.totalPayAmount
    }
  })
}
const editkp = (item) => {
  router.push({
    name:'addInvoice',
    query:{
      invoiceId:item.invoiceId,
      type:activeName.value,
      isEdit:true
    }
  })
}
const showDetail = (item) => {
  router.push({
    name:'invoiceDetail',
    query:{
      invoiceId:item.invoiceId,
      type:activeName.value,
    }
  })
}
let nowSj = {}
const goSj = (item) => {
  // 电子收据须知 开票人
  getremark(item)
  showSJDialog.value = true
  nowSj = item
}
function getremark(item) {
  getBaseInfoByActiveId(item.cptId).then(res=>{
    if(res.data){
      remark.value = res.data.remarks
    }
  })
}
const showSJ = (item) => {
  // 查看电子收据预览信息
  var obj = {
    orderId:item.id,
    type: 1
  }
  if(nowSj.orderType){
    //预约
    proxy.download(`/ota/norder/getReceipt/${obj.orderId}`, {
      ...obj
    }, `Receipt_${new Date().getTime()}.pdf`)
  } else {
    // 报名
    proxy.download(`/ota/signOrder/getReceipt/${obj.orderId}`, {
      ...obj
    }, `Receipt_${new Date().getTime()}.pdf`)
  }

}
const submitSJ = () => {
  loading.value = true
  ElMessageBox.confirm(language.value == 0 ? '确认提交吗？' : 'Confirm to submit ?', {
    confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
    cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
    type: 'warning'
  }).then(() => {
    downloadAndSend()
  })
}

const downloadAndSend = () => {
  if(nowSj.orderType){
    ppOtaReceipt({
      orderId:nowSj.id,
      receiptInfo:lpName.value,
      type: 2
    }).then(res=>{
      loading.value = false
      ElMessageBox.confirm(language.value == 0 ? `已发送至您的邮箱 ${user.userName}，请注意查收` : `A receipt has been sent to your email ${user.userName}, please check it`, {
        confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
        cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
        type: 'warning'
      }).then(() => {
        showSJDialog.value = false
        showSJ(nowSj)
      })
    }).catch(err=>{
      loading.value = false
      if(!err){
        ElMessage.warning(language.value==0?'出错了，请稍后重试':'Error, please try again later')
      }
    })
  } else {
    getReceipt({
      orderId:nowSj.id,
      lpName:lpName.value,
      type: 1
    }).then(res=>{
      loading.value = false
      ElMessageBox.confirm(language.value == 0 ? `已发送至您的邮箱 ${user.userName}，请注意查收` : `A receipt has been sent to your email ${user.userName}, please check it`, {
        confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
        cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
        type: 'warning'
      }).then(() => {
        showSJDialog.value = false
        showSJ(nowSj)
      })
    }).catch(err=>{
      loading.value = false
    })
  }
}

</script>

<style scoped lang="scss">
.indexTitle {
  margin: 20px 0 12px; overflow: visible;
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;
  .fr{margin: -8px 0 0}
  h3 {display: inline-block;
    font-size: 16px;
    color: var(--el-color-primary);
  }
}
.bigMoney{font-size: 24px;font-family: "DIN Alternate";}
.name{font-size: 18px;margin: 0;}
.status-po{position: absolute;right: 0;top: 0;font-size: 12px;
  color: #FFFFFF;
  span{border-radius: 0px 10px 0px 10px;padding: 4px 10px;}
  .bg-danger{background: #E60012;}
  .bg-warning{background: #e89f39;}
  .bg-pink{background: #F740A6;}
  .bg-primary{background: var(--el-color-primary)}
  .bg-blue{background: #00a0e9}
}
.item{
  .name{font-size: 18px;
    color: #000000;margin: 0 0 10px;}
  p{margin: 8px 0 0;color: #707070;font-size: 14px;}

  margin: 0 0 20px;border: 1px solid #E5E5E5;
  border-radius: 10px;
  position: relative;
  .bbody{padding: 0 15px 20px;}
  .title{background: #F7F7F7;border-bottom: 1px solid #E5E5E5;
    span{font-size: 14px;color: #4C5359;}
    .status{font-size: 12px;font-weight: bold;padding: 2px 10px;}
  }
  .title label{border-radius: 5px 0 5px 0; font-size: 12px; color: #fff;  padding:4px 10px;margin-right: 10px;}
  .blueTag{
    background-color: #1EC886;}
  .purpleTag {
    background-color: #717bef;
  }
  .orangeTag {
    background-color: #ff8124;
  }
}
:deep(.el-tabs__item){text-transform: uppercase}
</style>