<template>
    <el-dialog v-model="dialogVisible" 
     width="450" 
     :show-close="StepNumber==3?false:true" 
     :title="dialogTitle"
    :close-on-press-escape="false" :close-on-click-modal="false"
    @close="close">
        <!-- 填写发票信息 -->
        <div v-if="StepNumber==1" class="FillOutInvoice">
            <div class="FillOutInvoice-tips fz13">
                <p class="q-mb-md">填写须知</p>
                <ul>
                    <li>提交前请确认填写信息完整无误，已经开具的发票不可重开:</li>
                    <li>增值税电子发票和纸质发票具有相同法律效力，均支持报销;</li>
                    <li>更多问题请咨询在线客服。</li>
                </ul>
            </div> 
            <el-divider border-style="dotted" />
            <el-form ref="BillingFormRef" :model="BillingParameter" :rules="rules" label-width="85px">
                <div class="row fz14 q-pb-md">
                    <div class="FillOutInvoice-title q-pr-md">发票金额</div>
                    <span class="text-bold text-red">￥{{InvoiceDatas.total.toFixed(2)}}</span>
                </div>
                <div class="row items-center fz14">
                    <div class="FillOutInvoice-title shrink q-pr-md">开具方式</div>
                    <div>
                        <el-radio-group v-model="BillingParameter.IssuedType" @change="getBillingType">
                            <el-radio :label="1" class="row items-center">
                                <span class="text-black">
                                    <span>电子普通发票</span>
                                    <!-- <el-icon color="#9BA1AA" style="position: relative;top: 2px;left: 2px;">
                                        <Warning style="transform: rotate(180deg);"/>
                                    </el-icon> -->
                                </span>
                            </el-radio>
                            <el-radio :label="2">
                                <span class="text-black">
                                    增值税专用发票 
                                </span>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="row">
                    <div class="FillOutInvoice-title shrink q-pr-md">&nbsp;</div>
                    <div class="FillOutInvoice-InstBox col">
                        <ol class="FillOutInvoice-Inst fz13 text-black">
                            <template v-if="BillingParameter.IssuedType==1">
                                <li>电子普通发票单张最高开票金额为10000元;</li>
                                <li>若为香港、海外的公司或工会等无税号，请联系在线客服开票;</li>
                                <li>开票申请提交后，电子普通发票将在3个工作日内发到您的邮箱。</li>
                            </template>
                            <template v-if="BillingParameter.IssuedType==2">
                                <li>若为香港、海外的公司或工会等无税号，请联系在线客服开票;</li>
                                <li>若开票失败，请耐心等待1-2工作日，我们会及时处理并开具发票。</li>
                            </template>
                        </ol>
                    </div>
                </div>
                <div class="row items-center fz14 q-py-md">
                    <div class="FillOutInvoice-title shrink q-pr-md">发票类型</div>
                    <div>
                        <p v-if="BillingParameter.IssuedType==2" class="text-black q-py-sm">
                            企业
                        </p>
                        <el-radio-group v-else v-model="BillingParameter.InvoiceType">
                            <el-radio :label="1" class="row items-center">
                                <span class="text-black">
                                    企业
                                </span>
                            </el-radio>
                            <el-radio :label="2">
                                <span class="text-black">
                                    个人 
                                </span>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <el-form-item label="发票抬头" prop="InvoiceTitle">
                    <el-input v-model="BillingParameter.InvoiceTitle" placeholder="例如:高小定"></el-input>
                </el-form-item>
                <el-form-item label="税号" prop="InvoiceTaxNo">
                    <el-input v-model="BillingParameter.InvoiceTaxNo" placeholder="例如:1232000046600736XP"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址" prop="Email">
                    <el-input v-model="BillingParameter.Email" placeholder="例如:gaoxiaoding@gaoding.com"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="StepNumber==2" class="InvoiceVerify">
            <p class="InvoiceVerify-title fz14 q-pb-lg">请确认信息无误，提交后将无法修改。</p>
            <div class="InvoiceVerify-box fz14">
                <div class="row flex-between items-center q-py-sm">
                    <span>开票金额</span>
                    <span class="text-bold">￥{{InvoiceDatas.total.toFixed(2)}}</span>
                </div>
                <div class="row flex-between items-center q-py-sm">
                    <span>开具方式</span>
                    <span class="text-bold">{{BillingParameter.IssuedType==1?'电子普通发票':'增值税专用发票'}}</span>
                </div>
                <div class="row flex-between items-center q-py-sm">
                    <span>发票类型</span>
                    <span class="text-bold">{{BillingParameter.InvoiceType==1?'企业':'个人'}}</span>
                </div>
                <div class="row flex-between items-center q-py-sm">
                    <span>发票抬头</span>
                    <span class="text-bold">{{BillingParameter.InvoiceTitle}}</span>
                </div>
                <div class="row flex-between items-center q-py-sm">
                    <span>邮箱地址</span>
                    <span class="text-bold">{{BillingParameter.Email}}</span>
                </div>
            </div>
        </div>
        <div v-if="StepNumber==3" class="InvoiceResult">
            <div class="row items-center">
                <el-icon color="#1CCC66" size="25"><SuccessFilled /></el-icon>
                <span class="text-black fz20 q-pl-lg">提交成功</span>
            </div>
            <div class="row fz14">
                <div style="width: 25px;">&nbsp;</div>
                <div class="q-pl-lg q-pt-md" style="color: #9BA1AA;">电子发票将在3个工作日内发送到您的邮箱。</div>
            </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <template v-if="StepNumber==1">
                <el-button @click="close">取消</el-button>
                <el-button type="primary"
                @click="submitForm(BillingFormRef)">
                    申请开票
                </el-button>
            </template>
            <template v-if="StepNumber==2">
                <el-button @click="StepNumber=1,dialogTitle='申请开票'">返回修改</el-button>
                <el-button type="primary"
                @click="setOrderInvoice" :loading="loading">
                    确认提交
                </el-button>
            </template>
            <template v-if="StepNumber==3">
                <el-button type="primary"
                @click="success">
                    知道了
                </el-button>
            </template>
          </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({
        InvoiceDatas: {} as Object,
        show: true as Boolean
    })
    
    const emit = defineEmits<{
        (event: 'close'): void,
        (event: 'success'): void
    }>()

    const OrderInvoiceRef = ref()
    const dialogVisible = ref(false)
    const dialogTitle = ref('申请开票')
    const StepNumber = ref(1)
    const loading = ref(false)
    const BillingParameter = reactive({
        IssuedType: 1,
        InvoiceType: 1,
        InvoiceTitle: '',
        InvoiceTaxNo: '',
        Email: '',
        OrderIds: [],
    })
    const BillingFormRef = ref<FormInstance>()
    const rules = reactive<FormRules<RuleForm>>({
        InvoiceTitle: [
            { required: true, message: '请填写发票抬头', trigger: 'blur' },
        ],
        InvoiceTaxNo: [
            { required: true, message: '请填写纳税人识别号', trigger: 'blur' },
            { min: 6, message: '请填写正确的纳税人识别号', trigger: 'blur' },
        ],
        Email: [
            { required: true, message: '请填写邮箱', trigger: 'blur' },
            { min: 6, message: '请填写正确的邮箱', trigger: 'blur' },
        ],
        
    })
    const InvoiceInfor = ref([] as any)

    const submitForm = async (formEl: FormInstance | undefined) => {
        BillingParameter.OrderIds = props.InvoiceDatas.isMore?props.InvoiceDatas.Ids:props.InvoiceDatas.orderid
        if (!formEl) return
        await formEl.validate(async (valid) => {
            if (valid) {
                StepNumber.value = 2
                dialogTitle.value = '发票信息确认'
            }
        })
    }

    const setOrderInvoice = async () => {
        loading.value = true
        const response = await OrderService.SetPPTUserInvoice(BillingParameter)
        if(response.data.resultCode == ApiResult.SUCCESS){
            StepNumber.value = 3
            dialogTitle.value = ''
            if (!BillingFormRef.value) return
            BillingFormRef.value.resetFields()
        } else ElMessage.warning({
            showClose: true,
            message: `${response.data.message}`,
        })
        loading.value = false
    }
    const success = () => {
        emit('success')
    }
    const getBillingType = () =>{
        if(BillingParameter.IssuedType==2) BillingParameter.InvoiceType = 1
    }
    const close = ()=>{
        emit('close')
        if (!BillingFormRef.value) return
        BillingFormRef.value.resetFields()
    }

    const getInvoiceInfor = async () => {
        const response = await OrderService.GetUserDutyParagraph()
        if(response.data.resultCode == ApiResult.SUCCESS){
            if(response.data.data.Email){
                InvoiceInfor.value = response.data.data
                BillingParameter.IssuedType = InvoiceInfor.value.IssuedType
                BillingParameter.InvoiceType = InvoiceInfor.value.InvoiceType
                BillingParameter.InvoiceTitle = InvoiceInfor.value.InvoiceTitle
                BillingParameter.InvoiceTaxNo = InvoiceInfor.value.InvoiceTaxNo
                BillingParameter.Email = InvoiceInfor.value.Email
            }
        }
    }
    getInvoiceInfor()
    watch(()=>props.show,(n,o)=>{
        if(n) {
            StepNumber.value = 1
            dialogVisible.value = true
        }
        else dialogVisible.value = false
    })
  </script>
  
  <style scoped>
.FillOutInvoice{
    
}
.FillOutInvoice-tips{
    color: #9BA1AA;
}
.FillOutInvoice-tips ul{
    padding: 0 25px;
}
.FillOutInvoice-tips ul li{
    list-style: disc;
    padding-bottom: 5px;
}
.FillOutInvoice-title{
    width: 85px;
    font-size: 14px;
    text-align: right;
}
.FillOutInvoice-InstBox{
    border-radius: 8px;
    background: #FEF3E9;
    border: 1px solid #FCE8D3;
    padding: 8px 0;
}
.FillOutInvoice-Inst{
    list-style-type:demical;
    padding: 0 25px;
}
.InvoiceVerify-title{
    color: #9BA1AA;
}
.InvoiceVerify-box{
    border-radius: 8px;
    background: #F6F7F9;
    padding: 10px 20px;
}
  </style>