<template>
    <base-dialog :title="prop.title" width="60%" :visible="prop.visible" :autoHeight="false" @open="handleOpen"
        @handleConfirm="handleConfirm" @close="handleClose">
        <div class="body">
            <el-form :model="prop.form" label-width="120px">
                <el-form-item label="大屏标题">
                    <el-input v-model="prop.form.title" placeholder="大屏" />
                </el-form-item>
                <el-form-item label="大屏路径">
                    <el-input v-model="prop.form.path" placeholder="" />
                </el-form-item>
                <el-form-item label="大屏地址">
                    <el-input v-model="prop.form.url" placeholder="网页路径" />
                </el-form-item>
                <el-form-item label="大屏图片">
                    <ImageUpload v-model="prop.form.img" :limit="1" :fileSize="1" />
                </el-form-item>
                <el-form-item label="大屏类型">
                    <el-select v-model="form.screenType">
                        <el-option v-for="dict in screen_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="prop.form.remark" placeholder="备注" />
                </el-form-item>
                <el-form-item label="是否发布">
                    <el-switch v-model="prop.form.releases" size="large" style="margin-left: 24px" inline-prompt
                        :active-icon="Check" :inactive-icon="Close" />
                </el-form-item>
            </el-form>
        </div>
    </base-dialog>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
import { uploadAvatar } from "@/api/system/user";
import { getToken } from '@/utils/auth'
import { addScreen, updateScreen } from '@/api/big/screen'
import ImageUpload from '@/components/ImageUpload/index.vue'


const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
const prop = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '提示',
    },
    type: {
        type: String,
        default: 'add',
    },
    form: {
        type: Object,
        default: {
            title: undefined,
            url: undefined,
            img: undefined,
            releases: false,
            path: undefined,
        },
    }
})
const { proxy: ctx } = getCurrentInstance()
const { screen_type } = ctx.useDict("screen_type");
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const uploadRef = ref(null)
const onExceed = (files, uploadFiles) => {
    uploadRef.value.clearFiles()
    nextTick(() => {
        uploadRef.value.handleStart(files[0])
    })
}

const handleClose = () => {
    //baseFormRef.value.reset()
    emit('closeDialog')
    emit('refreshTable')
}
// 弹窗弹出
const handleOpen = () => {
    // getAddFormOptions()
}


// 刷新表格事件
const emit = defineEmits(['refreshTable', 'closeDialog'])
// 添加/修改
async function addDeductionInfo() {
    //增加
    if (prop.type == 'add') {
        let { code, msg } = await addScreen(prop.form)
        ctx.$message({
            type: code === 200 ? 'success' : 'warning',
            message: msg,
        })
        if (code === 200) {
            // 刷新表格
            emit('refreshTable')
            emit('closeDialog')
        }
    } else { //修改
        let { code, msg } = await updateScreen(prop.form)
        ctx.$message({
            type: code === 200 ? 'success' : 'warning',
            message: msg,
        })
        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>