<template>
    <div class="channel-wrap">
        <div class="channel-tab-line">
            <div class="channel-tab"
            :class="[
                {'tab-active': item.active},
                {'channel-tab-light': (item.pay_code=='LDAgency' || item.pay_code=='htfxcashier' || item.pay_code=='htfxcashier3')},
                {'channel-tab-dark': (item.pay_code=='remittance' || item.pay_code=='remittance2' || item.pay_code=='remittance3' || item.pay_code=='remittance4' || item.pay_code=='htfxcashier2')}
            ]" 
            style=""
            v-for="(item, index) in channelList" :key="index" @click="selectChannel(index)" >
                <div style="height: 100%;overflow: hidden;position: relative;display: flex;align-items: center;padding: 0 20px;">
                    <template v-if="item.pay_code=='remittance'">
                        <svg-icon icon-class="remittanceIcon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
                        <svg-icon icon-class="remittanceIcon2" class="channel-icon" v-if="item.active && (index%2)==0" />
                        <svg-icon icon-class="remittanceIcon1" class="channel-icon" v-if="!item.active" />
                    </template>
                    <template v-if="item.pay_code=='remittance2'">
                        <svg-icon icon-class="remittance2Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" style="left: -10px;bottom: -10px;" />
                        <svg-icon icon-class="remittance2Icon2" class="channel-icon" v-if="item.active && (index%2)==0" style="left: -10px;bottom: -10px;" />
                        <svg-icon icon-class="remittance2Icon1" class="channel-icon" v-if="!item.active" style="left: -0.5vw;bottom: -10px;" />
                    </template>
                  <template v-if="item.pay_code=='remittance4'">
                        <svg-icon icon-class="remittance2Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" style="left: -10px;bottom: -10px;" />
                        <svg-icon icon-class="remittance2Icon2" class="channel-icon" v-if="item.active && (index%2)==0" style="left: -10px;bottom: -10px;" />
                        <svg-icon icon-class="remittance2Icon1" class="channel-icon" v-if="!item.active" style="left: -0.5vw;bottom: -10px;" />
                    </template>
                    <template v-if="item.pay_code=='remittance3'">
                        <svg-icon icon-class="remittance3Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
                        <svg-icon icon-class="remittance3Icon2" class="channel-icon" v-if="item.active && (index%2)==0" />
                        <svg-icon icon-class="remittance3Icon1" class="channel-icon" v-if="!item.active" />
                    </template>
                    <template v-if="item.pay_code=='LDAgency'">
                        <svg-icon icon-class="LDAgencyIcon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
                        <svg-icon icon-class="LDAgencyIcon2" class="channel-icon" v-if="item.active && (index%2)==0" />
                        <svg-icon icon-class="LDAgencyIcon1" class="channel-icon" v-if="!item.active" />
                    </template>
                    <template v-if="item.pay_code=='htfxcashier' || item.pay_code=='ForcePay' || item.pay_code=='AbaPay' || item.pay_code=='PayOK'
                     || item.pay_code=='DidaPay' || item.pay_code=='PaySpec' || item.pay_code=='RediPay' || item.pay_code=='CCPay' || item.pay_code=='EBitPay' || item.pay_code=='Help2Pay'">
                        <svg-icon icon-class="htfxcashierIcon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
                        <svg-icon icon-class="htfxcashierIcon2" class="channel-icon" v-if="item.active && (index%2)==0" />
                        <svg-icon icon-class="htfxcashierIcon1" class="channel-icon" v-if="!item.active" />
                    </template>
                    <template v-if="item.pay_code=='htfxcashier2'">
                        <svg-icon icon-class="htfxcashier2Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
                        <svg-icon icon-class="htfxcashier2Icon2" class="channel-icon" v-if="item.active && (index%2)==0" />
                        <svg-icon icon-class="htfxcashier2Icon1" class="channel-icon" v-if="!item.active" />
                        <!-- <div style="position: absolute;top: 0;right: 0;max-width: 100%;display: flex;align-items: center;padding: 3px 0.6vw;background-image: linear-gradient(90deg, #DBBC95 0%, #FBEAC7 99%, #FBEAC7 100%);border-radius: 0 8px 0 0.8vw;">
                            <el-text style="font-size: 0.8vw;font-weight: 500;color: rgba(14, 48, 102, 1);">{{ t('capital.subsidyTips') }}</el-text>
                        </div> -->
                    </template>
                    <template v-if="item.pay_code=='htfxcashier3' || item.pay_code=='One2Pay'">
                         <!-- <svg-icon icon-class="htfxcashier3Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" style="left: -12px;bottom: -12px;" />
                         <svg-icon icon-class="htfxcashier3Icon2" class="channel-icon" v-if="item.active && (index%2)==0" style="left: -12px;bottom: -12px;" />
                         <svg-icon icon-class="htfxcashier3Icon1" class="channel-icon" v-if="!item.active" style="left: -12px;bottom: -12px;" /> -->
                        <svg-icon icon-class="remittance2Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" style="left: -10px;bottom: -10px;" />
                        <svg-icon icon-class="remittance2Icon2" class="channel-icon" v-if="item.active && (index%2)==0" style="left: -10px;bottom: -10px;" />
                        <svg-icon icon-class="remittance2Icon1" class="channel-icon" v-if="!item.active" style="left: -0.5vw;bottom: -10px;" />
                    </template>
                   <div class="channel_name">{{ item.pay_name }}</div>
                   <el-icon style="font-size: 19px;" v-if="item.active" ><ArrowDown /></el-icon>
                   <el-icon style="font-size: 19px;" v-else ><ArrowRight /></el-icon>
                </div>
                <div v-if="item.active" class="active-overlay" ></div>
            </div>
        </div>
        <el-collapse-transition>
            <div class="channel-pannel" v-show="activeChannel" >
                <div class="pay-form">
                    <gold-in v-if="type == 'goldIn' && activeChannel" 
                    :templateContent="templateContent"
                    :channel="activeChannel" 
                    :actId="actId" 
                    :actMtServer="actMtServer" 
                    :actMtServerName="actMtServerName" 
                    :actMtLogin="actMtLogin" 
                    :mtServer="mtServer" 
                    :mtLogin="mtLogin" 
                    :ioPowerMap="ioPowerMap" 
                    @close-channel="handleCloseChannel"
                    />
                </div>
            </div>
        </el-collapse-transition>
    </div>
</template>

<script setup>
import { defineModel, watch } from "vue"
import pay_local from '@/assets/img/pay_local.png'
import pay_online from '@/assets/img/pay_online.png'
import pay_usdt from '@/assets/img/pay_usdt.png'
import { serverLang } from '@/utils/i18n'
import { getTemplateDetailByCode } from '@/api/common'
import { useLocale } from 'element-plus'
import GoldIn from "./goldIn"

const { t } = useLocale()
const channelList = defineModel('channelList')
const activeChannel = ref(null)

const props = defineProps({
    type: String,
    mtServer: String,
    mtLogin: String,
    actId: String,
    actMtServer: String,
    actMtLogin: String,
    actMtServerName: String,
    ioPowerMap: {
        type: Object,
        default: {}
    }
})

const templateContent = ref(null)

watch(() => props.type, (n, o) => {
    if (n == 'goldIn') {
        getTemplateDetailByCode({
            qcc_language: serverLang(),
            templateCode: 'MONEY_IN'
        }).then(resp => {
            templateContent.value = resp.data.content
        })
    // } else if (n == 'goldOut') {
    //     getTemplateDetailByCode({
    //         qcc_language: serverLang(),
    //         templateCode: 'MONEY_OUT'
    //     }).then(resp => {
    //         templateContent.value = resp.data.content
    //     })
    }
}, {
    immediate: true
})

function getIcon(item) {
    if (item.icon == '/img/pay_local.png') {
        return pay_local
    }
    if (item.icon == '/img/pay_online.png') {
        return pay_online
    }
    if (item.icon == '/img/pay_usdt.png') {
        return pay_usdt
    }
}

function selectChannel(index) {
    activeChannel.value = null
    if (channelList.value && channelList.value.length > index) {
        for (let i = 0; i < channelList.value.length; i++) {
            if (i == index) {
                activeChannel.value = channelList.value[i].active ? null : channelList.value[i]
                channelList.value[i].active = channelList.value[i].active ? false : true
            } else {
                channelList.value[i].active = false
            }
        }
    }
}

function handleCloseChannel() {
    activeChannel.value = null
    for (let i = 0; i < channelList.value.length; i++) {
        channelList.value[i].active = false
    }
}
</script>

<style lang="scss" scoped>
.channel-wrap {
    width: 100%;
    margin-bottom: 10px;
    margin-left: -12px;

    .channel-tab-line {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: content-box;
        display: flex;
    }

    .channel-tab {
        flex-shrink: 0;
        width: 312px;
        height: 105px;
        display: inline-block;
        border-radius: 8px 8px 8px 8px;
        background-color: #fff;
        margin-top: 12px;
        margin-bottom: 12px;
        margin-right: 18px;
        user-select: none;
        cursor: pointer;
        position: relative;
        color: #fff;
        background: linear-gradient(90deg, rgba(37, 192, 229, 1) 0%, rgba(187, 229, 240, 1) 100%);
        &:nth-child(2n) {
            background: linear-gradient(90deg, rgba(15, 54, 117, 1) 0%, rgba(102, 118, 176, 1) 100%);
      }
        .channel-icon {
            position: absolute;
            bottom: -10px;
            left: -4px;
            font-size: 99px;
        }

        .channel_name {
            margin-left: 97px;
            width: 51%;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 0px;
            color: rgba(51, 51, 51, 1);
            white-space: pre-wrap;
        }
    }


    .channel-tab-light {
        //color: #fff;
        //background: linear-gradient(90deg, rgba(37, 192, 229, 1) 0%, rgba(187, 229, 240, 1) 100%);
    }

    .channel-tab-dark {
        //color: #fff;
        //background: linear-gradient(90deg, rgba(15, 54, 117, 1) 0%, rgba(102, 118, 176, 1) 100%);
    }

    .channel-tab-light .channel_name {
        color: #fff;
    }

    .channel-tab-dark .channel_name {
        color: #fff;
    }

    .tab-active {
        border-radius: 8px 8px 0 0;
        color: #333333;
        background: #fff !important;
    }

    .tab-active .channel_name {
        color: #333333;
    }

    .active-overlay {
        position: absolute;
        top: 0;
        width: 100%;
        bottom: -20px;
        left: 0;
        box-shadow: 0px 2px 9px  rgba(0, 0, 0, 0.1);
        background-color: transparent;
        border-radius: 8px 8px 0 0;
        z-index: 2;
    }

    .active-overlay::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        background: #fff;
        left: 0;
        height: 20px;
    }

    .channel-pannel {
        width: 100%;
        min-height: 500px;
        margin-left: 12px;
        margin-bottom: 40px;
        box-shadow: 0px 2px 9px  rgba(0, 0, 0, 0.1);

        .pay-form {
            // background-color: #d64a4a;
            min-height: 500px;
            width: 100%;
            padding: 50px 80px;
            position: relative;
        }
    }
}
</style>