<!-- 订单管理-我的履约 -->
<template>
    <app-view>
        <template #header>
            <app-filter :options="filterOptons" :loading="loading">
                <template #after>
                    <el-checkbox label="历史" v-model="filterData.history" />
                    <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="YYYYMMDD" v-model="filterData.date" v-if="filterData.history"
                        style="margin-left:12px" />
                </template>
            </app-filter>
        </template>
        <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
            <!-- 重量 -->
            <template #weight="{ value }">
                {{ handleNumberValue(value) }}
            </template>
            <!-- 履约金额 -->
            <template #amount="{ value }">
                {{ handleNumberValue(value) }}
            </template>
            <!-- 已付金额 -->
            <template #paidamount="{ row }">
                {{ buyorsell === BuyOrSell.Buy ? row.buypaidamount : row.sellreceivedamount }}
            </template>
            <!-- 履约剩余冻结 -->
            <template #freezeamountremain="{ row }">
                {{ buyorsell === BuyOrSell.Buy ? row.buyerfreezeamountremain : row.sellerfreezeamountremain }}
            </template>
            <!-- 履约状态 -->
            <template #performancestatus="{ value }">
                {{ getPerformanceStatusName(value) }}
            </template>
            <!-- 履约步骤 -->
            <template #steptypeid="{ value }">
                {{ handleNumberValue(getStepTypeName(value)) }}
            </template>
            <!-- 操作 -->
            <template #operate="{ row }">
                <app-auth-operation type="dropdown" :menus="handleOperateButtons(row)" :options="{ selectedRow: row }"
                    @closed="onRefresh">
                    <template #order_buy_manual>
                        <span>{{ handleManualName(row.steptypeid) }}</span>
                    </template>
                    <template #order_sell_manual>
                        <span>{{ handleManualName(row.steptypeid) }}</span>
                    </template>
                </app-auth-operation>
            </template>
            <template #footer>
                <app-pagination :total="total" v-model:page-size="pageSize" v-model:page-index="pageIndex"
                    @change="onRefresh" />
            </template>
        </app-table>
    </app-view>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { handleNumberValue } from '@/filters'
import { useDataFilter } from '@/hooks/datatable'
import { BuyOrSell, StepType, getStepTypeName, getPerformanceStatusName } from '@/constants/order'
import { usePerformance } from '@/business/order'
import { useComposeTable } from '@pc/components/base/table'
import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
import AppTable from '@pc/components/base/table/index.vue'
import AppPagination from '@pc/components/base/pagination/index.vue'
import AppFilter from '@pc/components/base/table-filter/index.vue'

const route = useRoute()

const buyorsell = (() => {
    switch (route.name) {
        case 'order_buy': {
            return BuyOrSell.Buy
        }
        case 'order_sell': {
            return BuyOrSell.Sell
        }
    }
})()

const { loading, dataList, total, pageIndex, pageSize, filterData, getPerformanceList } = usePerformance(buyorsell)
const { tableColumns } = useComposeTable<Ermcp.MyPerformancRsp>({ rowKey: 'performanceplanid', columnKey: 'order' })
const { filterOptons, getQueryParams } = useDataFilter<Ermcp.MyPerformancReq>()

tableColumns.value.forEach((e) => {
    if (e.prop === 'paidamount') {
        if (buyorsell === BuyOrSell.Buy) {
            e.label = '已付金额'
        } else {
            e.label = '已收金额'
        }
    }
})

const handleOperateButtons = (item: Ermcp.MyPerformancRsp) => {
    if (buyorsell === BuyOrSell.Buy) {
        if ([StepType.Payment, StepType.Pickup, StepType.ConfirmGoods, StepType.ConfirmInvoice].includes(item.steptypeid)) {
            return undefined
        }
    } else {
        if ([StepType.Receive, StepType.SendGoods, StepType.SendInvoice].includes(item.steptypeid)) {
            return undefined
        }
    }
    if (item.performancestatus === 2) {
        return ['order_buy_details', 'order_buy_contracted', 'order_buy_edit', 'order_sell_details', 'order_sell_contracted', 'order_sell_edit']
    }
    return ['order_buy_details', 'order_sell_details']
}

// 处理手动操作菜单
const handleManualName = (steptypeid: number) => {
    switch (steptypeid) {
        case 1:
            return '付款'
        case 2:
            return '收款'
        case 4:
            return '发货'
        case 5:
            return '确认收货'
        case 6:
            return '发票'
        case 7:
            return '确认发票'
        default:
            return '手动'
    }
}

const onSearch = (clear = false) => {
    if (clear) {
        filterData.value.date = []
    }
    getQueryParams((qs) => {
        pageIndex.value = 1
        getPerformanceList(qs)
    }, clear)
}

const onRefresh = () => {
    getQueryParams((qs) => {
        getPerformanceList(qs).catch((err) => ElMessage.error(err))
    })
}

filterOptons.inputList = [
    { label: '商品', keys: ['zsallproperties'] },
]

filterOptons.buttonList = [
    { lable: '重置', onClick: () => onSearch(true) },
    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() }
]

onRefresh()
</script>