<template>
    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
        <app-view class="g-form">
            <template #header>
                <app-navbar title="供求挂牌" @back="closed" />
            </template>
            <Form ref="formRef" class="g-form__container" @submit="formSubmit">
                <CellGroup inset>
                    <Field label="商品">
                        <template #input>
                            {{ selectedRow.wrstandardname }}
                        </template>
                    </Field>
                    <Field label="仓库">
                        <template #input>
                            {{ selectedRow.warehousename }}
                        </template>
                    </Field>
                    <Field label="参考价格">
                        <template #input>
                            {{ selectedRow.spotgoodsprice }}
                        </template>
                    </Field>
                    <Field name="Price" label="挂牌价格" v-model="formData.FixedPrice" placeholder="请输入挂牌价格"
                        :rules="formRules.FixedPrice" />
                    <Field label="可用数量">
                        <template #input>
                            {{ selectedRow.enableqty }}
                        </template>
                    </Field>
                    <Field name="Qty" label="挂牌数量" v-model="formData.OrderQty" placeholder="请输入挂牌数量"
                        :rules="formRules.OrderQty" />

                    <Field label="货款金额">
                        <template #input>
                            {{ amount }}
                        </template>
                    </Field>
                </CellGroup>
            </Form>
            <template #footer>
                <div class="g-form__footer">
                    <Button type="primary" round block @click="formRef?.submit()">卖出</Button>
                </div>
            </template>
        </app-view>
    </app-modal>
</template>


<script lang="ts" setup>
import { shallowRef, PropType } from 'vue'
import { CellGroup, Button, Field, Form, FormInstance, FieldRule, showFailToast } from 'vant'
import { useHdWROrder } from "@/business/trade"
import { fullloading, dialog } from '@/utils/vant'
import Long from 'long'
import AppModal from '@/components/base/modal/index.vue'

const props = defineProps({
    selectedRow: {
        type: Object as PropType<Model.HoldLBRsp>,
        required: true
    }
})

const formRef = shallowRef<FormInstance>()
const showModal = shallowRef(true)
const refresh = shallowRef(false) // 是否刷新父组件数据
const { wrstandardid, subnum, deliverygoodsid, ladingbillid = '0', wrfactortypeid = '0' } = props.selectedRow ?? {}
const { formData, listingSubmit, amount } = useHdWROrder()

formData.WRStandardID = wrstandardid
formData.DeliveryGoodsID = deliverygoodsid
formData.LadingBillId = Long.fromString(ladingbillid)
formData.WRFactorTypeId = Long.fromString(wrfactortypeid)
formData.SubNum = subnum

// 表单验证规则
const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
    FixedPrice: [{
        required: true,
        message: '请输入挂牌价格',
    }],
    OrderQty: [{
        required: true,
        message: '请输入挂牌数量',
    }],
}

const formSubmit = () => {
    fullloading((hideLoading) => {
        listingSubmit().then(() => {
            hideLoading()
            dialog('挂牌提交成功。').then(() => {
                closed(true)
            })
        }).catch((err) => {
            showFailToast(err)
        })
    })
}

// 关闭弹窗
const closed = (isRefresh = false) => {
    refresh.value = isRefresh
    showModal.value = false
}

// 暴露组件属性给父组件调用
defineExpose({
    closed,
})
</script>