<template>
    <el-dialog
        class="cn-operate-dialog"
        width="1200px"
        append-to-body
        v-model.trim="dialogVisible"
        title="绑定"
    >
        <el-form ref="formRef" label-width="80px" class="form">
            <el-form-item label="项目名称">
                <el-input maxlength="32" show-word-limit 
                    
                    
                    clearable
                    style="width: 240px"
                    v-model.trim="searchValue"
                    placeholder="请输入项目名称"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="info" icon="el-icon-Search">查询</el-button>
            </el-form-item>
        </el-form>
        <div style="height: calc(60vh - 120px); overflow-y: auto" v-loading="loading">
            <el-row :gutter="10" style="width: 100%; margin: auto">
                <el-col :span="6" v-for="item in list" :key="item.id" class="mt10">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix mb10">
                            <span style="display: flex; align-items: center;justify-content: space-between;">
                                {{ item.name }}

                                <!-- <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="绑定实时数据"
                                    placement="top"
                                    v-if="bindId != item.id"
                                >
                                    <Sort
                                        style="margin-left: 5px; width: 16px"
                                        class="xiaoshou color"
                                        @click="activate(item)"
                                    />
                                </el-tooltip> -->
                                <el-button type="primary"   v-if="bindId != item.id" @click="activate(item)" icon="el-icon-Sort" link>绑定</el-button>
                            </span>
                        </div>
                        <img v-if="item.fileContent" :src="item.fileContent" class="image" />
                        <el-empty v-else description="暂无设计" style="height: 220px" />
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { coFqueryPage, getByUserId, savePageIdWithUser } from '@/api/cs-harmonic-boot/mxgraph'
import { useAdminInfo } from '@/stores/adminInfo'
import { Sort } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const adminInfo = useAdminInfo()
const emit = defineEmits(['bindClick'])
const dialogVisible = ref(false)
const searchValue = ref('')
const bindId = ref('')
const list = ref([])
const loading = ref(false)
const open = (text: string, data: anyObj) => {
    searchValue.value = ''
    list.value = []
    info()
    dialogVisible.value = true
}
const info = () => {
    loading.value = true
    getBindId()
    coFqueryPage({
        currentUserId: adminInfo.id,
        roleCode: adminInfo.roleCode.join(','),
        searchValue: searchValue.value,
        pageNum: 1,
        pageSize: 1000
    })
        .then(res => {
            list.value = res.data.records
            loading.value = false
        })
        .catch(err => {
            loading.value = false
        })
}
const getBindId = () => {
    getByUserId({ userId: adminInfo.id }).then(res => {
        bindId.value = res.data.pageId
    })
}
const activate = (e: any) => {
    ElMessageBox.confirm('是否绑定页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            savePageIdWithUser({ pageId: e.id, userId: adminInfo.id }).then(res => {
                if (res.code == 'A0000') {
                    ElMessage({
                        type: 'success',
                        message: '操作成功'
                    })
                    bindId.value = e.id
                    emit('bindClick', bindId.value)
                }
            })
        })
        .catch(() => {})
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.form {
    display: flex;
    justify-content: space-between;
    height: 35px;
}
.image {
    display: block;
    width: 100%;
    height: 220px;
}
.xiaoshou {
    cursor: pointer;
}
.color {
    color: var(--el-color-primary);
}
.box-card {
    width: 100%;
    // border: 1px solid #000;
    box-shadow: var(--el-box-shadow-light);
}
:deep(.el-card__body) {
    padding: 10px;
}
</style>
