<template>
    <div class="default-main">
        <TableHeader>
            <template v-slot:select>
                <el-form-item label="项目名称">
                    <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" clearable
                        placeholder="请输入项目名称"></el-input>
                </el-form-item>
            </template>
            <template v-slot:operation>
                <el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
            </template>
        </TableHeader>
        <!-- <Table ref="tableRef" /> -->
        <div v-if="tableStore.table.data.length != 0" style="overflow-x: hidden; overflow-y: scroll; padding: 0 10px"
            v-loading="tableStore.table.loading" :style="{ height: tableStore.table.height }">
            <el-row :gutter="12">
                <el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
                    <el-card class="box-card" @click="querdata(item)" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span style="display: flex; align-items: center">
                                {{ item.name }}

                                <el-tooltip class="item" effect="dark" content="修改项目" placement="top"
                                    v-if="hasAdmin || item.createBy == adminInfo.id">
                                    <Edit style="margin-left: 5px; width: 16px" class="xiaoshou color"
                                        @click="editd(item)" />
                                </el-tooltip>
                            </span>
                            <div style="height: 32px">
                                <div style="display: flex; justify-content: end"
                                    v-if="hasAdmin || item.createBy == adminInfo.id">
                                    <!-- <el-button
                                        class="color"
                                        icon="el-icon-Promotion"
                                        style="padding: 3px 0"
                                        type="text"
                                        v-if="bindId != item.id"
                                        @click="activate(item)"
                                    >
                                        绑定
                                    </el-button> -->
                                    <el-button class="color" icon="el-icon-Share" style="padding: 3px 0" type="text"
                                        @click="Aclick(item)">
                                        设计
                                    </el-button>
                                    <!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green"
                                    type="text" @click="shejid(item)">设计</el-button> -->
                                    <!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text"
                                    @click="shejid(item)">编辑</el-button> -->
                                    <el-button icon="el-icon-Delete" style="padding: 3px 0; color: red" type="text"
                                        @click="deleted(item)">
                                        删除
                                    </el-button>
                                </div>
                            </div>
                        </div>
                        <img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou"
                            @click="imgData(item)" />
                        <el-empty v-else description="暂无设计" style="height: 220px" />
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-empty v-else description="暂无数据" :style="{ height: tableStore.table.height }" />

        <div class="table-pagination">
            <el-pagination :currentPage="tableStore.table.params!.pageNum"
                :page-size="tableStore.table.params!.pageSize" :page-sizes="[10, 20, 50, 100]" background
                :layout="'sizes,total, ->, prev, pager, next, jumper'" :total="tableStore.table.total"
                @size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
        </div>
        <popup ref="popupRef" @submit="tableStore.index()" />
    </div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
// import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
import { ElMessage, ElMessageBox } from 'element-plus'
import { audit, add, savePageIdWithUser, getByUserId } from '@/api/cs-harmonic-boot/mxgraph'
import { Edit } from '@element-plus/icons-vue'
import popup from './components/popup.vue'
import { useAdminInfo } from '@/stores/adminInfo'
const VITE_FLAG = import.meta.env.VITE_NAME == 'ypt'

defineOptions({
    name: 'mxgraph/graph-list'
})
const adminInfo = useAdminInfo()

const hasAdmin =
    adminInfo.roleCode.some(item => item.includes('operation_manager') || item.includes('root')) ||
    adminInfo.userType == 1
const tableRef = ref()
const popupRef = ref()
let DOMIN = window.location.origin

let STATIC_URL = DOMIN + '/api/system-boot/file/download?filePath='
localStorage.setItem('STATIC_URL', STATIC_URL)
const tableStore = new TableStore({
    showPage: false,
    url: '/cs-harmonic-boot/csconfiguration/queryPage',
    method: 'POST',
    publicHeight: 60,
    column: [],
    loadCallback: () => { }
})
provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
tableStore.table.params.currentUserId = adminInfo.id
// let aa=['operation_manager',]
tableStore.table.params.roleCode = adminInfo.roleCode.join(',')
onMounted(() => {
    tableStore.table.ref = tableRef.value
    getBindId()
    tableStore.index()
    tableStore.table.loading = false
})
// 查询
const onSubmitadd = () => {
    popupRef.value.open({
        title: '新增项目'
    })
}
const bindId = ref('')
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
                }
            })
        })
        .catch(() => { })
}
const getBindId = () => {
    getByUserId({ userId: adminInfo.id }).then(res => {
        bindId.value = res.data.pageId
    })
}
const querdata = (e: any) => { }
const editd = (e: any) => {
    popupRef.value.open({
        title: '修改项目',
        row: e
    })
}
// 设计
const Aclick = (e: any) => {
    //window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=zl`)
    window.open(
        window.location.origin +
        `/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=${VITE_FLAG ? 'ypt' : 'zl'}`
    )
}
// 删除
const deleted = (e: any) => {
    ElMessageBox.confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            let data = {
                id: e.id,
                name: e.name,
                status: '0'
            }
            audit(data).then((res: any) => {
                if (res.code == 'A0000') {
                    ElMessage({
                        type: 'success',
                        message: '删除项目成功!'
                    })
                }
                tableStore.index()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            })
        })
}

const imgData = (e: any) => {
    window.open(
        window.location.origin +
        `/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=${VITE_FLAG ? 'ypt' : 'zl'}#/preview_${VITE_FLAG ? 'YPT' : 'ZL'
        }`
    )
    //  window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=zl#/preview_ZL`)
}

const onTableSizeChange = (val: number) => {
    tableStore.onTableAction('page-size-change', { size: val })
}

const onTableCurrentChange = (val: number) => {
    tableStore.onTableAction('current-page-change', { page: val })
}
</script>
<style lang="scss" scoped>
.text {
    font-size: 14px;
}

span {
    font-size: 16px;
}

.item {
    margin-bottom: 18px;
}

.image {
    display: block;
    width: 100%;
    height: 220px;
}

.clearfix::before,
.clearfix::after {
    display: table;
    content: '';
}

.clearfix::after {
    clear: both;
}

.box-card {
    width: 100%;
    // border: 1px solid #000;
    box-shadow: var(--el-box-shadow-light);
}

.xiaoshou {
    cursor: pointer;
}

.setstyle {
    min-height: 200px;
    padding: 0 !important;
    margin: 0;
    overflow: auto;
    cursor: default !important;
}

.color {
    color: var(--el-color-primary);
}

:deep(.el-select-dropdown__wrap) {
    max-height: 300px;
}

:deep(.el-tree) {
    padding-top: 15px;
    padding-left: 10px;

    // 不可全选样式
    .el-tree-node {
        .is-leaf+.el-checkbox .el-checkbox__inner {
            display: inline-block;
        }

        .el-checkbox .el-checkbox__inner {
            display: none;
        }
    }
}

:deep(.el-card__header) {
    padding: 13px 20px;
    height: 44px;
}

.table-pagination {
    height: 58px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    padding: 13px 15px;
    border-left: 1px solid #e4e7e9;
    border-right: 1px solid #e4e7e9;
    border-bottom: 1px solid #e4e7e9;
}

:deep(.el-pagination__sizes) {
    .el-select {
        min-width: 128px;
    }
}
</style>
