<template>
    <div class="default-main">
        <el-row v-loading="tableStore.table.loading">
            <el-col :span="11">
                <div class="custom-table-header">
                    <div class="title">
                        工程列表
                        <el-input
                            class="ml10"
                            v-model="searchValue"
                            placeholder="请输入工程名称"
                            clearable
                            style="width: 240px"
                            @input="inpChaange"
                        />
                    </div>
                    <el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增工程</el-button>
                </div>
                <Table ref="tableRef" @currentChange="currentChange" />
            </el-col>
            <el-col :span="13">
                <div class="custom-table-header">
                    <div class="title">項目列表</div>

                    <el-button type="primary" icon="el-icon-Plus" @click="add">新增項目</el-button>
                </div>
                <div :style="height">
                    <vxe-table
                        ref="tableRef1"
                        v-bind="defaultAttribute"
                        :data="itemList"
                        height="auto"
                        style="width: 100%"
                    >
                        <vxe-column field="projectName" title="项目名称"></vxe-column>
                        <vxe-column field="projectArea" title="地址"></vxe-column>

                        <vxe-column field="projectRemark" title="备注"></vxe-column>
                        <vxe-column title="拓扑图" width="100px">
                            <template #default="{ row }">
                                <el-image
                                    :hide-on-click-modal="true"
                                    :preview-teleported="true"
                                    v-if="row.topologyInfo"
                                    :preview-src-list="[row.topologyImageUrl]"
                                    :src="row.topologyImageUrl"
                                ></el-image>
                                <span v-else>/</span>
                            </template>
                        </vxe-column>
                        <vxe-column field="projectSort" title="排序" width="80px"></vxe-column>
                        <vxe-column title="操作" width="180px">
                            <template #default="{ row }">
                                <el-button
                                    style="margin-left: 4px"
                                    type="primary"
                                    link
                                    size="small"
                                    @click="itemModification(row)"
                                    class="ml10 mr10"
                                >
                                    编辑
                                </el-button>
                                <el-popconfirm
                                    @confirm="itemeRemove(row)"
                                    title="确定删除吗？"
                                    confirm-button-type="danger"
                                >
                                    <template #reference>
                                        <el-button style="margin-left: 4px" type="danger" size="small" link>
                                            刪除
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
            </el-col>
        </el-row>
        <!-- 新增工程 -->
        <popup ref="popupRef" @save="save" />
        <!-- 新增項目 -->
        <itemAdd ref="itemAddRef" @save="save" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { delTemplate, deleteSysExcel, bandRelation, queryList } from '@/api/harmonic-boot/luckyexcel'
import { deleteProject, deleteEngineering } from '@/api/cs-device-boot/edData'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
import popup from './components/popup.vue'
import itemAdd from './components/itemAdd.vue'
const dictData = useDictData()
defineOptions({
    name: 'govern/manage/engineering'
})
const height = mainHeight(80)
const volConTypeList: any = dictData.getBasicData('Dev_Connect')
import { getFileUrl } from '@/api/system-boot/file'

const popupRef = ref()
const tableRef = ref()
const tableRef1 = ref()
const searchValue = ref('')
const itemList: any = ref([])
const menuListId = ref([])
const itemAddRef = ref()
const engineeringId = ref('')
const tableList = ref([])
const tableStore: any = new TableStore({
    url: '/cs-device-boot/engineeringProjectRelation/list',
    method: 'POST',
    publicHeight: 60,
    showPage: false,
    column: [
        { field: 'engineeringName', title: '工程名称' },
        {
            field: 'engineeringAreaName',
            title: '区域'
        },
        {
            field: 'engineeringRemark',
            title: '备注'
        },
        {
            field: 'engineeringSort',
            title: '排序',
            width: '80px'
        },
        {
            title: '操作',
            fixed: 'right',
            width: '150',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        popupRef.value.open('编辑工程', row)
                    }
                },

                {
                    name: 'del',
                    text: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除？'
                    },
                    click: row => {
                        deleteEngineering({ id: row.engineeringId }).then(res => {
                            engineeringId.value = ''
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],

    loadCallback: () => {
        tableList.value = JSON.parse(JSON.stringify(tableStore.table.data))
        setTableRow()
    }
})

provide('tableStore', tableStore)
// 过滤
const inpChaange = (val: any) => {
    engineeringId.value = ''
    if (val == '') {
        tableStore.table.data = tableList.value
    } else {
        tableStore.table.data = tableList.value.filter((item: any) => item.engineeringName.includes(val))
    }
    setTableRow()
}
const setTableRow = () => {
    if (engineeringId.value == '') {
        engineeringId.value = tableStore.table.data[0].engineeringId
    }
    let list = tableStore.table.data.filter((item: any) => item.engineeringId == engineeringId.value)
    tableRef.value.getRef().setCurrentRow(list[0] ?? {})
    itemList.value = list?.[0]?.projectInfoList ?? []
    if (itemList.value.length > 0) {
        itemList.value.forEach((item: any) => {
            item.topologyImageUrl = getUrl(item)
        })
    }
}
// 修改模版
const itemModification = (row: any) => {
    itemAddRef.value.open('新增项目', tableStore.table.data, row, engineeringId.value)
}
// 删除模版
const itemeRemove = (row: any) => {
    deleteProject({ id: row.projectId }).then(res => {
        ElMessage.success('删除成功')
        tableStore.index()
    })
}

const addRole = () => {
    // add()
    popupRef.value.open('新增工程')
}
const add = () => {
    itemAddRef.value.open('新增项目', tableStore.table.data)
}
// 查询绑定模版
const currentChange = (data: any) => {
    engineeringId.value = data.row.engineeringId
    itemList.value = data.row.projectInfoList
    if (itemList.value.length > 0) {
        itemList.value.forEach((item: any) => {
            item.topologyImageUrl = getUrl(item)
        })
    }
}
// 保存模版
const save = () => {
    bandRelation({
        modelIds: tableRef1.value.getCheckboxRecords().map(item => item.id),
        id: menuListId.value
    })
        .then(() => {
            ElMessage.success('操作成功!')
        })
        .catch(() => {})
}
const imgList = ref([])
// 获取拓扑图
const getUrl = async (row: any) => {
    if (!row.topologyInfo || row.topologyInfo === '/') return ''

    const res = await getFileUrl({ filePath: row.topologyInfo })
    row.topologyImageUrl = res.data
    return res.data
}

onMounted(() => {
    tableStore.index()
})
</script>
<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
.el-image {
    height: 36px;
}
</style>
