<script setup>
import { ref, onMounted } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { showConfirmDialog, showFailToast, showSuccessToast } from 'vant';
import { addPendOrder, queryAllowPendNum } from "@/service/trading";

const sellNum = ref('100');
const unitPrice = ref('10');
const allowMaximum = ref(0);
const active = ref(0);

// watch(() => user.allowMaximum, (newMax) => {
//     if (newMax) {
//         allowMaximum.value = user.allowMaximum;
//     }
// }, { immediate: true })// 立即执行一次watch函数，以便在组件创建时设置

onMounted(async () => {
    try {
        const { data } = await queryAllowPendNum();
        if (data.code === "00000") {
            allowMaximum.value = data.data.allowSellNum
            // console.log("允许出售的份额 >>>", allowMaximum.value);
        }
    } catch (error) {
        console.error("请求出错", error);
    }
})

const onSubmitSell = async (values) => {
    try {
        const result = await queryAllowPendNum();
        if (result.data.code === "00000") {
            allowMaximum.value = result.data.data.allowSellNum;
            console.log("允许挂单份额 >>>", allowMaximum.value);
        }

        // 等待用户确认对话框
        const confirmation = await showConfirmDialog({
            title: '提醒',
            message: '挂单后不可撤回',
        });
        // 这里的代码将在确认对话框确定后执行
        if (confirmation) {
            console.log('submitSell', values);
            const entrustNumber = parseInt(sellNum.value, 10);
            const price = parseFloat(unitPrice.value);
            console.log("数量+价格", entrustNumber, price);
            const params = {
                entrustNumber: entrustNumber,
                price: price,
                type: '2' // 1, 买; 2, 卖.
            }
            const { data } = await addPendOrder(params);
            if (data.code === '00000') {
                console.log("data.data >>>", data.data);
                showSuccessToast("卖出挂单成功")
            } else {
                showFailToast(data.message);
            }
        } else {
            // 用户取消了对话框
            console.log('用户取消了挂单操作');
        }

    } catch (error) {
        // 如果用户取消了对话框，则在这里处理
        console.log('Confirm dialog cancelled');
    }
};


</script>

<template>
    <div class="tradingSell flex-col">
        <div class="tradingSellBox">
            <s-header :name="'股票交易'" :noback="false" :isFixed="false"></s-header>

            <div style="height: 200px;">
                <van-tabs v-model:active="active" animated>
                    <van-tab><template #title> <van-icon name="points" />卖出股票 </template>
                        <van-form @submit="onSubmitSell" style="margin: 10px;">
                            <van-cell-group inset>
                                <van-field name="卖出量" label="卖出量" placeholder="卖出量"
                                    :rules="[{ required: true, message: '请填写卖出量' }]">
                                    <template #input>
                                        <van-stepper v-model="sellNum" step="100" input-width="70px" integer min='0'
                                            :max="allowMaximum" />
                                    </template>
                                </van-field>

                                <van-field name="单价￥" label="单价￥" placeholder="每股单价,小数点后两位有效"
                                    :rules="[{ required: true, message: '请填写单价' }]">
                                    <template #input>
                                        <van-stepper v-model="unitPrice" step="0.01" input-width="70px"
                                            :decimal-length="2" />
                                    </template>
                                </van-field>
                            </van-cell-group>

                            <div style="margin: 20px;">
                                <van-button round block type="success" native-type="submit">
                                    提交
                                </van-button>
                            </div>
                        </van-form>

                    </van-tab>
                </van-tabs>
            </div>

        </div>
    </div>
</template>

<style scoped></style>