<template>
    <app-drawer :title="code === 'warehousing_stock_sell' ? '商品上架' : '添加商品'" :width="960" v-model:show="show"
        :loading="formRef?.loading" :refresh="refresh">
        <el-tabs v-model="componentId">
            <template v-for="(item, index) in categoryList" :key="index">
                <el-tab-pane :label="item.label" :name="Category[item.value]" />
            </template>
        </el-tabs>
        <component ref="formRef" :is="componentMap.get(componentId)" v-bind="{ code, selectedRow }" @cancel="onCancel"
            v-if="componentId" />
        <template #footer>
            <el-button @click="onCancel(false)" plain>取消</el-button>
            <el-button type="primary" @click="formRef?.submit">提交</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, defineAsyncComponent, PropType } from 'vue'
import { Category } from '@/constants/diamond'
import AppDrawer from '@pc/components/base/drawer/index.vue'

defineProps({
    code: String,
    selectedRow: {
        type: Object as PropType<Ermcp.GoodsRsp>,
        default: () => ({})
    }
})

const componentMap = new Map<string, unknown>([
    ['Diamonds', defineAsyncComponent(() => import('./diamonds.vue'))],
    ['Diamond', defineAsyncComponent(() => import('./diamond.vue'))],
    ['Rough', defineAsyncComponent(() => import('./rough.vue'))],
    ['Jewelry', defineAsyncComponent(() => import('./jewelry.vue'))],
    ['Fancy', defineAsyncComponent(() => import('./fancy.vue'))],
])

const formRef = shallowRef()
const show = shallowRef(true)
const refresh = shallowRef(false)
const componentId = shallowRef(Category[Category.Diamond])

const categoryList = [
    { label: '单颗裸钻', value: Category.Diamond },
    { label: '单颗彩钻', value: Category.Fancy },
    { label: '钻石首饰', value: Category.Jewelry }
]

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