<template>
    <div class="DeviceModel">
        <el-dialog v-model="modelDialogVisible" :title="modelDialogTitle" :width="400" @close="cancelModelForm">
            <el-form ref="modelFormRef" :model="modelForm" :rules="modelFormRules" label-width="110">
                <el-form-item prop="iotModelName" :label="ModelFieldsEnums['iotModelName']">
                    <el-input :disabled="modelDialogState === ModelDialogTitleStateType['detail']" v-model="modelForm.iotModelName"></el-input>
                </el-form-item>
                <el-form-item prop="iotModelCode" :label="ModelFieldsEnums['iotModelCode']">
                    <el-input :disabled="modelDialogState === ModelDialogTitleStateType['detail']" v-model="modelForm.iotModelCode"></el-input>
                </el-form-item>
                <el-form-item prop="objectType" :label="ModelFieldsEnums['objectType']">
                    <el-input :disabled="modelDialogState === ModelDialogTitleStateType['detail']" v-model="modelForm.objectType"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button :disabled="modelDialogState === ModelDialogTitleStateType['detail']" type="primary" @click="submitModelForm"
                    >提交</el-button
                >
                <el-button @click="cancelModelForm">取消</el-button>
            </template>
        </el-dialog>
        <el-container class="containerPart">
            <el-aside class="asidePart">
                <el-header class="asideHeader">
                    <el-input
                        v-model="searchModelValue"
                        :suffix-icon="Search"
                        clearable
                        @input="debounceSearchModel"
                        class="searchModelInput"
                    ></el-input>
                </el-header>
                <el-main class="asideMain">
                    <el-tree
                        :data="treeData"
                        :props="DeviceModelPropReplace"
                        class="modelTree"
                        @node-contextmenu="modelContextMenu"
                        @node-click="modelNodeClick"
                        highlight-current
                    >
                    </el-tree>
                </el-main>
            </el-aside>
            <el-container class="mainContainer">
                <el-header class="mainHeader">
                    <div class="mainHeaderCenter">
                        <el-input class="modelAttributeSearchInput"></el-input>
                        <el-radio-group v-model="modelAttributeSearchRadio">
                            <el-radio value="attributeName">名称</el-radio>
                            <el-radio value="attributeCode">编码</el-radio>
                        </el-radio-group>
                        <el-button :icon="Search" @input="searchModelAttribute">查询</el-button>
                    </div>
                    <div class="mainHeaderRight">
                        <el-button :icon="Plus" @click="addModelAttributeAndService">新增</el-button>
                        <el-button :icon="Upload" @click="upLoadModel">导入</el-button>
                        <el-button :icon="Download" @click="downLoadModel">导出</el-button>
                    </div>
                </el-header>
                <el-main class="mainMain">
                    <el-tabs v-model="ModelTabs" @tab-change="changeTabs" class="tabsPart">
                        <el-tab-pane :label="modelTabsType['attribute']" name="attribute">
                            <el-table :data="attributeTableData" class="tablePart">
                                <el-table-column
                                    prop="attributeName"
                                    :label="ModelAttributeFieldsEnums['attributeName']"
                                    align="center"
                                ></el-table-column>
                                <el-table-column
                                    prop="attributeCode"
                                    :label="ModelAttributeFieldsEnums['attributeCode']"
                                    align="center"
                                ></el-table-column>
                                <el-table-column
                                    prop="attributeTypeName"
                                    :label="ModelAttributeFieldsEnums['attributeTypeName']"
                                    align="center"
                                ></el-table-column>
                                <el-table-column prop="porder" :label="ModelAttributeFieldsEnums['porder']" align="center"></el-table-column>
                                <el-table-column fixed="right" label="操作" min-width="80" align="center">
                                    <template #default="scope">
                                        <div class="tableOperate">
                                            <a @click="editAttributeForm(scope.row)">编辑</a>
                                            <a>|</a>
                                            <el-popconfirm title="确定删除么？" @confirm="delAttributeForm(scope.row)">
                                                <template #reference>
                                                    <a>删除</a>
                                                </template>
                                            </el-popconfirm>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane :label="modelTabsType['service']" name="service">
                            <el-table :data="serviceTableData" class="tablePart">
                                <el-table-column prop="serviceName" :label="ModelServiceFieldsEnums['serviceName']" align="center"></el-table-column>
                                <el-table-column prop="serviceCode" :label="ModelServiceFieldsEnums['serviceCode']" align="center"></el-table-column>
                                <el-table-column
                                    prop="serviceTypeName"
                                    :label="ModelServiceFieldsEnums['serviceTypeName']"
                                    align="center"
                                ></el-table-column>
                                <el-table-column prop="porder" :label="ModelServiceFieldsEnums['porder']" align="center"></el-table-column>
                                <el-table-column fixed="right" label="操作" min-width="80" align="center">
                                    <template #default="scope">
                                        <div class="tableOperate">
                                            <a @click="editServiceForm(scope.row)">编辑</a>
                                            <a>|</a>
                                            <el-popconfirm title="确定删除么？" @confirm="delServiceForm(scope.row)">
                                                <template #reference>
                                                    <a>删除</a>
                                                </template>
                                            </el-popconfirm>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="mainFooter">
                        <el-pagination
                            v-model:current-page="currentPage"
                            v-model:page-size="currentPageSize"
                            :total="pageTotal"
                            :page-sizes="pagePagination"
                            background
                            :pager-count="7"
                            layout="prev, pager, next, jumper,sizes,total"
                        ></el-pagination>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <ContextMenu :pos="contextMenuPos" :visible="modelOperateVisible" @update:visible="closeModelOperate">
            <template #default>
                <div class="modelOperate">
                    <el-button @click="openModel('detail', curContextMenuTreeData)" :icon="Reading">查看</el-button>
                    <el-button @click="openModel('add')" :icon="DocumentAdd">新增</el-button>
                    <el-button @click="openModel('edit', curContextMenuTreeData)" :icon="DocumentChecked">修改</el-button>
                    <el-popconfirm title="确认删除？" @confirm="delModel">
                        <template #reference>
                            <el-button :icon="DocumentDelete" @click.stop>删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
        </ContextMenu>
        <el-dialog v-model="attributeVisible" :title="attributeFormTitle" @close="closeAttributeForm" :width="600">
            <el-form ref="attributeFormRef" :model="attributeForm" label-width="100">
                <el-form-item :label="ModelAttributeFieldsEnums['attributeName']" prop="attributeName">
                    <el-input v-model="attributeForm.attributeName"></el-input>
                </el-form-item>
                <el-form-item :label="ModelAttributeFieldsEnums['attributeCode']" prop="attributeCode">
                    <el-input v-model="attributeForm.attributeCode"></el-input>
                </el-form-item>
                <el-form-item :label="ModelAttributeFieldsEnums['attributeTypeName']" prop="attributeType">
                    <el-select v-model="attributeForm.attributeType">
                        <el-option label="模拟量" :value="138"></el-option>
                        <el-option label="累积量" :value="139"></el-option>
                        <el-option label="离散量" :value="140"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="ModelAttributeFieldsEnums['porder']" prop="porder">
                    <el-input v-model="attributeForm.porder"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="submitAttributeForm">提交</el-button>
                <el-button @click="closeAttributeForm">取消</el-button>
            </template>
        </el-dialog>
        <el-dialog v-model="serviceVisible" :title="serviceFormTitle" @close="closeServiceForm" :width="600">
            <el-form ref="serviceFormRef" :model="serviceForm" label-width="100">
                <el-form-item :label="ModelServiceFieldsEnums['serviceName']" prop="serviceName">
                    <el-input v-model="serviceForm.serviceName"></el-input>
                </el-form-item>
                <el-form-item :label="ModelServiceFieldsEnums['serviceCode']" prop="serviceCode">
                    <el-input v-model="serviceForm.serviceCode"></el-input>
                </el-form-item>
                <el-form-item :label="ModelServiceFieldsEnums['serviceTypeName']" prop="attributeType">
                    <el-select v-model="serviceForm.serviceType">
                        <el-option label="遥调" :value="146"></el-option>
                        <el-option label="遥控" :value="147"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="ModelServiceFieldsEnums['porder']" prop="porder">
                    <el-input v-model="serviceForm.porder"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="submitServiceForm">提交</el-button>
                <el-button @click="closeServiceForm">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import {
    ElContainer,
    ElAside,
    ElHeader,
    ElMain,
    ElTree,
    ElInput,
    ElMessage,
    ElRadioGroup,
    ElRadio,
    ElButton,
    ElTabs,
    ElTabPane,
    ElTable,
    FormInstance,
} from 'element-plus'
import { Reading, DocumentAdd, DocumentChecked, DocumentDelete, Search, Plus, Download, Upload } from '@element-plus/icons-vue'
import {
    ModelFieldsEnums,
    AddModelType,
    UpdateModelType,
    ModelDialogTitleStateType,
    ModelDialogTitleStateValueType,
    ModelDialogTitleStateKeyType,
    radioGroupType,
    modelTabsTypeKeyType,
    modelTabsType,
    AddModelAttributeType,
    UpdateModelAttributeType,
    UpdateModelServiceType,
    AddModelServiceType,
    ModelAttributeFieldsEnums,
    ModelAttributeTableType,
    ModelServiceTableType,
    ModelServiceFieldsEnums,
    AttributeDialogTitleStateType,
    serviceDialogTitleStateType,
} from './type'
import {
    getModelListReq,
    addModelReq,
    updateModelReq,
    delModelReq,
    getModelAttributeListReq,
    addModelAttributeReq,
    updateModelAttributeReq,
    delModelAttributeReq,
    getModelServiceListReq,
    addModelServiceReq,
    updateModelServiceReq,
    delModelServiceReq,
    downloadModelReq,
} from '/@/api/backend/deviceModel/request'
import ContextMenu from './contextMenu.vue'
import { debounce } from 'lodash'

const DeviceModelPropReplace = {
    label: 'iotModelName',
}
const treeData = ref<(AddModelType & UpdateModelType)[]>([])
const originTreeData = ref<(AddModelType & UpdateModelType)[]>([])

const searchModelValue = ref('')
const searchModel = () => {
    if (searchModelValue.value === '') {
        treeData.value = originTreeData.value
        return
    }
    const reg = new RegExp(searchModelValue.value)
    const result = []
    for (let item of originTreeData.value) {
        if (reg.test(item.iotModelName)) {
            result.push(item)
        }
    }
    treeData.value = result
}
const debounceSearchModel = debounce(searchModel, 100)
const modelFormRef = ref<FormInstance>()
const modelDialogVisible = ref(false)
const modelDialogState = ref<ModelDialogTitleStateValueType>(ModelDialogTitleStateType['detail'])
const modelDialogTitle = computed(() => {
    return modelDialogState.value === ModelDialogTitleStateType['detail']
        ? '查看物模型'
        : modelDialogState.value === ModelDialogTitleStateType['edit']
          ? '新增物模型'
          : '编辑物模型'
})
const originModelForm: AddModelType & UpdateModelType = {
    iotModelName: '',
    objectType: null,
    iotModelCode: '',
    revision: 1,
    createdBy: undefined,
    createdTime: undefined,
    updatedBy: undefined,
    updatedTime: undefined,
    id: null,
}
const modelForm = ref<AddModelType & UpdateModelType>(JSON.parse(JSON.stringify(originModelForm)))
const modelFormRules = {
    iotModelName: [{ required: true, message: '请输入物模型名称', trigger: 'blur' }],
    iotModelCode: [{ required: true, message: '请输入物模型编码', trigger: 'blur' }],
    objectType: [{ required: true, message: '请选择物模型类型', trigger: 'blur' }],
}
const submitModelForm = () => {
    if (modelDialogState.value === ModelDialogTitleStateType['add']) {
        addModelReq(modelForm.value)
            .then((res) => {
                if (res.success) {
                    ElMessage.success('新增物模型成功')
                    modelDialogVisible.value = false
                    getModelList()
                } else {
                    ElMessage.error(res.msg)
                }
            })
            .catch((err) => {
                ElMessage.error(err?.response?.data?.msg ?? '新增失败')
            })
    } else if (modelDialogState.value === ModelDialogTitleStateType['edit']) {
        updateModelReq(modelForm.value)
            .then((res) => {
                if (res.success) {
                    ElMessage.success('修改物模型成功')
                    modelDialogVisible.value = false
                    getModelList()
                } else {
                    ElMessage.error(res.msg)
                }
            })
            .catch((err) => {
                ElMessage.error(err?.response?.data?.msg ?? '修改失败')
            })
    }
}
const getModelList = (name?: string) => {
    return new Promise((resolve) => {
        getModelListReq({ iotModelName: name })
            .then((res) => {
                if (res.success) {
                    originTreeData.value = res.data!
                    treeData.value = res.data!
                    resolve(res.data![0])
                } else {
                    ElMessage.error(res.msg)
                }
            })
            .catch((err) => {
                ElMessage.error(err?.response?.data?.msg ?? '查询失败')
            })
    })
}
const cancelModelForm = () => {
    modelForm.value = JSON.parse(JSON.stringify(originModelForm))
    modelFormRef.value?.resetFields()
    modelDialogVisible.value = false
}

const modelOperateVisible = ref(false)
const contextMenuPos = ref({
    x: 0,
    y: 0,
})
const curContextMenuTreeData = ref<AddModelType & UpdateModelType>()
const modelContextMenu = (event: MouseEvent, data: AddModelType & UpdateModelType) => {
    contextMenuPos.value.x = event.pageX
    contextMenuPos.value.y = event.pageY
    curContextMenuTreeData.value = JSON.parse(JSON.stringify(data))
    modelOperateVisible.value = true
}
const closeModelOperate = () => {
    modelOperateVisible.value = false
}
const modelNodeClick = (target: AddModelType & UpdateModelType) => {
    curContextMenuTreeData.value = JSON.parse(JSON.stringify(target))
    if (ModelTabs.value === 'attribute') {
        getAttributeList()
    } else {
        getServiceList()
    }
}
const openModel = (type: ModelDialogTitleStateKeyType, data?: AddModelType & UpdateModelType) => {
    modelDialogState.value = ModelDialogTitleStateType[type]
    if (type !== 'add') {
        modelForm.value = data!
    }
    // modelOperateVisible.value = false
    modelDialogVisible.value = true
}
const delModel = () => {
    delModelReq({ id: curContextMenuTreeData.value!.id! })
        .then((res) => {
            if (res.success) {
                ElMessage.success('删除物模型成功')
                getModelList()
            } else {
                ElMessage.error(res.msg)
            }
        })
        .catch((err) => {
            ElMessage.error(err?.response?.data?.msg ?? '删除失败')
        })
    closeModelOperate()
}

const searchModelAttribute = () => {}

const modelAttributeSearchRadio = ref<radioGroupType>('attributeName')

const ModelTabs = ref<modelTabsTypeKeyType>('attribute')
const changeTabs = (name: any) => {
    if (name === 'attribute') {
        getAttributeList()
    } else {
        getServiceList()
    }
}

const attributeTableData = ref<(AddModelAttributeType & UpdateModelAttributeType)[]>([])
const editAttributeForm = (data: AddModelAttributeType & UpdateModelAttributeType) => {
    attributeFormTitle.value = AttributeDialogTitleStateType['edit']
    attributeForm.value = JSON.parse(JSON.stringify(data))
    attributeVisible.value = true
}
const delAttributeForm = (data: AddModelAttributeType & UpdateModelAttributeType) => {
    delModelAttributeReq({ id: data.id! })
        .then((res) => {
            if (res.success) {
                ElMessage.success('删除物模型属性成功')
                getAttributeList()
            } else {
                ElMessage.error(res.msg)
            }
        })
        .catch((err) => {
            ElMessage.error(err?.response?.data?.msg ?? '删除失败')
        })
}

const getAttributeList = () => {
    getModelAttributeListReq({ iotModelId: curContextMenuTreeData.value!.id! })
        .then((res) => {
            if (res.success) {
                attributeTableData.value = res.data!.map((item) => {
                    return {
                        ...item,
                        attributeTypeName:
                            item.attributeType === 138
                                ? '模拟量'
                                : item.attributeType === 139
                                  ? '累积量'
                                  : item.attributeType === 140
                                    ? '离散量'
                                    : item.attributeType,
                    }
                })

            } else {
                ElMessage.error(res.msg)
            }
        })
        .catch((err) => {
            ElMessage.error(err?.response?.data?.msg ?? '查询失败')
        })
}

const getServiceList = () => {
    getModelServiceListReq({ iotModelId: curContextMenuTreeData.value!.id! })
        .then((res) => {
            if (res.success) {
                serviceTableData.value = res.data!.map((item) => {
                    return {
                        ...item,
                        serviceTypeName: item.serviceType === 146 ? '遥调' : item.serviceType === 147 ? '遥控' : item.serviceType,
                    }
                })
                
            } else {
                ElMessage.error(res.msg)
            }
        })
        .catch((err) => {
            ElMessage.error(err?.response?.data?.msg ?? '查询失败')
        })
}

const serviceTableData = ref<(AddModelServiceType & UpdateModelServiceType)[]>([])

const editServiceForm = (data: AddModelServiceType & UpdateModelServiceType) => {
    serviceFormTitle.value = serviceDialogTitleStateType['edit']
    serviceForm.value = JSON.parse(JSON.stringify(data))
    serviceVisible.value = true
}
const delServiceForm = (data: AddModelServiceType & UpdateModelServiceType) => {
    delModelServiceReq({ id: data.id! })
        .then((res) => {
            if (res.success) {
                ElMessage.success('删除物模型方法成功')
                getServiceList()
            } else {
                ElMessage.error(res.msg)
            }
        })
        .catch((err) => {
            ElMessage.error(err?.response?.data?.msg ?? '删除失败')
        })
}

const attributeVisible = ref(false)
const attributeFormTitle = ref(AttributeDialogTitleStateType['add'])
const originAttributeForm: AddModelAttributeType & UpdateModelAttributeType = {
    id: null,
    iotModelId: '',
    attributeCode: '',
    attributeName: '',
    attributeType: null,
    porder: null,
    revision: 1,
    createdBy: undefined,
    createdTime: undefined,
    updatedBy: undefined,
    updatedTime: undefined,
}
const attributeFormRef = ref<FormInstance>()
const attributeForm = ref<AddModelAttributeType & UpdateModelAttributeType>(JSON.parse(JSON.stringify(originAttributeForm)))

const closeAttributeForm = () => {
    attributeVisible.value = false
    attributeForm.value = JSON.parse(JSON.stringify(originAttributeForm))
    attributeFormRef.value?.resetFields()
}
const submitAttributeForm = () => {
    attributeFormRef.value?.validate((valid) => {
        if (valid) {
            if (attributeFormTitle.value === AttributeDialogTitleStateType['add']) {
                attributeForm.value.iotModelId = curContextMenuTreeData.value!.id!
                addModelAttributeReq(attributeForm.value)
                    .then((res) => {
                        if (res.success) {
                            ElMessage.success('新增物模型属性成功')
                            closeAttributeForm()
                            getAttributeList()
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
                    .catch((err) => {
                        ElMessage.error(err?.response?.data?.msg ?? '新增失败')
                    })
            } else if (attributeFormTitle.value === AttributeDialogTitleStateType['edit']) {
                updateModelAttributeReq(attributeForm.value)
                    .then((res) => {
                        if (res.success) {
                            ElMessage.success('修改物模型属性成功')
                            closeAttributeForm()
                            getAttributeList()
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
                    .catch((err) => {
                        ElMessage.error(err?.response?.data?.msg ?? '修改失败')
                    })
            }
        }
    })
}

const serviceVisible = ref(false)
const serviceFormTitle = ref(serviceDialogTitleStateType['add'])
const originServiceForm: AddModelServiceType & UpdateModelServiceType = {
    id: null,
    iotModelId: '',
    serviceCode: '',
    serviceName: '',
    serviceType: null,
    porder: null,
    revision: 1,
    createdBy: undefined,
    createdTime: undefined,
    updatedBy: undefined,
    updatedTime: undefined,
}
const serviceFormRef = ref<FormInstance>()
const serviceForm = ref<AddModelServiceType & UpdateModelServiceType>(JSON.parse(JSON.stringify(originServiceForm)))
const closeServiceForm = () => {
    serviceVisible.value = false
    serviceForm.value = JSON.parse(JSON.stringify(originServiceForm))
    serviceFormRef.value?.resetFields()
}
const submitServiceForm = () => {
    serviceFormRef.value?.validate((valid) => {
        if (valid) {
            if (serviceFormTitle.value === serviceDialogTitleStateType['add']) {
                serviceForm.value.iotModelId = curContextMenuTreeData.value!.id!
                addModelServiceReq(serviceForm.value)
                    .then((res) => {
                        if (res.success) {
                            ElMessage.success('新增物模型方法成功')
                            closeServiceForm()
                            getServiceList()
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
                    .catch((err) => {
                        ElMessage.error(err?.response?.data?.msg ?? '新增失败')
                    })
            } else if (serviceFormTitle.value === serviceDialogTitleStateType['edit']) {
                updateModelServiceReq(serviceForm.value)
                    .then((res) => {
                        if (res.success) {
                            ElMessage.success('修改物模型方法成功')
                            closeServiceForm()
                            getServiceList()
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
                    .catch((err) => {
                        ElMessage.error(err?.response?.data?.msg ?? '修改失败')
                    })
            }
        }
    })
}

const addModelAttributeAndService = () => {
    if (ModelTabs.value === 'attribute') {
        attributeVisible.value = true
    } else {
        serviceVisible.value = true
    }
}

const upLoadModel = () => {}

const downLoadModel = () => {
    downloadModelReq({ id: curContextMenuTreeData.value!.id! }).then((res: any) => {
        const downloadUrl = window.URL.createObjectURL(res)
        const a = document.createElement('a')
        a.href = downloadUrl
        a.download = '物模型' + new Date().getTime()
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(downloadUrl)
        document.body.removeChild(a)
    })
}

const currentPage = ref(1)
const currentPageSize = ref(10)
const pageTotal = ref(0)
const pagePagination = ref([10, 20, 30])

getModelList().then((res) => {
    curContextMenuTreeData.value = JSON.parse(JSON.stringify(res))
    if (ModelTabs.value === 'attribute') {
        getAttributeList()
    } else {
        getServiceList()
    }
})
</script>

<style lang="scss" scoped>
$headerHeight: 60px;
$defaultBackgroundColor: #fff;
$defaultAsideWidth: 260px;
$paginationHeight: 32px;
.DeviceModel {
    position: relative;
    width: 100%;
    height: 100%;
    .containerPart {
        width: 100%;
        height: 100%;
        .asidePart {
            width: $defaultAsideWidth;
            height: 100%;
            border-right: 1px solid #eaebed;
            .asideHeader {
                display: flex;
                justify-content: center;
                align-items: center;
                .searchModelInput {
                    height: 40px;
                }
            }
            .asideMain {
                height: calc(100% - $headerHeight);
                overflow-y: auto;
                .modelTree {
                    height: 100%;
                    background-color: $defaultBackgroundColor;
                }
            }
        }
        .mainContainer {
            width: calc(100% - $defaultAsideWidth);
            height: 100%;
            .mainHeader {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: $headerHeight;
                padding: 0 20px;
                border-bottom: 1px solid #eaebed;
                .modelAttributeSearchInput {
                    height: 40px;
                    width: 220px;
                }
                .mainHeaderCenter {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 445px;
                }
                .mainHeaderRight {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            }
            .mainMain {
                height: calc(100% - $headerHeight);
                .tabsPart {
                    height: calc(100% - $paginationHeight);
                    :deep(.el-tabs__content) {
                        height: calc(100% - 55px);
                        .el-tab-pane {
                            height: 100%;
                        }
                    }
                    .tablePart {
                        height: 100%;
                    }
                    .tableOperate {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        a {
                            margin: 5px;
                            color: #0064aa;
                            font-weight: 600;
                            &:hover {
                                cursor: pointer;
                            }
                        }
                    }
                }
                .mainFooter {
                    display: flex;
                    justify-content: right;
                    background-color: #fff;
                }
            }
        }
    }
    .modelOperate {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 80px;
        height: 200px;
        .el-button {
            margin: 0;
        }
    }
}
</style>
