<template>
  <div>
    <el-card :body-style="{'padding':'10px 0 0'}">
<!--      <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="赛事订单" name="5"></el-tab-pane>
        <el-tab-pane label="酒店订单" name="0"></el-tab-pane>
        <el-tab-pane label="票务订单" name="6"></el-tab-pane>
        <el-tab-pane label="化妆订单" name="3"></el-tab-pane>
        <el-tab-pane label="车辆订单" name="1"></el-tab-pane>
        <el-tab-pane label="餐饮订单" name="2"></el-tab-pane>
        <el-tab-pane label="摄像订单" name="4"></el-tab-pane>
      </el-tabs>
      <el-empty :image="`/img/order_no.png`" :image-size="228"  v-if="list?.length == 0"/>

      <div class="pd20">
        <div v-for="b in list" class="item">
          <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>
          </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">
                <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" @click.stop="gokp(b)">
                  {{ language == 0 ? '开发票' : 'Edit' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.isInvoice == '0'&&b.invoiceId" @click.stop="editkp(b)">
                  {{ language == 0 ? '重开发票' : 'Edit' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.invoiceId"
                           @click.stop="showDetail(b)">{{ language == 0 ? '查看发票' : 'Detail' }}
                </el-button>
                <el-button type="primary" v-if="b.isInvoice == '0'&&!b.invoiceId" plain round  @click.stop="goSj(b)">
                  {{ language == 0 ? '开收据' : 'Edit' }}
                </el-button>
                <el-button type="primary" plain round v-if="b.invoiceId"
                           @click.stop="showSJ(b)">{{ language == 0 ? '查看收据' : 'Detail' }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <el-dialog title="开收据" v-model="showSJDialog" width="460px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="flex">
        <el-form-item label="开票人">
          <div class="flex">
            <el-input v-model="lpName" placeholder="请输入开票人"></el-input>
            <el-button type="primary" @click="submitSJ">提交</el-button>
          </div>
        </el-form-item>
      </div>
        <div class="tip mt20">
          <label>开电子收据须知:</label>
          <div class="pd10">
            1.发票开具时间：提交后，开票时间为开票日起7天（含7天）内；<br/>
            2.开具发票后，发票金额不得修改；<br/>
            3.未开具发票前，可修改修改公司抬头/税号；<br/>
            4.未开票成功，请及时联系客服处理；<br/>
            5.发票开具后，将发送至当前登录账号邮箱；
          </div>
        </div>

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

<script setup>
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {getCanInvoiceBills, getInvoiceByActiveId} from "@/apiPc/booking";
import {onMounted, ref} from "vue";
const router = useRouter()
const route = useRoute()
const language= useStorage('language',0)
const activeName = ref('5')
const lpName = ref('')
const showSJDialog = ref(false)
const user = useUserStore().user
const query = ref({
  createById: user.userId,
  orderType:'5'
})
const list = ref([])
onMounted(() => {
  getList()
})
const getList = () => {
  getCanInvoiceBills(query.value).then(res=>{
    list.value = res.rows

    for (let b of list.value) {
      b.messageObj = JSON.parse(b.message)
    }
  })
}
const handleClick = (e) => {
  console.log(e.paneName)
  query.value.orderType = e.paneName
  getList()
}
const gokp = (item) => {
  router.push({
    path: '/booking/addInvoice',
    query: {
      orders: encodeURIComponent(JSON.stringify(item)),
      totalMoney:item.total
    }
  })
}
const editkp = (item) => {
  router.push({
    name:'addInvoice',
    query:{
      invoiceId:item.invoiceId,
      isEdit:true
    }
  })
}
const showDetail = (item) => {
  router.push({
    name:'invoiceDetail',
    query:{
      invoiceId:item.invoiceId
    }
  })
}
const goSj = (item) => {
  // 电子收据须知 开票人
  showSJDialog.value = true
}
const showSJ = (item) => {
  // 查看电子收据预览信息

}
const submitSJ = () => {
  // lpName.value
}
</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;}
  }
  .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;
  }
}
</style>