<!-- 查询管理-仓单类订单查询-委托单查询-详情 -->
<template>
    <app-drawer :title="t('query.warehouse_receipt_order.order.details.title')" width="960" v-model:show="show">
        <app-table-details :title="t('common.baseinfo')" :data="data?.wrTradeOrderDetail" :label-width="180"
            :cell-props="detailProps1" :column="2" />
        <app-table-details :title="t('query.warehouse_receipt_order.order.details.subtitle1')"
            :data="data?.wrTradeOrderDetail" :label-width="180" :cell-props="detailProps2" :column="2"
            v-if="data?.wrTradeOrderDetail.wrtradetype === 1">
            <app-table :data="data.wrTradeGoodsConfigs" :columns="tableColumns"
                v-if="data.wrTradeOrderDetail.wrpricetype == 2" />
        </app-table-details>
        <!-- <app-table-details title="对手信息" :data="data?.wrTradeOrderDetail" :label-width="180" :cell-props="detailProps1"
            :column="2" v-if="data?.wrTradeOrderDetail.isspecified === 1" /> -->
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { formatDate } from '@/filters'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { tradeOrderView } from '@/services/api/order'
import { CellProp } from '@pc/components/base/table-details/types'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTable from '@pc/components/base/table/index.vue'
import AppTableDetails from '@pc/components/base/table-details/index.vue'
import { i18n } from '@/stores'

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

const { global: { t } } = i18n
const show = shallowRef(true)
const refresh = shallowRef(false)

const buyOrSellEnum = useEnum('buyOrSell') // 方向
const wrtradetype2Enum = useEnum('wrtradetype2') // 委托类型
const wrTradeOrderStatusEnum = useEnum('WRTradeOrderStatus') // 状态

const { data } = useRequest(tradeOrderView, {
    params: {
        ishis: props.record.ishis,
        wrtradeorderid: props.record.wrtradeorderid
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const detailProps1 = computed<CellProp[]>(() => {
    const { userName, wrFactorTypeName, wrstandardname, marketName } = data.value ?? {}
    return [
        { prop: 'tradedate', label: 'query.warehouse_receipt_order.order.details.tradedate' },
        { prop: 'wrtradeorderid', label: 'query.warehouse_receipt_order.order.details.wrtradeorderid', formatValue: () => props.record.wrtradeorderid },
        { prop: 'userName', label: 'query.warehouse_receipt_order.order.details.userName', formatValue: () => userName },
        { prop: 'accountid', label: 'query.warehouse_receipt_order.order.details.accountid' },
        { prop: 'wrtradetype', label: 'query.warehouse_receipt_order.order.details.wrtradetype', formatValue: (val) => wrtradetype2Enum.getEnumTypeName(val) },
        { prop: 'buyorsell', label: 'query.warehouse_receipt_order.order.details.buyorsell', formatValue: (val) => buyOrSellEnum.getEnumTypeName(val) },
        { prop: 'isspecified', label: 'query.warehouse_receipt_order.order.details.isspecified' },
        { prop: 'wrstandardname', label: 'query.warehouse_receipt_order.order.details.wrstandardname', formatValue: () => wrstandardname },
        { prop: 'wrFactorTypeName', label: 'query.warehouse_receipt_order.order.details.wrFactorTypeName', formatValue: () => wrFactorTypeName },
        { prop: 'marketName', label: 'query.warehouse_receipt_order.order.details.marketName', formatValue: () => marketName },
        { prop: 'orderqty', label: 'query.warehouse_receipt_order.order.details.orderqty' },
        { prop: 'tradeqty', label: 'query.warehouse_receipt_order.order.details.tradeqty' },
        { prop: 'wrtradeorderstatus', label: 'query.warehouse_receipt_order.order.details.wrtradeorderstatus', formatValue: (val) => wrTradeOrderStatusEnum.getEnumTypeName(val) },
        { prop: 'ordertime', label: 'query.warehouse_receipt_order.order.details.ordertime', formatValue: (val) => formatDate(val) },
        { prop: 'attachment1', label: 'query.warehouse_receipt_order.order.details.attachment1' },
        { prop: 'attachment2', label: 'query.warehouse_receipt_order.order.details.attachment2' },
        { prop: 'remark', label: 'query.warehouse_receipt_order.order.details.remark' },
    ]
})

const detailProps2 = computed(() => {
    const { goodsUnitName, isyijia, wrTradeOrderDetail } = data.value ?? {}
    const result: CellProp[] = [
        { prop: 'goodsUnitName', label: 'query.warehouse_receipt_order.order.details.goodsUnitName', formatValue: () => goodsUnitName && `元/${goodsUnitName}` },
        { prop: 'canbargain', label: 'query.warehouse_receipt_order.order.details.canbargain', show: !!isyijia },
        { prop: 'wrpricetype', label: 'query.warehouse_receipt_order.order.details.wrpricetype' },
        { prop: 'fixedprice', label: 'query.warehouse_receipt_order.order.details.fixedprice', show: wrTradeOrderDetail?.wrpricetype === 1 },
    ]
    if (wrTradeOrderDetail?.wrpricetype == 2 && wrTradeOrderDetail?.wrtradetype === 1) {
        result.push(
            { prop: 'pricedisplaymode', label: 'query.warehouse_receipt_order.order.details.pricedisplaymode' },
            { prop: 'pricemove', label: 'query.warehouse_receipt_order.order.details.pricemove' },
            { prop: 'pricefactor', label: 'query.warehouse_receipt_order.order.details.pricefactor' },
        )
    }
    return result
})

const tableColumns = shallowRef<Model.TableColumn[]>([
    { field: 'goodscode', label: 'query.warehouse_receipt_order.order.details.goodscode' },
    { field: 'pricefactor', label: 'query.warehouse_receipt_order.order.details.pricefactor1' },
    { field: 'weightratio', label: 'query.warehouse_receipt_order.order.details.weightratio' },
    { field: 'pricemove', label: 'query.warehouse_receipt_order.order.details.pricemove1' },
])

const onCancel = (isRefresh = false) => {
    show.value = false
    refresh.value = isRefresh
}
</script>