
<template>
    <base-dialog :title="prop.title" width="60%" :visible="prop.visible" :autoHeight="false" @open="handleOpen"
        @handleConfirm="handleConfirm" @close="handleClose">
        <div class="body">
            <el-form ref="formRef" :model="prop.form" label-width="120px" :rules="rule">
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="prop.form.name" placeholder="设备名称" />
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-select v-model="prop.form.typeId" filterable placeholder="选择设备类型">
                        <el-option value="" label="请选择"></el-option>
                        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="机架号">
                    <el-input v-model="prop.form.label" placeholder="机架号" />
                </el-form-item>
                <el-form-item label="所属部门">
                    <el-select v-model="prop.form.deptId" filterable placeholder="选择所属部门">
                        <el-option value="" label="请选择"></el-option>
                        <el-option v-for="item in deptList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属网关">
                    <el-select v-model="prop.form.parentId" filterable placeholder="选择所属网关">
                        <el-option value="" label="请选择"></el-option>
                        <el-option v-for="item in getwayList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否在展区">
                    <el-radio-group v-model="prop.form.isExhibition" class="ml-4">
                        <el-radio label="是" size="large">是</el-radio>
                        <el-radio label="否" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="型号">
                    <el-input v-model="prop.form.model" placeholder="型号" />
                </el-form-item>
                <el-form-item label="图片">
                    <ImageUpload v-model="prop.form.image" :limit="1" />
                </el-form-item>
            </el-form>
        </div>
    </base-dialog>
</template>

<script setup>
import { ref, watch, getCurrentInstance,computed } from 'vue'
import { addDevice, updateDevice } from '@/api/big/device'
import ImageUpload from '@/components/ImageUpload/index.vue'
import useDeviceStore from '@/store/modules/device'
const store = useDeviceStore()


const prop = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '提示',
    },
    type: {
        type: String,
        default: 'add',
    },
    form: {
        type: Object,
        default: {
            name: String,
            typeId: String,
            label: String,
            deptId: String,
            parentId: String,
            isExhibition: String,
            model: String,
            image:String
        },
    }
})

const formRef = ref(null)
const rule = {
    name: [
        { required: true, message: '请输入设备名称', trigger: 'blur' },
    ]
}
const { proxy: ctx } = getCurrentInstance()
const getwayList = computed(() => store.getwayList)
const typeList = computed(() => store.typeList)
const deptList = computed(() => store.deptList)
const handleClose = () => {
    //baseFormRef.value.reset()
    emit('closeDialog')
    emit('refreshTable')
}



// 弹窗弹出
const handleOpen = () => {
    // getAddFormOptions()
}



// 刷新表格事件
const emit = defineEmits(['refreshTable', 'closeDialog'])
// 添加/修改
async function addDeductionInfo() {
    if (!formRef.value) return
    let isValid = false
    await formRef.value.validate((valid, fields) => {
        if (valid) {
            isValid = true
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
            isValid = false
        }
    })
    if (!isValid) return
    //增加
    if (prop.type == 'add') {
        let { code, msg } = await addDevice(prop.form)
        ctx.$message({
            type: code === 200 ? 'success' : 'warning',
            message: code === 200 ? '添加成功' : '添加失败',
        })
        if (code === 200) {
            // 刷新表格
            emit('refreshTable')
            emit('closeDialog')
        }
    } else { //修改
        let { code, msg } = await updateDevice(prop.form)
        ctx.$message({
            type: code === 200 ? 'success' : 'warning',
            message: code === 200 ? '修改成功' : '修改失败',
        })
        if (code === 200) {
            // 刷新表格
            emit('refreshTable')
            emit('closeDialog')
        }
    }


}
// 点击确定
const handleConfirm = () => {
    addDeductionInfo()
}



</script>
   
<style lang="scss" scoped>
.body {
    height: 100%;
}

.img-preview {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
}
</style>