<template>
    <div class="edit-popup">
        <el-drawer title="商品详情" :size="1200" v-model="isOpen">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="基础信息" name="first">
                    <el-descriptions class="margin-top" :column="2" border>
                        <el-descriptions-item label="商品名称">
                            {{ formData.store_name }}
                        </el-descriptions-item>
                        <el-descriptions-item label="商品分类">{{
                            formData.cate_name
                        }}</el-descriptions-item>
                        <el-descriptions-item label="商品图片" :span="2">
                            <el-image
                                :src="formData.image"
                                class="w-20 h-20"
                                :preview-teleported="true"
                            />
                        </el-descriptions-item>
                        <el-descriptions-item label="厂家备注" :span="2">
                            <div style="white-space: pre">
                                {{ formData.manufacturer_information }}
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-table :data="sku_lists" border class="mt-4">
                        <el-table-column label="规格名称" prop="sku_name" min-width="150" />
                        <el-table-column label="单位" prop="unit_name" />
                        <el-table-column label="供货价" prop="purchase" show-overflow-tooltip />
                        <el-table-column label="商户价" prop="cost" show-overflow-tooltip />
                        <el-table-column label="零售价" prop="price" show-overflow-tooltip />
                        <el-table-column label="商品销量" prop="sales" show-overflow-tooltip />
                        <el-table-column label="商品库存" prop="stock" show-overflow-tooltip />
                        <el-table-column label="条码" prop="bar_code" show-overflow-tooltip />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="适用门店" name="second">
                    <el-table :data="pager.lists" border>
                        <el-table-column
                            label="门店名称"
                            prop="system_store_name"
                            min-width="200"
                        />
                        <el-table-column
                            label="商品图"
                            prop="image"
                            width="80"
                            show-overflow-tooltip
                        >
                            <template #default="{ row }">
                                <el-image
                                    :src="row.image"
                                    class="w-[50px] h-[50px]"
                                    :preview-teleported="true"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" prop="store_name" min-width="150" />
                        <el-table-column label="商品库存" prop="stock" show-overflow-tooltip />
                        <el-table-column label="商品价格" prop="price" show-overflow-tooltip />
                        <el-table-column label="商品销量" prop="sales" show-overflow-tooltip />
                    </el-table>
                    <div class="flex mt-4 justify-end" v-if="pager.count > pager.lists.length">
                        <pagination v-model="pager" @change="getLists" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="仓库" name="warehouse">
                    <el-table :data="warehouseProductList">
                        <el-table-column label="仓库" prop="warehouse_name" min-width="150" />
                        <el-table-column
                            label="商品图"
                            prop="image"
                            width="80"
                            show-overflow-tooltip
                        >
                            <template #default="{ row }">
                                <el-image
                                    :src="row.image"
                                    class="w-[50px] h-[50px]"
                                    :preview-teleported="true"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" prop="store_name" min-width="150" />
                        <el-table-column label="商品库存" prop="nums" show-overflow-tooltip />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
    </div>
</template>

<script lang="ts" setup name="storeProductDETAILS">
import { usePaging } from '@/hooks/usePaging'
import { ElMessage, type FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiStoreProductAttrValueLists } from '@/api/store_product_attr_value'
import { timeFormat } from '@/utils/util'
import { apiSourceProductStoreLists } from '@/api/system_store'
import { apiWarehouseProductStoregeLists } from '@/api/warehouse_product_storege'
import type { PropType } from 'vue'
import feedback from '@/utils/feedback'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const sku_lists = ref([])
const isOpen = ref(false)
const activeName = ref('first')
const handleClick = (tab: any) => {
    if (tab.paneName == 'second') getLists()
    if (tab.paneName == 'warehouse') getWarehouseProductList()
}

// 表单数据
const formData = reactive({
    id: '',
    image: '',
    store_name: '',
    bar_code: '',
    cate_id: '',
    cate_name: '',
    price: '',
    unit: '',
    unit_name: '',
    stock: '',
    cost: '',
    purchase: '',
    rose: '0',
    manufacturer_information: ''
})

// 获取详情
const setFormData = async (data: Record<any, any>) => {
    queryParams.product_id = data.id
    if (activeName.value == 'second') getLists()
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    apiStoreProductAttrValueLists({ product_id: data.id }).then((res) => {
        sku_lists.value = res.lists
    })
}

//打开弹窗
const open = () => {
    isOpen.value = true
}

// 关闭回调
const handleClose = () => {
    emit('close')
}

// 查询条件
const queryParams = reactive({
    product_id: ''
})
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiSourceProductStoreLists,
    params: queryParams
})

const warehouseProductList = ref([])
const getWarehouseProductList = () => {
    apiWarehouseProductStoregeLists(queryParams).then((res) => {
        warehouseProductList.value = res.lists
    })
}

defineExpose({
    open,
    setFormData
})
</script>
