<template>
    <div class="card">
        <div class="header">
            <div class="t1">
                <span class="title">应收:￥</span>
                <span class="num">{{ props.amount }}</span>
            </div>
            <div class="t2">
                <span>已付:￥0.00</span>
                <span>优惠:￥0.00</span>
            </div>
        </div>
        <div class="number_wrap">
            <div class="menus">
                <div class="item" :class="{ active: payActive == index }" v-for="(item, index) in payList"
                    :key="item.id" @click="payTypeChange(index, item)">
                    <div class="icon">
                        <el-image :src="item.icon" class="img"></el-image>
                    </div>
                    <span class="title">{{ item.payName }}</span>
                </div>
            </div>
            <div class="input_wrap">
                <div class="input" style="flex: 1;">储值:￥{{ money }}</div>
                <div class="input" v-if="waitPayMoney > 0">待支付:￥{{ waitPayMoney }}</div>
            </div>
            <div class="blance">
                <!-- 可用余额：0.00 -->
            </div>
            <div class="keybord_wrap">
                <div class="left">
                    <div class="item" v-for="item in 9" :key="item" @click="amountInput(`${item}`)">{{ item }}</div>
                    <div class="item" @click="amountInput('.')">.</div>
                    <div class="item" @click="amountInput('0')">0</div>
                    <div class="item" @click="delHandle">
                        <el-icon>
                            <CloseBold />
                        </el-icon>
                    </div>
                </div>
                <div class="pay_btn" v-loading="payLoading" @click="confirmOrder">
                    <span>支</span>
                    <span>付</span>
                </div>
            </div>
        </div>
    </div>
    <scanModal ref="scanModalRef" :amount="props.amount" :orderId="props.orderId" :selecttype="props.selecttype"
        @success="scanCodeSuccess" />
</template>

<script setup>
import { onMounted, ref, computed, watch } from 'vue'
import { queryPayType, accountPay, cashPay } from '@/api/pay'
import { queryMembermember, createMembermember, membermemberScanPay, accountPaymember } from '@/api/member/index.js'
import { useUser } from "@/store/user.js"
import { clearNoNum } from '@/utils'

import scanModal from '@/components/payCard/scanModal.vue'
import { ElMessage } from "element-plus";

const store = useUser()

const props = defineProps({
    amount: {
        type: Number,
        default: 0
    },
    selecttype: {
        type: Number,
        default: 0
    },
    orderId: {
        type: [String, Number],
        default: ''
    }
})

const emit = defineEmits(['paySuccess'])

const money = ref('0')
const scanModalRef = ref(null)

watch(props, (value) => {
    money.value = `${props.amount}`
})

const waitPayMoney = computed(() => {
    let num = JSON.stringify(props.amount - money.value)
    num = Math.floor(num * 100) / 100
    return num
})

const payActive = ref(0)
const payList = ref([])
const payLoading = ref(false)

// 获得扫码值
function scanCodeSuccess() {
    emit('paySuccess')
}

// 切换支付类型
function payTypeChange(index, item) {
    payActive.value = index
    if (item.payType == 'scanCode') {
        scanModalRef.value.show()
    }
}

// 结算支付
async function confirmOrder() {
    try {
        if (payList.value[payActive.value].payType == 'scanCode') {
            scanModalRef.value.show()
        } else {
            if (money.value < props.amount) return
            payLoading.value = true
            switch (payList.value[payActive.value].payType) {
                case 'deposit'://储值卡
                    if (props.selecttype == 1) {

                    } else {
                        await accountPay({
                            orderId: props.orderId,
                            memberId: 1
                        })
                    }
                    break;
                case 'cash'://现金
                    if (props.selecttype == 1) {
                        await accountPaymember({
                            shopId: store.userInfo.shopId,
                            memberId: props.orderId,
                            amount: props.amount
                        })
                    } else {
                        await cashPay({
                            orderId: props.orderId
                        })
                    }
                    break;
                case 'bank'://银行卡
                    if (props.selecttype == 1) {//1  代表会员

                    } else {

                    }
                    break;
                default:
                    break;
            }
            payLoading.value = false
            ElMessage.success('支付成功')
            emit('paySuccess')
        }
    } catch (error) {
        console.log(error)
        payLoading.value = false
        scanModalRef.value.loading = false
    }
}

// 输入
function amountInput(num) {
    if (money.value + num <= props.amount) {
        money.value = clearNoNum({ value: (money.value += num) })
    } else {
        money.value = clearNoNum({ value: `${props.amount}` })
    }
}

// 删除
function delHandle() {
    if (!money.value) return
    money.value = money.value.substring(0, money.value.length - 1)
    if (!money.value) {
        money.value = '0'
    }
}

// 获取支付方式
async function queryPayTypeAjax() {
    try {
        const res = await queryPayType({
            shopId: store.userInfo.shopId
        })
        payList.value = res
        if (res[0].payType == 'scanCode') {
            scanModalRef.value.show()
        }
    } catch (error) {
        console.log(error)
    }
}

onMounted(() => {
    money.value = `${props.amount}`
    queryPayTypeAjax()
})

</script>

<style scoped lang="scss">
.card {
    padding: var(--el-font-size-base);
    height: 100%;
}

.header {
    padding-bottom: var(--el-font-size-base);
    border-bottom: 1px solid #ececec;

    .t1 {
        display: flex;
        color: var(--el-color-danger);
        font-weight: bold;

        .title {
            font-size: var(--el-font-size-base);
            position: relative;
            top: 14px;
        }

        .num {
            font-size: 30px;
        }
    }

    .t2 {
        display: flex;
        gap: var(--el-font-size-base);
        color: #999;
        padding-top: 10px;
    }
}

.number_wrap {
    padding: var(--el-font-size-base) 0;

    .menus {
        display: flex;
        gap: var(--el-font-size-base);

        .item {
            height: 130px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #efefef;
            padding: 10px 0;
            border-radius: 10px;
            position: relative;
            $lineHeight: 4px;

            &.active {
                &::after {
                    content: "";
                    width: 50%;
                    height: $lineHeight;
                    background-color: var(--primary-color);
                    position: absolute;
                    bottom: 0;
                    left: 25%;
                    border-radius: $lineHeight;
                }
            }

            .img {
                $size: 40px;
                width: $size;
                height: $size;
            }

            .title {
                padding-top: 10px;
            }
        }
    }

    .input_wrap {
        display: flex;
        gap: var(--el-font-size-base);
        padding: var(--el-font-size-base) 0;

        .input {
            display: flex;
            align-items: center;
            height: 60px;
            border-radius: 6px;
            border: 1px solid var(--primary-color);
            font-size: calc(var(--el-font-size-base) + 6px);
            padding: 0 var(--el-font-size-base);
        }
    }

    .blance {
        color: var(--el-color-danger);
        font-size: calc(var(--el-font-size-base) + 10px);
    }
}

.keybord_wrap {
    display: flex;

    .left {
        --item-height: calc((100vh - 440px) / 4);
        flex: 1;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: var(--item-height) var(--item-height) var(--item-height) var(--item-height);
        gap: var(--el-font-size-base);

        .item {
            background-color: #efefef;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: calc(var(--el-font-size-base) + 10px);

            &:active {
                background-color: #dbdbdb;
            }
        }
    }

    .pay_btn {
        flex: 0.3;
        border-radius: 6px;
        color: #fff;
        background-color: var(--el-color-warning);
        margin-left: var(--el-font-size-base);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: calc(var(--el-font-size-base) + 10px);
    }
}
</style>