<template>
    <nut-popup
        position="bottom"
        closeable
        round
        safe-area-inset-bottom
        :close-on-click-overlay="false"
        :style="{ height: 'auto' }"
        v-model:visible="isShowPay"
        @click-close-icon="closePay"
    >
        <view class="div">
            <view style="text-align: center">支付方式</view>
            <nut-cell-group>
                <nut-cell
                    v-if="payType === 'wx'"
                    title="微信支付"
                    desc="使用微信快捷支付"
                    is-link
                    @click="goPay()"
                >
                    <template v-slot:icon>
                        <IconFont
                            size="30"
                            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
                        />
                    </template>
                </nut-cell>
                <nut-cell
                    v-if="payType === 'jf'"
                    title="积分支付"
                    desc="剩余积分:18888"
                    is-link
                    @click="goPay()"
                >
                    <template v-slot:icon>
                        <IconFont
                            size="30"
                            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
                        />
                    </template>
                </nut-cell>
            </nut-cell-group>
        </view>
    </nut-popup>
</template>

<script setup lang="ts">
import {IconFont} from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import {payOrder} from "../api/user";

const prop = defineProps({
    isShowPay: {
        required: true,
        type: Boolean,
        default: false,
    },
    payType: {
        required: true,
        type: String,
        default: "wx",
    },
});

const emit = defineEmits(["errPay", "closePay"]);

const goPay = async () => {
    if (prop.payType === "wx") {
        const {data} = await payOrder({gid: 1, token: Taro.getStorageSync("token")});
        console.log(data);
        // Taro.request({
        //     url: "http://192.168.2.3:9000/app/order/place",
        //     method: "POST",
        //     data: {
        //         gid: 1,
        //         token: Taro.getStorageSync("token"),
        //     },
        //     success: function ({data}) {
        //         console.log(data);
        //         Taro.requestPayment({
        //             timeStamp: data.data.data.timeStamp,
        //             nonceStr: data.data.data.nonceStr,
        //             package: data.data.data.package,
        //             signType: "MD5",
        //             paySign: data.data.data.paySign,
        //             success: function (res) {
        //                 console.log(res);
        //             },
        //             fail: function (res) {
        //                 console.log("1111", res);
        //                 emit("errPay", false);
        //             },
        //         });
        //     },
        //     fail: function (res) {
        //         console.log("1111", res);
        //         emit("errPay", false);
        //     },
        // });
    }
};

const closePay = () => {
    emit("closePay", false);
};
</script>

<style lang="scss">
.nut-popup {
    .nut-popup__container {
        border-radius: 10px;
    }
}

.div {
    padding: 20px;
    // text-align: center;

    .nut-cell {
        align-items: center;
    }
}
</style>
