<template>
  <div class="full-dialog column flex-center items-center" ref="OrderReviewRef">
    <div class="pre-order-box animate__animated animate__backInUp">
        <div class="close-btn column items-center flex-center cusor-pointer" @click="close">
            <IconClose size="0.83vw"></IconClose>
        </div>
        <div class="tabs-version-box row">
            <div class="item col magrig" :class="{'active':activeVersion==1}" @click="changeVersionHandler(1)" v-if="showPerson && !userInfo.it">个人版</div>
            <div class="item col" :class="{'active':activeVersion==2}" @click="changeVersionHandler(2)" v-if="showEnterprise">企业版</div>
            <div class="col" v-if="!showPerson || !showEnterprise || userInfo.it"></div>
        </div>
        <div class="pre-order row">
            <div class="item column">
                <div class="pa border text-weight-bold" style="font-size: 0.83vw;">权益详情</div>
                <div class="col">
                    <el-scrollbar class="pa full-width full-height">
                        <div class="content-item" v-if="currentProduct">
                            <span>适用人数</span>
                            <span>{{ currentProduct.maxuser }}人</span>
                        </div>
                        <div class="content-item" v-for="(x,i) in rights" :key="i">
                            <span>{{ x.name }}</span>
                            <span v-if="x.value=='no'"><IconClose :size="16" class="text-negative"></IconClose> </span>
                            <span v-if="x.value=='yes'"><IconCheck :size="16" class="text-success" /></span>
                            <span v-else><span class="text-grey-8" v-if="x.sub">{{ x.sub }}</span>{{ x.value }}</span>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <div class="item col column">
                <div class="pa border text-weight-bold" style="font-size: 0.83vw;">{{ activeVersion==1?'个人专业版':'企业专业版' }}</div>
                <div class="col" v-loading="loading">
                    <div class="row wrap">
                        <div class="price-item cusor-pointer" v-for="(x,i) in products" :key="i" :class="{'active':currentProduct.priceid==x.priceid}" @click="changeCurrentProduct(x)">
                            <div class="pname">{{ activeVersion==1? x.invalidname:x.vipname }}</div>
                            <div class="price" v-if="x.price>0">
                                <span class="text-weight-bold">￥</span>
                                <span class="text-weight-bold" style="font-size: 1.67vw;">{{ x.price }}</span>
                                <span class="text-grey-8">/人</span>
                            </div>
                            <div class="price" v-else>
                                <span class="text-weight-bold" style="font-size: 1.2vw;">咨询客服</span>
                            </div>
                            <div class="text-small text-info" v-if="x.price>0">只需{{ Math.floor((x.price/x.invalidmonth)) }}/每月</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item" v-if="currentProduct">
                <div class="pa border text-weight-bold" style="font-size: 0.83vw;">支付订单</div>
                <div class="pa" style="font-size: 0.73vw;" v-loading="qrLoading">
                    <template v-if="currentProduct.price>0 && qrCode!='none'">
                        <QRCode :value="qrCode" size="100%" v-if="!qrLoading"></QRCode>
                        <QRCode value="http://www.viitto.com" size="100%" v-if="qrLoading"></QRCode>
                        <div class="q-mt-md flex-center row items-center">
                            请在 <el-countdown title="" format="mm:ss" :value="countValue" value-style="font-size:14px;color:#f89c53;" class="inline q-mx-sm" @finish="setPaymentQrCode" /> 完成支付
                        </div>
                        <div style="color: #929292;margin:0.63vw 0 1.15vw 0">使用 微信 扫码支付 支付即视为你同意 <span class="cusor-pointer text-primary">相关协议</span> 条例</div>
                        <div class="rounded bg-info column flex-center items-center text-dark" style="padding:1.5vw;">
                            <div class="text-weight-bold" style="margin-bottom: 1.2vw">实付金额</div>
                            <div class="text-negative">
                                <span>￥</span>
                                <span style="font-size: 1.35vw" class="text-weight-bold">{{ currentProduct.price.toString().split('.')[0] }}</span>
                                <span>.{{ currentProduct.price.toFixed(2).toString().split('.')[1] }}</span>
                            </div>
                        </div>
                    </template>
                    <div v-else>
                        <div class="text-small text-info" style="margin-bottom: 1.5vw">定制版本需要联系客服进行沟通，我们将会根据你的需求为你进行量身打造</div>
                        <el-button type="primary" size="large" class="full-width" @click="redicetTo('https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e')">开始定制</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApiResult, VipType } from '@/configs/axios'
import { EntMemberRight, FreeMemberRight, PersonMemberRight } from '@/configs/customer'
import OrderService from '@/services/OrderService'
import UserServices from '@/services/UserService'
import { useUserStore } from '@/store'
import { openNewBlank, query } from '@/utils/common'
import { storeToRefs } from 'pinia'
import { ref,PropType, onMounted } from 'vue'

const props = defineProps({
  defaultType: {
    type: Number,
    default:1
  },
  showPerson:{
    type:Boolean,
    default:true
  },
  showEnterprise:{
    type:Boolean,
    default:true
  }
})

const emit = defineEmits<{
  (event: 'close'): void
}>()

const {userInfo} = storeToRefs(useUserStore())
const activeVersion = ref(props.defaultType)
const rights = ref(PersonMemberRight)
const loading = ref(false)
const entProducts = ref<any[]>();
const psnProducts = ref<any[]>();
const products = ref<any[]|undefined>([])
const currentProduct = ref<any>()
const qrCode = ref('none')
const qrLoading = ref(false)
const OrderReviewRef = ref()
const orderNum = ref('')
const queryTimer = ref<any>(null)
const currentPayStatus = ref(0)
const countValue = ref(Date.now() + 1000 * 60 * 30)

if(userInfo.value.it) activeVersion.value=2

const changeVersionHandler = (v:number)=>{
    activeVersion.value=v
    currentProduct.value = null
    rights.value = v==1?PersonMemberRight:EntMemberRight
    products.value = v==1?psnProducts.value:entProducts.value
    if(products.value && products.value.length>0) currentProduct.value = products.value[0]
    setPaymentQrCode()
}
const formatProductHandler = (data: any[]) => {
  if (Array.isArray(data)) {
    entProducts.value = data.filter((x) => x.viptype == VipType.TEAM);
    psnProducts.value = data.filter((x) => x.viptype == VipType.PERSON);
    products.value = activeVersion.value ==1 ?psnProducts.value:entProducts.value
    if(products.value && products.value.length>0) currentProduct.value = products.value[0]
    setPaymentQrCode()
  }
}
const getProduct = async () => {
  loading.value = true;
  const response = await UserServices.GetProductAsync();

  if (response.data.resultCode == ApiResult.SUCCESS) {
    formatProductHandler(response.data.data.pageData);
  }
  loading.value = false;
}
const changeCurrentProduct = (item:any)=>{
    currentProduct.value  = item
    setPaymentQrCode()
}
const beginTimerHandler = ()=>{
    queryTimer.value = setInterval(async ()=>{
        await getOrderStatus()
    },3000)
}
const stopTimerHandler = ()=>{
    if(queryTimer.value){
        clearInterval(queryTimer.value)
        queryTimer.value=null
    }
}
const getOrderStatus = async ()=>{
    if(orderNum.value!=''){
        const response = await OrderService.GetOrderPayStatusAsync(orderNum.value)
        if(response.data.resultCode == ApiResult.SUCCESS){
            currentPayStatus.value = parseInt(response.data.message)
        }else{
            stopTimerHandler()
        }
    }
        
}
const setPaymentQrCode = async ()=>{
    stopTimerHandler()
    orderNum.value=''
    qrLoading.value=true
    const parameters = {
        priceid:currentProduct.value.priceid,
        vipid:currentProduct.value.vipid,
        pricetype:1,
        price:currentProduct.value.price,
        activedate:'2024-04-15',
        orderid:0
    }
    const response = await OrderService.CreateTempOrderPaymentAsync(parameters)
    if(response.data.resultCode==ApiResult.SUCCESS){
        qrCode.value = response.data.data.qr
        orderNum.value = response.data.data.no
        countValue.value = Date.now() + 1000 * 60 * 30
        beginTimerHandler()
    }else{
        qrCode.value='none'
    }
    qrLoading.value=false
}
const close = ()=>{
    stopTimerHandler()
    emit('close')
}

const redicetTo = (url:string)=>openNewBlank(url)
onMounted(()=>{
    if(OrderReviewRef.value){
        OrderReviewRef.value.click()
    }
})
getProduct()
</script>

<style scoped>
.pre-order-box{
    width: 62.5vw;
    height: 32.66vw;
    background: linear-gradient(90deg, #638FEB, #5921DB);
    border-radius: 0vw 0vw 0.52vw 0.52vw;
    padding: 4px;
    position: relative;
}
.pre-order-box .close-btn{
    position: absolute;
    top:-4.17vw;
    right: -1.93vw;
    width: 1.77vw;
    height: 1.77vw;
    border:2px solid #AFAFAF;
    text-align: center;
    color:#AFAFAF;
    border-radius: 50%;
}
.pre-order-box .close-btn:hover{
    color: #FFF;
    border-color: #FFF;
}
.pre-order-box .pre-order{
    width: 100%;
    height: 100%;
    background: #EFF4FF;
    border-radius: 0px 0px 10px 10px;
    padding:1.56vw;
}
.pre-order-box .pre-order .item{
    background: #FFF;
    height: 100%;
    margin-right: 1.25vw;
    border-radius: 0.52vw;
}
.pre-order-box .pre-order .item .border{
    border-bottom: 1px solid #EFF4FF;;
}
.pre-order-box .pre-order .item .pa{
    padding:1.09vw 2.08vw;
}
.pre-order-box .pre-order .item:first-child,
.pre-order-box .pre-order .item:last-child{
    width:12.86vw;
}
.pre-order-box .pre-order .item:last-child{
    margin-right: 0;
}
.pre-order-box .pre-order .item .content-item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.73vw;
    margin-bottom: 0.7vw;
    color: #000000;
}
.pre-order-box .pre-order .price-item{
    width: 7.81vw;
    height: 9.58vw;
    background: #FFFFFF;
    border-radius: 0.42vw;
    border: 1px solid #D1D1D1;
    padding:2.4vw 0 1.2vw 1.2vw;
    margin:2.03vw 0 0 1.72vw;
}
.pre-order-box .pre-order .price-item.active{
    background: #EEF3FF;
    border: 1px solid #3556F9;
}

.pre-order-box .pre-order .price-item .pname{
    font-weight: bold;
    font-size: 0.94vw;
    color: #000000;
    line-height: 1;
    margin-bottom: 1.2vw;
}
.pre-order-box .pre-order .price-item .price{
    font-size: 0.73vw;
    margin-bottom: 1.2vw;
}
.pre-order-box .pre-order .price-item.active .price{
    color:#3556F9;
}
.pre-order-box .pre-order .item .content-item:last-child{
    margin: 0;
}
.pre-order-box .tabs-version-box{
    height: 2.6vw;
    top:-2.6vw;
    position: absolute;
    left: 0;
    right: 0;
}
.pre-order-box .tabs-version-box .item.magrig{
    margin-right: 1.04vw;
}
.pre-order-box .tabs-version-box .item{
    height: 2.6vw;
    background: #DFDFDF;
    border-radius: 1.25vw 1.25vw 0vw 0vw;
    text-align: center;
    line-height: 2.6vw;
    font-size: 0.94vw;
    color: #000000;
    cursor: pointer;
    user-select: none;
}
.pre-order-box .tabs-version-box .item.active{
    background: linear-gradient(90deg, #649DED, #570AD8);
    color:#FFF;
}
</style>