import { getValFromBrowserAddress, checkIsLoginFn, getPublictUserInfo ,layerPopup} from '../public/commonFun.js';
import { apiPayChannele,apiPayOrderCreate } from '../public/api/index.js';
import { fetchApi,onError,strSite} from '../public/api/fetch.js';
import { getLoginStatus }from '../public/localstorage.js';

$(document).ready(function() {
	// 登录状态
	if (getLoginStatus()) {
		//getUserInfo()
	}else{
		location.href="/login.html"
	}
	let intVpId = getValFromBrowserAddress('id')
	let intActiveCgId = null
	//支付金额
	$('.sc-payment-amount').text('￥'+getValFromBrowserAddress('val')) 
	getChannelList()
    let paymentData = [
	    // {
	    //     method: { id: 'alipay', name: '支付宝88', img: '/assets/huiyuan/images/zhifubao.png' },
	    //     channels: [
		//         {id: '1', name: '支付宝1', img: '/assets/huiyuan/images/zhifubao.png'},
		//         {id: '2', name: '支付宝2', img: '/assets/huiyuan/images/zhifubao.png'},
		//         {id: '3', name: '支付宝3', img: 'v/images/zhifubao.png'},
	    //     ]
	    // },
	    // {
	    //     method: { id: 'wechat', name: '微信88', img: '/assets/huiyuan/images/wechat.png' },
	    //     channels: [
	    //     	{id: '11', name: '微信1', img: '/assets/huiyuan/images/zhifubao.png'},
		//         {id: '12', name: '微信2', img: '/assets/huiyuan/images/zhifubao.png'},
		//         {id: '13', name: '微信3', img: '/assets/huiyuan/images/zhifubao.png'},
	    //     ]
	    // },
	    // {
	    //     method: { id: 'test', name: '测试', img: '/assets/huiyuan/images/wechat.png' },
	    //     channels: [
	    //     	{id: '21', name: '测试1', img: '/assets/huiyuan/images/zhifubao.png'},
		//         {id: '22', name: '测试2', img: '/assets/huiyuan/images/zhifubao.png'},
		//         {id: '23', name: '测试3', img: '/assets/huiyuan/images/zhifubao.png'},
	    //     ]
	    // }
	];
	
	const paymentMethodsContainer = document.getElementById('payment-methods-container');
	const paymentChannelsContainer = document.getElementById('payment-channels-container');
	
	function renderPaymentMethods() {
	    let html = `<div class="fl"><div>支付方式</div></div><div class="mt10"><div class="fl gap5 align_center fl_wrap">`;
	    paymentData.forEach((data, index) => {
	        const method = data.method;
	        html += `
	            <div id="${method.id}" class="e21f3fa97e point relative ${index === 0 ? 'selected _71a3d26126' : ''}" onclick="selectPaymentMethod(${index})">
	                <img sizes="100vh" class="point fill undefined" height="33" width="33" alt="${method.name}" src="${method.icon}">
	                <div class="mt3 ${index === 0 ? 'c63892b6d2' : ''}">${method.name}</div>
	                <div class="abs eb2a18721c" style="display:${index === 0 ? 'block' : 'none'};"><img sizes="100vh" class="point fill undefined" height="25" width="25" alt="" src="/assets/huiyuan/images/user-center/charge/h.png"></div>
	            </div>`;
	    });
	    html += `</div></div>`;
	    paymentMethodsContainer.innerHTML = html;
	}
	
	function renderPaymentChannels(index) {
		
	    const channels = paymentData[index].channels;
	    intActiveCgId =  paymentData[index].channels[0].id
	    let html = `<div class="fl"><div>渠道选择</div></div><div class="mt10"><div class="fl gap5 align_center fl_wrap">`;
	    channels.forEach((channel, idx) => {
	        html += `
	            <div id="channel-${idx}" class="e21f3fa97e point relative ${idx === 0 ? 'selected _71a3d26126' : ''}" style="height: 25px; display: flex; align-items: center; justify-content: center;" onclick="selectPaymentChannel(${idx}, ${index})">
	                <div class="mt3 ${idx === 0 ? 'c63892b6d2' : ''} b36fec8841">${channel.name}</div>
	                <div class="abs eb2a18721c" style="display:${idx === 0 ? 'block' : 'none'};"><img sizes="100vh" class="point fill undefined" height="25" width="25" alt="" src="/assets/huiyuan/images/user-center/charge/h.png"></div>
	            </div>`;
	    });
	    html += `</div></div>`;
	    paymentChannelsContainer.innerHTML = html;
	}
	
	window.selectPaymentMethod = function(index) {
	    document.querySelectorAll('#payment-methods-container .e21f3fa97e').forEach(el => {
	        el.classList.remove('selected', '_71a3d26126');
	        el.querySelector('.mt3').classList.remove('c63892b6d2');
	    });
	    paymentData.forEach((data) => {
	        document.querySelector(`#${data.method.id} .eb2a18721c`).style.display = 'none';
	    });
	    const selectedMethod = document.getElementById(paymentData[index].method.id);
	    intActiveCgId =  paymentData[index].channels[0].id
	    
	    selectedMethod.classList.add('selected', '_71a3d26126');
	    selectedMethod.querySelector('.mt3').classList.add('c63892b6d2');
	    selectedMethod.querySelector('.eb2a18721c').style.display = 'block';
	    renderPaymentChannels(index);
	}
	
	window.selectPaymentChannel = function(channelIdx, methodIdx) {
	    document.querySelectorAll('#payment-channels-container .e21f3fa97e').forEach(el => {
	        el.classList.remove('selected', '_71a3d26126');
	        el.querySelector('.mt3').classList.remove('c63892b6d2');
	    });
	    paymentData[methodIdx].channels.forEach((channel, idx) => {
	        document.querySelector(`#channel-${idx} .eb2a18721c`).style.display = 'none';
	    });
	    const selectedChannel = document.getElementById(`channel-${channelIdx}`);
	    selectedChannel.classList.add('selected', '_71a3d26126');
	    selectedChannel.querySelector('.mt3').classList.add('c63892b6d2');
	    selectedChannel.querySelector('.eb2a18721c').style.display = 'block';
	    
	    // 获取点击渠道的 id
        intActiveCgId = paymentData[methodIdx].channels[channelIdx].id;
	}
	/**
     *  获取支付通道
     */
    function getChannelList() {
        let strApiUrl = apiPayChannele + "?vp_id="+intVpId
        fetchApi(strApiUrl, null,successFn, onError,'拼命加载中。。。')
		function successFn(res) {
			if (res.code == '000') {
                let arrPayChannel = res.data.item
                if(arrPayChannel.length <=0){
                    layerPopup('暂无支付渠道,请稍后再试！', 3)
                    return false
                }
				arrPayChannel.forEach((item)=>{
					item.id = item.cg_id
					item.name = item.pg_channel_name
					if(item.pg_channel_code == 'ZFB'){
						item.icon = '/assets/huiyuan/images/zhifubao.png'
					}else if(item.pg_channel_code == 'WX'){
						item.icon = '/assets/huiyuan/images/wechat.png'
					}
				})
                // 提取 pg_channel_name 和 pg_product_code 到新数组
                const extractedData = arrPayChannel.map(PayChannel => {
                    const filteredElements = arrPayChannel.filter(item => item.pg_channel_code === PayChannel.pg_channel_code);
					return {
						method:{
							name: PayChannel.pg_channel_name,
							id: PayChannel.pg_channel_code,
							pg_channel_code: PayChannel.pg_channel_code,
							icon: PayChannel.icon,
						},
						channels:filteredElements
                       
                    };
                });
				paymentData = extractedData
				renderPaymentMethods();
				renderPaymentChannels(0); // Show channels for the first payment method by default
			} else {
				layerPopup(res.msg, 3)
			}
		}
	}

	//  确认支付
	$(".sc-pay-btn").on('click', function () {
		getCreateV(intVpId, intActiveCgId)
	});
	/**
     * 创建支付订单
     * @param {number} vp_id // 套餐id
     * @param {number} intCgId // 通道id
     */
    function getCreateV(intVpId, intCgId) {

        let postData = {
            'vp_id':intVpId,
            'cg_id':intCgId,
            'si_id':strSite,
        }
		if(postData.cg_id == null || postData.cg_id.length ==0 ){
			layerPopup('暂无支付渠道,请稍后再试！', 3)
			return false
		}
        fetchApi(apiPayOrderCreate, postData,successFun, onError)
		function successFun(res) {
			if (res.code == '000') {
				let time = setTimeout(()=>{
					$(".sc-pay-jump-popup").show()
					clearTimeout(time)
				},3000)
			} 
		}
	}

	//立即跳转
	$(".sc-Jump-immediately-btn").on('click', function () {		
		$(".sc-pay-jump-popup").hide()
	    window.open('https://render.alipay.com/p/yuyan/180020040001212700/?cid=wap_dc', '_blank');
	});


})