<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import sHeader from "@/components/SimpleHeader";
import { useTradeStore } from '@/stores/trade';
import { uploadImg } from "@/service/buyOrSell";
import { showFailToast, showSuccessToast } from "vant";
import { useRouter } from 'vue-router'
// const value = ref([
//     { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
// ]);

const certificate = ref('SsfOS75GxUGjGk') // 买家用户名
const price = ref(80.02) // 价格
const tradeNumber = ref(2000) // 股票数量
// const sellerUserName = ref('')  // 卖家用户名
const sellerPayeeCode = ref('13045678901') // 卖家支付宝
const sellerCardNo = ref('642343275134234203470') // 卖家银行卡号
const totalPrice = ref(0)
const orderId = ref('') // 交易单id

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

const imgFile = ref()

const onSubmit = async () => {
    const params = {
        file: imgFile.value,
        orderId: orderId.value
    }
    const { data } = await uploadImg(params)
    if (data.code === '00000') {
        showSuccessToast('成功')
        router.go(-1)
    } else {
        showFailToast(data.message)
    }
}



onMounted(() => {
    if (tradeStore.tradeItem) {
        orderId.value = tradeStore.tradeItem.id;
        totalPrice.value = tradeStore.tradeItem.totalPrice;
        const item = tradeStore.getTradeItem()
        console.log("item >>>", item);
        console.log("看看有没有 >>>", tradeStore.tradeItem);
    }
});

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

totalPrice.value = price.value * tradeNumber.value;


const fileList = ref([
    // {
    //     url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
    //     status: 'uploading',
    //     message: '上传中...',
    // },
    // {
    //     url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',
    //     status: 'failed',
    //     message: '上传失败',
    // },
    // { url: 'https://cloud-image', isImage: true },
    {
        // url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        status: 'done',
        message: '上传完成',
    }
]);

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

//     setTimeout(() => {
//         file.status = 'failed';
//         file.message = '上传失败';
//     }, 2000);
// };

const afterRead = async (file) => {
    // 将文件上传至服务器
    // const { data } = await uploadImg(
    //     // file,OrderId
    //   );
    imgFile.value = file
    console.log("上传文件", file);
}

</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="certificate" readonly name="单据凭证" label="单据凭证" placeholder="单据凭证"
                    left-icon="coupon" />
                <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" :rules="[{ required: true, message: '卖家银行卡号不能为空' }]" />
            </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>