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

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

// const certificate = ref('') // 凭证图片

const price = ref(0) // 价格
const tradeNumber = ref(0) // 股票数量
let totalPrice = computed(() => { // 应收款
    return Math.round(price.value * tradeNumber.value * 100) / 100;
})

const orderId = ref('') // 交易单号id

let imgUrl = ref('')

const getImgFunc = async (e) => {
    try {
        const imageUrl = await getImg(e);
        imgUrl.value = imageUrl; // 假设imgUrl是一个Vue响应式变量
    } catch (error) {
        // 处理错误，例如显示一个消息给用户
        showFailToast('未找到买家付款截图');
    }
}

// 预览图片的方法
const previewImage = () => {
    showImagePreview({
        images: [
            imgUrl.value
        ],
        // startPosition: 0, // 指定图片初始位置
        closeable: true, // 展示关闭按钮
    })
};

const onSubmit = async () => {
    try {
        const { data } = await sellerConf(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()
        console.log("item >>>", item);

        // certificate.value = item.certificate;
        tradeNumber.value = item.tradeNumber;
        price.value = item.price;
        orderId.value = item.id;
    }
    getImgFunc(orderId.value)
});

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

</script>

<template>
    <div class="sellConf">
        <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" />
                <!-- <van-field v-model="certificate" readonly name="单据凭证" label="单据凭证" placeholder="单据凭证"
                type="textarea" autosize 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 name="uploader" label="买家的付款截图">
                    <template #input>
                        <van-image width="100" height="100" :src="imgUrl" @click="previewImage" />
                    </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>
.sellConf {
    background-color: #e3e3e3;
}
</style>