<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20">
        <div slot="header">
          <div class="bg-lineg">
            <div class="pl-back" @click="goBack">
              <el-icon>
                <ArrowLeftBold />
              </el-icon>
              返回
            </div>
            {{ language == 0 ? '发票开具' : 'Invoice application' }}
          </div>
        </div>
        <el-row :gutter="20" class="pd20">
          <el-col :span="24">
            <!--已选订单-->

            <div class="border-info">
              <label class="blueTag">票务订单</label>
              <h3>{{ matchForm.name }}</h3>
              <div>
                <p>票档：{{ ticketForm.extJson?.atName }}</p>
                <p>场馆：{{ ticketForm.extJson?.atsName }}</p>
                <p>场次：{{ ticketForm.extJson?.sessionType =='1000'? '日间场' : '夜间场' }}</p>
                <p>票型：{{ ticketForm.extJson?.atstName }}</p>
              </div>
              <div>
                <el-row style="width: 100%">
                  <el-col :lg="8" :md="12" :sm="12" :xs="24">
                    <div>购票数量：{{ ticketForm.num }}张
                    </div>
                  </el-col>
                  <el-col :lg="8" :md="12" :sm="12" :xs="24">联系方式：{{ ticketForm.phone }}
                  </el-col>
                  <el-col :lg="8" :md="12" :sm="12" :xs="24">
                    共计:{{ (totalMoney*1).toFixed(2) }}{{
                      paymentType == 1 ? '￥' : '€'
                    }}
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="leftboderTT">{{ language == 0 ? '开票信息' : 'Invoice information' }}</div>
            <div class="border-rr mt20 pd20">
              <el-form
                ref="formRef" :label-width="language == 0 ?'100':'150'" :model="form" :rules="rules"
                class="mw500"
              >
                <el-form-item :label="'开票金额'">
                  <span class="bigprice">{{ paymentType != 3 ? '¥' : '€' }}{{ totalMoney }}</span>
                </el-form-item>

                <el-form-item :label="`发票形式`" prop="invoiceForm" required>
                  <span v-if="form.invoiceForm=='1'">电子发票</span>
                  <span v-if="form.invoiceForm=='2'">纸质普票</span>
                  <span v-if="form.invoiceForm=='3'">纸质专票</span>
                </el-form-item>

                <el-form-item :label="`发票类型`" prop="invoiceType" required>
                  <span v-show="form.invoiceType=='0'"> 企业</span>
                  <span v-show="form.invoiceType=='1'"> 个人非企业</span>
                </el-form-item>
                <el-form-item :label="`发票抬头`" prop="invoiceTitle" required>
                  {{ form.invoiceTitle }}
                </el-form-item>
                <el-form-item v-if="form.invoiceType=='0'" :label="`税号`" prop="invoiceTfn" required>
                  {{ form.invoiceTfn }}
                </el-form-item>
                <el-form-item v-if="form.invoiceForm=='1'" :label="`邮箱`" prop="invoiceEmail" required>
                  {{ form.invoiceEmail }}
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                  {{ form.remarks }}
                </el-form-item>
                <div v-if="form.invoiceForm=='3'&&form.invoiceType=='0'">
                  <el-form-item :label="`地址`" prop="invoiceAddress" required>
                    {{ form.invoiceAddress }}
                  </el-form-item>
                  <el-form-item :label="`电话`" prop="invoicePhone" required>
                    {{ form.invoicePhone }}
                  </el-form-item>
                  <el-form-item :label="`开户行`" prop="invoiceBank" required>
                    {{ form.invoiceBank }}
                  </el-form-item>
                  <el-form-item :label="`账户`" prop="invoiceAccount" required>
                    {{ form.invoiceAccount }}
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <div class="text-center mb20">
          <el-button plain round type="primary" @click="backList">返回</el-button>
        </div>
      </el-card>
      <div style="height: 60px;" />
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useStorage } from '@vueuse/core/index'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
import { getCurrentInstance } from '@vue/runtime-core'
import {
  getInvoiceDetail,
  getTicketOrderInfo,
  getTicketInfoByActivityId
} from '@/apiPc/booking'
import { getOrderDetail } from '@/viewsPc/seat/api/index'

const { proxy } = getCurrentInstance()

const user = useUserStore().user
const language = useStorage('language', 0)
const paymentType = ref(1)
const router = useRouter()
const route = useRoute()
const list = ref([])
const totalMoney = ref(0)
const orderType = ref(0)
const form = ref({})
const formDate = ref({})
const ticketForm = ref({})
const message = ref({})
const matchForm = ref({})
let cptId = null
const invoiceId = ref()

const rules = ref({
  invoiceType: [
    { required: true, message: language.value == 0 ? '请选择发票类型' : 'Please select invoice type', trigger: 'change' }
  ],
  invoiceEmail: [
    { required: true, message: language.value == 0 ? '请输入邮箱' : 'Please enter email', trigger: 'blur' }
  ],
  invoiceForm: [
    { required: true, message: language.value == 0 ? '请选择发票形式' : 'Please select invoice form', trigger: 'change' }
  ],
  invoiceTitle: [
    { required: true, message: language.value == 0 ? '请输入发票抬头' : 'Please enter invoice title', trigger: 'blur' }
  ],
  invoiceTfn: [
    { required: true, message: language.value == 0 ? '请输入税号' : 'Please enter TFN', trigger: 'blur' }
  ],
  invoiceAddress: [
    { required: true, message: language.value == 0 ? '请输入地址' : 'Please enter address', trigger: 'blur' }
  ],
  invoicePhone: [
    { required: true, message: language.value == 0 ? '请输入电话' : 'Please enter phone', trigger: 'blur' }
  ],
  invoiceBank: [
    { required: true, message: language.value == 0 ? '请输入开户行' : 'Please enter bank', trigger: 'blur' }
  ],
  invoiceAccount: [
    { required: true, message: language.value == 0 ? '请输入账户' : 'Please enter account', trigger: 'blur' }
  ]
})
onMounted(() => {
  if (route.query.invoiceId) {
    invoiceId.value = route.query.invoiceId
    getList()
  }
  // 获取票务订单信息
  getTickInfo()
})


// 票务订单详情
async function getTickInfo() {
  const res = await getTicketOrderInfo({ orderId: route.query.orderId })
  ticketForm.value = res.data
  try {
    ticketForm.value.extJson = JSON.parse(ticketForm.value.extJson)
    // ticketForm.value.extJson.ticketDate = JSON.parse(ticketForm.value.extJson.ticketDate)
    // ticketForm.value.extJson.ticketType = JSON.parse(ticketForm.value.extJson.ticketType)
    cptId = ticketForm.value.activeId
    totalMoney.value = ticketForm.value.paymentType != 3 ? ticketForm.value.total : ticketForm.value.totalEn
    // message.value = JSON.parse(ticketForm.value.extJson.message)
    paymentType.value = ticketForm.value.paymentType
    await getDetail(cptId)
    // console.log(ticketForm.value)
  } catch (e) {
    console.log(e)
  } finally {

  }
}

async function getDetail(activeId) {
  const res = await getTicketInfoByActivityId({ activityId: activeId })
  matchForm.value = res.data
  console.log(matchForm.value)
}

async function getDataInfo() {
  const res = await getOrderDetail({ orderSn: route.query.orderSn })
  formDate.value = res.data
}

function getList() {
  getInvoiceDetail(invoiceId.value).then(res => {
    form.value = res.data
    totalMoney.value = form.value.total
  })
}


function backList() {
  router.push({
    name: 'myKP'
  })
}

function goBack() {
  router.go(-1)
}
</script>

<style lang="scss" scoped>
.pl-back {
  position: absolute;
  padding: 0 15px;
  display: flex;
  align-items: center;
  cursor: pointer
}

.bigMoney {
  font-size: 36px !important;
  font-family: 'DIN Alternate';
  font-weight: bold;
}

.btn-lineG {
  font-size: 16px
}

.bg-lineg {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
}

.border-info {
  position: relative;

  & > label {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    border-radius: 0 0 0px 15px;
    padding: 5px 15px;
    font-size: 14px;
  }

  .poPrice {
    position: absolute;
    bottom: 0px;
    right: 10px;
    font-size: 24px;
    line-height: 1;
    font-family: "DIN Alternate"
  }
}

.blueTag {
  color: #fff;
  background-color: #1EC886;
}

.purpleTag {
  color: #fff;
  background-color: #717bef;
}

.orangeTag {
  color: #fff;
  background-color: #ff8124;
}

.pinkTag {
  color: #fff;
  background-color: #f55497;
}

.yellowTag {
  color: #fff;
  background-color: #bad814;
}

.leftboderTT {
  font-weight: 600;
  font-size: 16px;
  color: #453DEA;
}

.border-rr {
  border-radius: 5px;
  border: 1px solid #DCDFE6;
}

.room {
  font-weight: 400;
  font-size: 14px;
  color: #929AA0;
}

.ccitemBox {
  overflow: auto;

  label {
    margin: 10px 0;
    display: block;
    min-height: 30px;

    span {
      color: #FF8124;
      font-family: DIN Alternate;
      font-size: 24px;
    }
  }
}

.ccitem {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #666;
  margin: 5px 0 10px;

  label {
    font-size: 16px;
    color: #000;
  }

  span {
    font-size: 13px;
  }
}

.red {
  color: #FF8124;
}

.tip {
  font-size: 14px;
  color: #666;
  padding: 0 10px;
}

.mw500 {
  max-width: 500px;
  margin: auto
}

.bigSize {
  font-size: 16px;
  margin-bottom: 5px;
}

.smallSize {
  font-size: 14px;
  color: #999;
}

.flexCenter {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: #f4f4f4;
  padding: 10px;
  box-sizing: border-box;
}

.bigprice {
  font-size: 26px;
  line-height: 1;
  font-family: "DIN Alternate";
}
</style>