<!-- 预售大厅-我的预售-我的申请 -->
<template>
    <app-drawer title="我的申请" :width="960" v-model:show="show">
        <app-table :data="dataList" :columns="columns" :show-toolbar="false" :loading="loading" border>
            <!-- 状态 -->
            <template #applystatus="{ value }">
                {{ getInOutApplyStatusName(value) }}
            </template>
            <!-- 操作 -->
            <template #operate="{ row }">
                <el-dropdown trigger="click">
                    <el-button size="small" icon="MoreFilled" round />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="showComponent('details', row)">详情</el-dropdown-item>
                            <el-dropdown-item @click="showComponent('add', row)"
                                v-if="row.applystatus === 3">重新申请</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
            <template #footer>
                <app-pagination :total="total" v-model:page-size="pageSize" v-model:page-index="pageIndex" @change="run" />
            </template>
        </app-table>
        <component :is="componentMap.get(componentId)" v-bind="{ selectedRow }" @closed="closeComponent"
            v-if="componentId" />
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, defineAsyncComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { getInOutApplyStatusName } from '@/constants/presale'
import { useComponent } from '@/hooks/component'
import { useRequest } from '@/hooks/request'
import { queryGZWrPreSaleApply } from '@/services/api/presale'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTable from '@pc/components/base/table/index.vue'
import AppPagination from '@pc/components/base/pagination/index.vue'

const componentMap = new Map<string, unknown>([
    ['details', defineAsyncComponent(() => import('./details.vue'))], // 申请详情
    ['add', defineAsyncComponent(() => import('../add/index.vue'))] // 预售申请
])

const show = shallowRef(true)
const selectedRow = shallowRef<Ermcp.GZWrPreSaleApplyRsp>() // 当前选择的申请明细

const { componentId, openComponent, closeComponent } = useComponent(() => {
    pageIndex.value = 1
    run()
})

const { loading, dataList, total, pageIndex, pageSize, run } = useRequest(queryGZWrPreSaleApply, {
    params: {
        pagesize: 10,
        marketid: 63201,
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const columns: Ermcp.TableColumn[] = [
    { prop: 'wrstandardname', label: '商品' },
    { prop: 'presaleqty', label: '预售数量(克拉)' },
    { prop: 'unitprice', label: '预售单价(元/克拉)', width: 140 },
    { prop: 'startdate', label: '开始日期' },
    { prop: 'enddate', label: '结束日期' },
    { prop: 'applystatus', label: '状态' },
    { prop: 'applytime', label: '申请时间' },
    { prop: 'operate', label: '操作', fixed: 'right' },
]

const showComponent = (name: string, item: Ermcp.GZWrPreSaleApplyRsp) => {
    selectedRow.value = item
    openComponent(name)
}
</script>