<template>
    <el-dialog draggable class="cn-operate-dialog" width="540px" v-model.trim="dialogVisible" :title="title">
        <div style="height: 300px;overflow-y: auto;">
            <el-form :inline="false" ref="formRef" :model="form" label-width="auto" class="form-one" :rules="rules">
                <el-form-item label="项目名称" prop="name">
                    <el-input maxlength="50" show-word-limit v-model.trim="form.name" placeholder="请输入项目名称" />
                </el-form-item>
                <el-form-item label="所属工程" prop="engineeringId">
                    <el-select v-model="form.engineeringId" filterable placeholder="请选择工程" clearable>
                        <el-option v-for="item in engineeringList" :key="item.engineeringId"
                            :label="item.engineeringName" :value="item.engineeringId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="区域" prop="area">
                    <el-input maxlength="32" show-word-limit v-model="form.area" clearable placeholder="例: 南京市江宁区蓝霞路201号" />
                </el-form-item>
                <el-form-item label="备注" prop="description">
                    <el-input maxlength="300" show-word-limit v-model="form.description" :rows="2" type="textarea"
                        clearable placeholder="请输入备注" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model.number="form.sort" style="width: 100%;" :min="0" />
                </el-form-item>
                <el-form-item label="拓扑图">
                    <div class="image-radio-group">
                        <div class="image-radio-item" v-for="item in images" :key="item.id"
                            @click="handleSelect(item.id)">
                            <el-radio :label="item.id" v-model="form.topoIds" class="hidden-radio">
                                {{ item.name }}
                            </el-radio>
                            <div class="image-container" :class="{ selected: form.topoIds === item.id }">
                                <img :src="item.url" v-if="item.url" class="image-preview" />
                                <div v-else style="width: 110px; height: 70px; text-align: center; line-height: 70px">
                                    暂无图片
                                </div>
                                <div class="image-overlay" v-if="form.topoIds === item.id">
                                    <el-icon class="check-icon">
                                        <Check />
                                    </el-icon>
                                </div>
                            </div>
                            <div class="image-name">{{ item.name }}</div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import { ElMessage } from 'element-plus'
import { add, update } from '@/api/user-boot/role'
import { useAdminInfo } from '@/stores/adminInfo'
import { addProject, updateProjects } from '@/api/cs-device-boot/edData'
import { getTopoTemplate } from '@/api/cs-device-boot/topologyTemplate'
import { Check } from '@element-plus/icons-vue'
import { downLoadFile } from '@/api/cs-system-boot/manage'
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
const loading = ref(false)
// do not use same name with ref
const form = reactive({
    name: '',
    id: '',
    engineeringId: '',
    area: '',
    sort: 100,
    description: '',
    topoIds: ''
})
const engineeringList: any = ref([])

const rules = {
    name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    area: [{ required: true, message: '请输入区域', trigger: 'blur' }],
    engineeringId: [{ required: true, message: '请输入工程', trigger: 'blur' }],
    description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增菜单')
const formRef = ref()
const props = {
    label: 'text',
    value: 'value',
    children: 'children'
    // checkStrictly: true
}
const open = (text: string, List: any, data?: anyObj, id?: string) => {
    getImageList().catch(() => { })
    formRef.value?.resetFields()
    title.value = text
    dialogVisible.value = true
    engineeringList.value = List
    if (data) {
        form.id = data.projectId
        form.name = data.projectName
        form.area = data.projectArea
        form.description = data.projectRemark
        form.sort = data.projectSort
        form.engineeringId = id || ''
        form.topoIds = data.topologyInfoId || ''
    } else {
        form.id = ''
        form.name = ''
        form.area = ''
        form.description = ''
        form.engineeringId = id || ''
        form.topoIds = ''
        form.sort = 100
    }
}
const submit = async () => {
    if (form.topoIds == '') {
        return ElMessage.warning('请选择拓扑图!')
    }
    formRef.value.validate(async valid => {
        if (valid) {
            loading.value = true
            if (form.id) {
                await updateProjects({ ...form, topoIds: [form.topoIds] })
            } else {
                await addProject({ ...form, topoIds: [form.topoIds] })
            }
            ElMessage.success('保存成功')
            tableStore.index()
            dialogVisible.value = false
            loading.value = false
        }
    })
}
const images: any = ref([])
const getImageList = async () => {
    getTopoTemplate().then(res => {
        images.value = res.data
        images.value.forEach(async item => {
            const blob = (await downLoadFile(item.filePath)) as unknown as Blob
            if (blob?.type && blob.type !== 'application/json') {
                item.url = window.URL.createObjectURL(blob)
            }
        })
    })
}

const handleSelect = (filePath: any) => {
    if (form.topoIds == filePath) {
        form.topoIds = ''
    } else {
        form.topoIds = filePath
    }
}
defineExpose({ open })
</script>
<style scoped>
.image-radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.image-radio-item {
    cursor: pointer;
    text-align: center;
}

.hidden-radio {
    display: none;
}

.image-container {
    position: relative;

    border: 2px solid #dcdfe6;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.image-container:hover {
    border-color: var(--el-color-primary);
}

.image-container.selected {
    border-color: var(--el-color-primary);
    /* box-shadow: 0 0 8px rgba(64, 158, 255, 0.3); */
}

.image-preview {
    width: 110px;
    height: 70px;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(64, 158, 255, 0.1); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-icon {
    color: var(--el-color-primary);
    font-size: 24px;
}

.image-name {
    margin-top: 8px;
    font-size: 14px;
    width: 110px;
    white-space: nowrap;
    /* 强制文字单行显示，不换行 */
    overflow: hidden;
    /* 隐藏超出容器的文字 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号（点点点） */
}
</style>
