<template>
    <el-dialog v-model="showVisiable" :title="title" width="30%" :before-close="handleClose">
        <el-form ref="formRef" :rules="rules" :model="formData" status-icon label-position="left" label-width="120px">
            <el-form-item label="BOM编码" prop="bomCode">
                <el-input v-model="formData.bomCode" />
            </el-form-item>
            <el-form-item label="型号" prop="model">
                <el-input v-model="formData.model" />
            </el-form-item>
            <el-form-item label="商品货品名称" prop="productName">
                <el-input v-model="formData.productName" />
            </el-form-item>
            <el-form-item label="设计图片" prop="designUrl">
                <el-upload :action="uploadPath" :limit="1" :show-file-list="false" :headers="headers"
                    :on-success="uploadCdUrl" list-type="picture" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
                    <img v-if="formData.designUrl" :src="formData.designUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="产品图片" prop="url">
                <el-upload :action="uploadPath" :limit="1" :show-file-list="false" :headers="headers"
                    :on-success="uploadUrl" list-type="picture" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
                    <img v-if="formData.url" :src="formData.url" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleAdd">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue'
import { uploadPath } from "@/services/api/storage";

let emits = defineEmits(['clickAdd', 'clickEdit'])
let showVisiable = ref(false)
let formRef = ref()
let title = ref('添加规格属性')
let rules = ref({
    bomCode: { required: true, message: '', trigger: 'blur' },
    model: { required: true, message: '', trigger: 'blur' },
    productName: { required: true, message: '', trigger: 'blur' },
    url: { required: true, message: '产品图片不为空', trigger: ['blur', 'change'] },
    designUrl: { required: true, message: '设计图片不为空', trigger: ['blur', 'change'] }
})
let formData = ref({
    bomCode: '',
    model: '',
    productName: '',
    url: '',
    designUrl: ''
})

let headers = computed(() => {
    return { Authorization: sessionStorage.getItem("token") };
});

let uploadUrl = (res: any) => {
    formData.value.url = res.data.url;
}

let uploadCdUrl = (res: any) => {
    formData.value.designUrl = res.data.url;
}

let handleAdd = () => {
    formRef.value?.validate((valid: boolean) => {
        if (valid) {
            if (title.value === '添加规格属性') {
                showVisiable.value = false
                emits('clickAdd', formData.value)
            } else {
                showVisiable.value = false
                emits('clickEdit', formData.value)
            }
        }
    })
}

let handleClose = () => {
    formData.value = {
        bomCode: '',
        model: '',
        productName: '',
        url: '',
        designUrl: ''
    }
    showVisiable.value = false
}
defineExpose({
    showVisiable,
    formData,
    title,
    handleClose
})
</script>
 
<style lang = "scss" scoped>
</style>