<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import sHeader from "@/components/SimpleHeader";
import { useTradeStore } from '@/stores/trade';
import { uploadImg, buyerConf } from "@/service/buyOrSell";
import { showFailToast, showSuccessToast } from "vant";
import { useRouter } from 'vue-router'


const price = ref(0) // 价格
const tradeNumber = ref(0) // 股票数量
// const sellerUserName = ref('')  // 卖家用户名
const sellerPayeeCode = ref('') // 卖家支付宝
const sellerCardNo = ref('') // 卖家银行卡号
let totalPrice = computed(() => { // 需付款
    return Math.round(price.value * tradeNumber.value * 100) / 100;
})


const tradeStore = useTradeStore()
const router = useRouter()

const orderId = ref('') // 交易单id
const fileList = ref([]);

const afterRead = async (file) => {
    file.status = 'uploading';
    file.message = '上传中...';

    try {
        const formData = new FormData();
        formData.append('file', file.file);
        formData.append('orderId', orderId.value);

        const { data } = await uploadImg(formData);
        if (data.code === "00000") {
            file.status = 'done';
            file.message = '上传成功';

        } else {
            file.status = 'failed';
            file.message = '上传失败';
        }
    } catch (error) {
        file.status = 'failed';
        file.message = '上传失败';
        console.error("上传失败", error);
        if (error.response) {
            console.error("Response Data:", error.response.data);
        }
    }
};


const onSubmit = async () => {
    if (!fileList.value || fileList.value.length === 0) {
        showFailToast('请选择文件');
        return;
    }

    try {
        const { data } = await buyerConf(orderId.value)
        if (data.code === "00000") {
            showSuccessToast('提交成功');
            setTimeout(() => {
                router.go(-1);
            }, 1500);
        } else {
            showFailToast('提交失败')
        }
    } catch (error) {
        console.log("提交失败", error);
    }
};


onMounted(() => {
    if (tradeStore.tradeItem) {
        const item = tradeStore.getTradeItem()
        tradeNumber.value = item.tradeNumber;
        sellerPayeeCode.value = item.sellerPayeeCode;
        sellerCardNo.value = item.sellerCardNo;
        price.value = item.price;
        orderId.value = item.id;
    }
});

// 当组件卸载时清除用户信息
onBeforeUnmount(() => {
    tradeStore.clearTradeItem();
});



</script>

<template>
    <div class="buyConf">
        <s-header :name="'买家付款'" :noback="false"></s-header>

        <!-- 提交 -->
        <van-form @submit="onSubmit">
            <br>
            <!-- 买入数量/单价/总价 -->
            <van-cell-group inset>
                <van-field v-model="orderId" readonly name="交易单号" label="交易单号" placeholder="交易单号"
                type="textarea" autosize left-icon="coupon" />
                <!-- :rules="[{ required: true, message: '单据凭证缺失' }]" -->
                <van-field v-model="tradeNumber" readonly name="买入数量" label="买入数量" placeholder="买入数量"
                    left-icon="goods-collect" :rules="[{ required: true, message: '买入数量不能为空' }]" />
                <van-field v-model="price" readonly name="买入单价" label="买入单价" placeholder="买入单价" left-icon="gold-coin" />
                <van-field v-model="totalPrice" readonly name="需付款￥" label="需付款￥" placeholder="需付款￥" left-icon="bill" />
            </van-cell-group>
            <br>
            <!-- 卖家收款信息 -->
            <van-cell-group inset>
                <van-field v-model="sellerPayeeCode" readonly name="卖家支付宝号" label="卖家支付宝号" placeholder="卖家支付宝号"
                    left-icon="alipay" />
                <!-- :rules="[{ required: true, message: '支付宝号不能为空' }]" -->
                <van-field v-model="sellerCardNo" readonly name="卖家银行卡号" label="卖家银行卡号" placeholder="卖家银行卡号"
                    left-icon="card" />
            </van-cell-group>
            <br>
            <!-- 上传支付宝/银行付款截图 -->
            <van-cell-group inset>
                <van-field name="uploader" label="买家上传付款截图">
                    <template #input>
                        <van-uploader v-model="fileList" :after-read="afterRead" reupload max-count="1">
                            <van-button icon="plus" color="#39a6fe">上传转账截图</van-button>
                        </van-uploader>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<style scoped>
.buyConf {
    background-color: #e3e3e3;
}
</style>