<template>
    <div class="container">
        <Breadcrumb :items="['云商城', '商品详情', data?.name]" />
        <a-card class="goodsdetail">
            <div class="title">
                {{ data?.name }} <a-tag v-if="data?.limit > 0" color="orange" size="large">限购{{ data?.limit }}件</a-tag>
            </div>
            <div class="price">
                ￥ {{ data?.price }}
            </div>
            <div class="num">
                剩余库存：{{ data?.num > 99 ? '充足' : data?.num }}
            </div>

            <a-button class="buy-button" type="primary" size="large" @click="buy">立即购买</a-button>

            <a-divider orientation="center" style="margin-top: 30px;"><span
                    style="font-size: 1.2em;">商品详情</span></a-divider>
            <a-skeleton animation :loading="loading">
                <a-space direction="vertical" :style="{ width: '100%' }" size="large">
                    <a-skeleton-shape />
                    <a-skeleton-line :rows="5" />
                </a-space>
            </a-skeleton>
            <div class="content">
                <div v-html="content"></div>
            </div>
        </a-card>
    </div>

    <!--下单对话框 -->
    <a-modal v-model:visible="visible" title="确认订单" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
        :ok-loading="ok_loading" esc-to-close closable>
        <a-form :model="form">
            <a-form-item field="name" label="商品名称">
                <b>{{ form.name }}</b>
            </a-form-item>
            <a-form-item field="price" label="支付价格">
                <b>￥ {{ form.price }}</b>
            </a-form-item>
            <a-form-item field="pay_type" label="支付方式">
                <a-select v-model="form.pay_type" placeholder="请选择支付方式">
                    <a-option value="alipay"><icon-alipay-circle /> 支付宝</a-option>
                    <!-- <a-option value="qqpay"><icon-qq /> QQ支付</a-option> -->
                    <a-option value="wxpay"><icon-wechatpay /> 微信支付</a-option>
                </a-select>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getGoods } from '@/api/goods'
import { createOrder } from '@/api/order'
import { useRoute, useRouter } from 'vue-router'
import { Notification, Message } from '@arco-design/web-vue'

const route = useRoute()
const router = useRouter()
const { id } = route.params

const loading = ref(true)
const data = ref({})
const content = ref('')

const visible = ref(false)
const form = reactive({
    name: "",
    price: 0,
    pay_type: ''
})

const handleBeforeOk = async (done) => {
    try {
        if (!form.pay_type) {
            Message.error('请选择支付方式！')
            return false
        }

        const res = await createOrder({ goods_id: id, pay_type: form.pay_type })
        if (!res || res.code !== 0) {
            Notification.error({
                title: '创建订单失败！',
                content: res?.msg ?? '请稍后再试'
            })
            return false
        }

        router.push(`/store/orderDetail/${res.id}`)
    } catch (error) {
        Notification.error({
            title: '创建订单失败！',
            content: error.message || '请稍后再试'
        })
        return false
    }
}

const handleCancel = () => {
    visible.value = false;
}

const getGoodsDetail = async () => {
    try {
        loading.value = true
        const res = await getGoods({ id })
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取商品列表失败！',
                content: res?.msg ?? '请稍后再试'
            })
        data.value = res.data
        content.value = decodeURI(atob(res.data.content || ''))
        form.name = data.value.name
        form.price = data.value.price
    } catch (error) {
        Notification.error({
            title: '获取商品列表失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

const buy = () => {
    visible.value = true
}

getGoodsDetail()
</script>

<style lang="less" scoped>
.container {
    padding: 0 20px 20px 20px;
}

.goodsdetail {
    border-radius: 5px;

    .title {
        font-size: 1.8em;
    }

    .price {
        font-size: 2em;
        color: rgb(22, 93, 255);
    }

    .num {
        font-size: 1.1em;
    }

    .buy-button {
        position: relative;
        left: 50%;
        translate: (-50%);
        margin-top: 20px;
    }

    .content {
        padding: 0 20px;
    }
}
</style>