<template>
    <div class="edit-popup">
        <el-drawer title="商品详情" :size="1200" v-model="isOpen">
            <el-tabs v-model="activeName" class="demo-tabs">
                <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-column label="状态" show-overflow-tooltip>
                            <template #default="{ row }">
                                <el-switch
                                    size="large"
                                    @change="statusChange(row)"
                                    v-model="row.status"
                                    :active-value="1"
                                    :inactive-value="0"
                                    active-text="上架"
                                    inactive-text="下架"
                                    inline-prompt
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
    </div>
</template>

<script lang="ts" setup name="storeProductDETAILS">
import {
    apiStoreBranchProductAttrValueLists,
    apiStoreBranchProductAttrValueStatus
} from '@/api/store_branch_product_attr_value'
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 sku_lists = ref([])
const isOpen = ref(false)
const activeName = ref('first')

// 表单数据
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>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    apiStoreBranchProductAttrValueLists({
        product_id: data.product_id,
        store_id: data.store_id
    }).then((res) => {
        sku_lists.value = res.lists
    })
}

const statusChange = (row: any) => {
    apiStoreBranchProductAttrValueStatus({
        id: row.id,
        status: row.status
    })
}
//打开弹窗
const open = () => {
    isOpen.value = true
}

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

// 查询条件
const queryParams = reactive({
    product_id: ''
})

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