<!-- 挂牌大厅-求购大厅-详情-我的摘牌 -->
<template>
    <h3>我的摘牌</h3>
    <app-table :data="dataList" :columns="columns" :show-header="false" selection-type="single" border
        @select="onTableSelect">
        <!-- 价格 -->
        <template #price="{ row }">
            {{ row.zscurrencytypedisplayunit + formatDecimal(row.price) }}
        </template>
        <!-- 克拉单价 -->
        <template #priceper="{ row }">
            {{ row.zscurrencytypedisplayunit + formatDecimal(row.priceper) }}
        </template>
    </app-table>
    <el-form ref="formRef" label-width="80px" :model="formData" :rules="formRules" v-if="dataList.length"
        style="width:460px">
        <el-form-item label="价格(￥)" prop="ApplyPrice">
            <div class="el-form-item--col">
                <el-input type="number" placeholder="请输入" v-model.number="formData.ApplyPrice" />
                <span style="white-space:nowrap;"
                    v-if="selectedGoods && selectedGoods.zscurrencytype !== CurrencyType.CNY">汇率：{{getExrate(selectedGoods.zscurrencytype)}}</span>
            </div>
        </el-form-item>
        <el-form-item label="备注" prop="ApplyRemark">
            <el-input type="textarea" :rows="3" v-model="formData.ApplyRemark" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="loading" @click="onSubmit">摘牌申请</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { ref, PropType } from 'vue'
import Long from 'long'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { formatDecimal } from '@/filters'
import { CurrencyType } from '@/constants/diamond'
import { useSellOrderBargain } from '@/business/trade/desting'
import { useExrateStore } from '@/stores'
import AppTable from '@pc/components/base/table/index.vue'

const props = defineProps({
    selectedRow: {
        type: Object as PropType<Ermcp.BuyOrderRsp>,
        default: () => ({})
    }
})

const { getExrate } = useExrateStore()
const { loading, dataList, columns, formData, formSubmit, getDiamondList } = useSellOrderBargain(props.selectedRow)
const selectedGoods = ref<Ermcp.MyWRPositionRsp>() // 当前选中的商品
const formRef = ref<FormInstance>()

const formRules: FormRules = {
    ApplyPrice: [{ required: true, message: '请输入价格', trigger: 'blur' }],
}

// 勾选表格行
const onTableSelect = (rows: Ermcp.MyWRPositionRsp[]) => {
    const row = rows[0]
    if (row) {
        selectedGoods.value = row
        formData.WRStandardID = row.wrstandardid
        formData.LadingBillID = Long.fromString(row.ladingbillid)
        formData.ApplyQty = row.weight
        formData.SubNum = row.subnum
    } else {
        selectedGoods.value = undefined
        formData.WRStandardID = 0
    }
}

const onSubmit = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            if (formData.WRStandardID) {
                formSubmit().then(() => {
                    ElMessage.success('提交成功')
                    getDiamondList()
                }).catch((err) => {
                    ElMessage.error('提交失败：' + err)
                })
            } else {
                ElMessage.warning('请选择商品')
            }
        }
    })
}

getDiamondList()
</script>