<template>
  <div>
    <el-card :body-style="{'padding':'10px 0 0'}" class="mb60">
      <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>
      <div>
        <el-form label-width="90" size="small">
          <el-form-item label="开票状态">
            <el-select
              v-model="query.invoiced"
              clearable
              placeholder="选择发票状态"
              style="width: 200px"
              @change="getList"
            >
              <el-option label="全部" value="0"/>
              <el-option label="未申请" value="1"/>
              <el-option label="申请中" value="2"/>
              <el-option label="已开票" value="3"/>
            </el-select>
          </el-form-item>
        </el-form>
        <div v-show="list&&list.length>0" style="padding-left: 28px;color: red;font-size: 15px">
          温馨提示:发票申请成功后，将以电子发票的形式发送至您邮箱，请注意查收！
        </div>
      </div>
      <el-empty v-if="list?.length == 0" :image="`/img/order_no.png`" :image-size="228"/>
      <div v-if="activeName=='6'" class="pd20">
        <div v-for="b in list" v-loading="loading" class="item">
          <div class="title">
            <label class="orangeTag"> {{ language == 0 ? '票务' : 'Ticket' }} </label>
            <span>{{ b.id }}</span>
            <span class="fr text-warning status">{{ b.invoiceStr }}</span>
          </div>

          <el-row align="middle" class="pd20 mt10" justify="space-between">
            <el-col :lg="9" :md="12" :sm="12" :xs="24">
              <h3 class="m0">{{ b.name }}</h3>
              <p> {{ language == 0 ? "时间" : "Event Date & Time" }}：{{
                  b.messageObj.ticketDate.name
                }}</p>
              <p class="common">
                {{ language == 0 ? "张数" : "Location" }}：{{ b.messageObj.num }}{{ language == 0 ? "张" : "tickets" }}
              </p>
            </el-col>
            <el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center">
              <span class="text-warning"> {{ b.paymentType == '3' ? '€' : '￥' }}
                <span class="bigMoney">{{ b.totalStr }}</span>
              </span>
            </el-col>
            <el-col :lg="6" :md="16" :sm="16" :xs="16">
              <div class="text-right">
                <el-button v-if="b.isInvoice == '0'&&!b.invoiceId" plain round type="primary" @click.stop="gokp(b)">
                  {{ language == 0 ? '申请开票' : 'Invoice' }}
                </el-button>
                <el-button v-if="b.isInvoice == '0'&&b.invoiceId" plain round type="primary" @click.stop="editkp(b)">
                  {{ language == 0 ? '重新申请' : 'Rebilling' }}
                </el-button>
                <el-button v-if="b.invoiceId" plain round type="primary"
                           @click.stop="showDetail(b)">{{ language == 0 ? '发票信息' : 'Detail' }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-else-if="activeName=='5'" class="pd20">
        <div v-for="b in list" v-loading="loading" class="item">
          <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 align="middle" class="pd20" justify="space-between">
            <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.payType != '2' ? '¥' : '€' }}
                <span class="bigMoney">{{ b.totalPayAmount || b.totalAmount }}</span>
              </span>
            </el-col>
            <el-col :lg="6" :md="16" :sm="16" :xs="16">
              <div class="text-right">
                <el-button v-if="b.isInvoice == '0'&&!b.invoiceId" plain round type="primary" @click.stop="gokp(b)">
                  {{ language == 0 ? '申请开票' : 'Invoice' }}
                </el-button>
                <el-button v-if="b.isInvoice == '0'&&b.invoiceId" plain round type="primary" @click.stop="editkp(b)">
                  {{ language == 0 ? '重新申请' : 'Rebilling' }}
                </el-button>
                <el-button v-if="b.invoiceId" plain round type="primary"
                           @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 v-else class="pd20">
        <div v-for="b in list" v-loading="loading" class="item">
          <div class="title">
            <label v-if="b.orderType == 0" class="blueTag"> {{ language == 0 ? '酒店' : 'HOTEL' }} </label>
            <label v-if="b.orderType == 1" class="purpleTag"> {{ language == 0 ? '车辆' : 'TRANSPORTATION' }} </label>
            <label v-if="b.orderType == 2" class="orangeTag"> {{ language == 0 ? '餐饮' : 'DINING' }} </label>
            <label v-if="b.orderType == 3" class="orangeTag"> {{ language == 0 ? '化妆' : 'MakeUp' }} </label>
            <label v-if="b.orderType == 4" class="orangeTag"> {{ language == 0 ? '拍摄' : 'Shooting ' }} </label>
            <span>{{ language == 0 ? '订单编号：' : 'No.' }} {{ b.id }}</span>
            <span class="fr text-warning status">{{ b.invoiceStr }}</span>
          </div>

          <el-row align="middle" class="pd20 mt10" justify="space-between">
            <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">
                <h3 class="m0">{{ b.name }}</h3>
                <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">
                <h3 class="m0">{{ b.name }}</h3>
                <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">
                <h3 class="m0">{{ b.name }}</h3>
                <p>
                  {{ language == 0 ? '套餐名称：' : '' }}{{ b.messageObj.packageName }}
                </p>
                <p>
                  {{ language == 0 ? '预约时间：' : '' }}{{ b.deliveryTime.slice(0, 10) }} {{ b.messageObj.timePeriod }}
                </p>
              </div>
            </el-col>
            <el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center">
              <span class="text-warning"> {{ b.paymentType == 3 ? '€' : '¥' }}
                <span class="bigMoney">{{ b.totalStr }}</span>
              </span>
            </el-col>
            <el-col :lg="6" :md="16" :sm="16" :xs="16">
              <div class="text-right">
                <el-button v-if="b.isInvoice == '0'&&!b.invoiceId" plain round type="primary" @click.stop="gokp(b)">
                  {{ language == 0 ? '申请开票' : 'Invoice' }}
                </el-button>
                <el-button v-if="b.isInvoice == '0'&&b.invoiceId" plain round type="primary" @click.stop="editkp(b)">
                  {{ language == 0 ? '重新申请' : 'Rebilling' }}
                </el-button>
                <el-button v-if="b.invoiceId" plain round type="primary"
                           @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 v-model="showSJDialog" :close-on-click-modal="false" :close-on-press-escape="false"
               :title="language==0?'开收据':'Issue a receipt'" width="460px">
      <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 lpName = ref('')
const remark = ref('')
const showSJDialog = ref(false)
const userStore = useUserStore();
const user = useUserStore().user || {}
const activeName = ref(userStore.activeName || '5')

const query = ref({
  createById: user.userId,
  orderType: '5',
  invoiced: '0',
  pageNo: 1,
  pageSize: 999
})
const {proxy} = getCurrentInstance()
const list = ref([])
const loading = ref(false)
onMounted(() => {
  if (!user.utype) {
    router.push({name: 'home'})
    return
  }
  if (language.value == 1) {
    router.push({name: 'myInfo'})
    return
  }
  query.value.orderType = activeName.value = userStore.activeName || '5'
  getList()
  route.query.orderSn && getDataInfo()
})
const getList = () => {
  loading.value = true
  if (query.value.orderType == '5') {
    getCanInvoiceBm(query.value).then(res => {
      list.value = res.rows
      loading.value = false
    })
  } else if (query.value.orderType == '6') {
    // login()
    getCanInvoiceBills({
      createById: user.userId,
      orderType: '5',
      invoiced: '0',
      pageNo: 1,
      pageSize: 999
    }).then(res => {
      list.value = res.rows
      for (let b of list.value) {
        b.messageObj = JSON.parse(b.extJson)
        b.messageObj.ticketDate = JSON.parse(b.messageObj.ticketDate)
        b.messageObj.ticketType = JSON.parse(b.messageObj.ticketType)
      }
      loading.value = false
      console.log(list.value)

    })
  } else {
    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(query.value).then(res => {
      loading.value = false
      list.value = res.data.lists
    })
  })
}

const handleClick = (e) => {
  console.log(e.paneName)
  query.value.orderType = e.paneName
  list.value = []
  query.value.invoiced = '0'
  userStore.updataActiveName(e.paneName)
  getList()

}
const gokp = (item) => {
  if (query.value.orderType == 6) {
    router.push({
      name: 'ticketAddInvoice',
      query: {
        orders: encodeURIComponent(JSON.stringify(item)),
        totalMoney: item.totalStr || item.totalPayAmount || item.payAmount || item.totalAmount,
        orderId: item.id,
        paymentType: item.paymentType,
        orderType: query.value.orderType,
      }
    })
  } else {
    router.push({
      path: '/booking/addInvoice',
      query: {
        orders: encodeURIComponent(JSON.stringify(item)),
        totalMoney: item.totalStr || item.totalPayAmount || item.payAmount || item.totalAmount,
        orderId: item.id,
        paymentType: query.value.orderType == 5 ? item.payType : item.paymentType,
        orderType: query.value.orderType,
        orderSn: query.value.orderType == 6 ? item.orderSn : null
      }
    })
  }

}
const editkp = (item) => {
  if (query.value.orderType == 6) {
    router.push({
      name: 'ticketAddInvoice',
      query: {
        invoiceId: item.invoiceId,
        orderId: item.id,
        isEdit: true,
      }
    })
  } else {
    router.push({
      name: 'addInvoice',
      query: {
        invoiceId: query.value.orderType == 6 ? item.invoiceIdStr : item.invoiceId,
        orderId: item.id,
        type: activeName.value,
        isEdit: true,
        orderType: query.value.orderType,
        paymentType: query.value.orderType == 5 ? item.payType : item.paymentType,
        // orderSn: query.value.orderType == 6 ? item.orderSn : null
      }
    })
  }

}
const showDetail = (item) => {
  if (query.value.orderType == 6) {
    router.push({
      name: 'ticketInvoiceDetail',
      query: {
        invoiceId: item.invoiceId,
        orderId: item.id,
      }
    })

  } else {
    router.push({
      name: 'invoiceDetail',
      query: {
        invoiceId: query.value.orderType == 6 ? item.invoiceIdStr : item.invoiceId,
        type: activeName.value,
        orderType: query.value.orderType,
        paymentType: query.value.orderType == 6 || query.value.orderType == 5 ? item.payType : item.paymentType,
        // orderSn: query.value.orderType == 6 ? item.orderSn : null
      }
    })

  }
}
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 lang="scss" scoped>
.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>