<template>
    <div id="deviceList">
        <el-row>
            <el-tabs @tab-click="tabsClick" v-model="tabVal">
                <el-tab-pane v-for="t in partsTypeList" :key="t.code" :name="t.code" :label="`${t.name}(${t.count ? t.count : 0})`"></el-tab-pane>
            </el-tabs>
        </el-row>
        <el-row class="left">
            <!-- <div style="width:200px;display:inline-block;text-align:left;color:gray;">
        <span>隐藏自动填充的信息</span>
        <el-checkbox v-model="allMess" @change="getTableHeader"></el-checkbox>
      </div> -->
            <el-button size="small" type="default" icon="el-icon-back" @click="goback" style="margin-right: 10px"></el-button>
            <el-select v-model="showType" @change="initTable" style="width: 100px; margin-right: 10px; vertical-align: bottom">
                <el-option v-for="item in showTypes" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <el-button @click="handleCreateTableData">添加部件</el-button>
            <el-button @click="getTableHeader">刷新</el-button>
            <el-button v-show="!onlyRead" @click="undo">撤销</el-button>
            <div style="float: right; overflow: hidden">
                <span style="width: 20px; float: left; display: block; height: 20px; cursor: pointer" @click="changeAssetsFalg">
                    <i v-show="!onlyRead" class="el-icon-fa el-icon-fa-compass"></i>
                </span>
                <span>当前筛选条件下共{{ page.total || "--" }}部件</span>
            </div>
        </el-row>
        <div class="tableBox">
            <div class="center middle_sty" v-show="tableData && !tableData.length">
                <p>
                    <i class="icon-wushuju iconfont"></i>
                    暂无数据
                </p>
            </div>
            <div class="tableLeft" v-show="tableData && tableData.length">
                <handson-table ref="table"></handson-table>
            </div>
        </div>
        <el-pagination
            class="right"
            v-show="tableData && tableData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNumber"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
        ></el-pagination>
        <!-- 二维码弹窗 -->
        <qrcode :dialog="myDialog" :qrcodeUrl="qrcodeUrl" :addBody="true" ref="qrcode"></qrcode>
        <upload-files-dialog :read="onlyRead ? true : false" ref="upload" @changeFile="fileChange" :keysArr="filesArr" :dialog="myDialog">
        </upload-files-dialog>
        <upload-img-dialog :read="onlyRead ? true : false" @changeFile="imgChange" :keysArr="imgsArr" :dialog="myDialog"></upload-img-dialog>
        <pic-dialog :read="onlyRead ? true : false" :dialog="myDialog" :keysArr="picsArr" @change="changePics"></pic-dialog>
        <details-dialog :iframeSrc="iframeSrc" v-if="myDialog.details" :dialog="myDialog"></details-dialog>
        <!-- 关联资产 -->
        <change-rea @changeProperty="changeProperty" :dialog="myDialog" :category="deviceType"></change-rea>
        <!-- 多选枚举类型维护 -->
        <menum :dialog="myDialog" :updateInfoData="updateInfoData" :updateInput="updateInput" @change="handleChangeMenum"></menum>
        <!-- 不支持的输入方式 -->
        <el-dialog title="临时维护信息点" :visible.sync="myDialog.update" @close="handleCloseUpdate" width="670px">
            <el-row>
                该信息点未定义对应组件，现在维护数据不确定后续是否可用。如确实需要维护，请点击
                <el-link @click="updateInputShow = true" type="primary" :underline="false">继续维护</el-link>
                。
            </el-row>
            <el-row style="margin-top: 20px" v-show="updateInputShow">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" placeholder="请输入内容" v-model="updateInput"></el-input>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="myDialog.update = false">取 消</el-button>
                <el-button type="primary" @click="handleClickUpdate">确 认</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import tools from "@/utils/scan/tools";
import handsonUtils from "@/utils/hasontableUtils";
import showTools from "@/utils/handsontable/notShow";
import text from "@/utils/handsontable/mainText";

import handsonTable from "@/components/common/handsontable";
import {
    getPartsAllType,
    // getDataDictionary,
    getEquipPartsCon,
    updateParts,
    deleteParts,
    getEquipBelongs,
} from "@/api/scan/request";
import { getDataDictionary } from "@/api/dict";

import { mapGetters, mapActions } from "vuex";

import qrcode from "@/components/ledger/lib/qrcode";
import uploadFilesDialog from "@/components/dialogs/list/filesDialog";
import uploadImgDialog from "@/components/dialogs/list/uploadImgDialog";
import picDialog from "@/components/dialogs/list/picDialog";
import changeRea from "@/components/dialogs/changeRea";
import menum from "@/components/dialogs/list/menum";

export default {
    components: {
        qrcode, //二维码页面
        uploadFilesDialog,
        uploadImgDialog,
        picDialog,
        handsonTable,
        changeRea,
        menum,
    },
    data() {
        return {
            shaftId: "", //要操作的部件id
            isTableRightShow: false,
            spaceList: "",
            onlyRead: false,
            showTypes: [
                // { value: "partInfo", label: '隐藏信息点' },
                { value: "Visible", label: "只看采集信息" },
                { value: "all", label: "全部" },
            ],
            showType: "Visible",
            tableHeader: [],
            page: {
                pageSize: 50,
                pageSizes: [10, 20, 50, 100],
                pageNumber: 1,
                total: 0,
            },
            tableData: [],
            copyTableData: [],
            inputMap: {
                flowBuild: {
                    editable: true,
                    code: "flowBuild",
                    name: "建筑楼层",
                    path: "flowBuild",
                    category: "STATIC",
                    dataType: "ENUM",
                },
            }, //信息点和输入方式映射表
            updateInputShow: false, //是否显示临时维护输入框
            updateInfoData: {}, //当前信息点信息
            updateInfoPoint: "", //临时维护信息点
            updateInput: "", //临时维护信息点值
            tableExample: null,
            tabVal: "",
            activeTab: {}, //当前tab页index
            partsTypeList: [], //tabs
            myDialog: {
                qrcode: false, //二维码弹窗
                uploadFiles: false, //上传文件
                uploadImgs: false, //上传单个图片
                pic: false, //多个图片
                addDevice: false,
                systemType: false,
                details: false, //详情页
                lookPic: false, //图片查看
                changeRea: false, //关联的资产
                update: false, //临时维护信息点
                menum: false, //临时多选枚举类型信息点
            },
            qrcodeUrl: "", //二维码图片地址
            filesArr: [], //保存临时的文件key
            imgsArr: [], //临时保存的图片key数组
            picsArr: [], //临时设备图片keys数组
            systemId: null,
            graphyId: null,
            mess: {},
            id: 0,
            EquipmentList: [],
            firmId: "", //品牌型号所需字段--族id三位编码(传设备类id或部件类id)
            deviceType: {},
            queryParam: {}, //返回到指定位置
        };
    },
    computed: {
        ...mapGetters("layout", ["projectId", "secret", "userId"]),
    },
    created() {
        this.queryParam = this.$route.query;
        this.deviceId = this.$route.query.deviceId; //设备id
        this.typeId = this.$route.query.typeId; //设备类id
        this.mess.deviceId = this.typeId;
        this.getTypes();
    },
    methods: {
        getBelongs() {
            let params = {
                data: {
                    filters: `equipCode='${this.tabVal}'`,
                    pageNumber: 1,
                    pageSize: 50,
                },
            };
            getEquipBelongs(params, (res) => {
                if (res.content.length) {
                    this.firmId = res.content[0].family;
                    this.deviceType.assetType = res.content[0].family;
                    this.deviceType.assetName = res.content[0].familyName;
                }
            });
        },
        //tab页点击事件
        tabsClick(tab) {
            this.activeTab = this.partsTypeList[tab.index];
            this.getTableHeader();
        },
        //获取当前设备类下的所有部件类
        async getTypes() {
            let params = {
                category: this.typeId, //设备类型
                id: this.deviceId, //设备id
            };
            await getPartsAllType(params, (res) => {
                this.partsTypeList = res.content;
                this.tabVal = this.partsTypeList[0].code;
                this.activeTab = this.partsTypeList[0];
                this.getTableHeader();
                this.getBelongs();
            });
        },
        // 获取表头数据(初始化表格)
        async getTableHeader() {
            let params = {
                orders: "sort asc, name desc",
                pageNumber: 1,
                pageSize: 1000,
                type: this.tabVal,
            };
            await getDataDictionary(params, (res) => {
                this.tableHeader = res.content;
                this.tableHeader.forEach((item) => {
                    if (item.path) {
                        this.inputMap[item.path] = item;
                    }
                });
                this.getTableData();
            });
        },
        //获取表格数据
        async getTableData() {
            let params = {
                pageNumber: this.page.pageNumber,
                pageSize: this.page.pageSize,
                orders: "createTime desc, localName desc, localId desc, id desc",
                filters: `classCode='${this.tabVal}';parentId='${this.deviceId}'`,
            };
            await getEquipPartsCon(params, (res) => {
                this.tableData = res.content;
                this.copyTableData = tools.deepCopy(res.content);
                this.page.pageNumber = res.pageNumber;
                this.page.total = res.total;
                if (this.tableData && this.tableData.length) {
                    this.initTable();
                }
            });
        },
        // 修改表格内容
        async updateTableData(data, change) {
            let param = {
                    projectId: this.projectId,
                    data: {
                        content: [],
                    },
                },
                keyList = [];
            //生成要修改字段列表
            change.map((item) => {
                if (item[1] && keyList.indexOf(item[1]) == -1) {
                    keyList.push(item[1]);
                }
            });
            //生成对应修改数据
            data.map((item, index) => {
                let nullList = [];
                keyList.map((value) => {
                    let itemData = tools.dataForKey(item, value);
                    tools.setDataForKey(item, value, itemData == "" ? null : itemData);
                    // 数据为空加入置空列表（空数据类型包含： undefind / "" / null ）
                    itemData || nullList.push(value);
                });
                // 置空列表不为空
                if (nullList.length) {
                    // 深拷贝需更新的对象，并添加置空列表
                    const updateItem = JSON.parse(JSON.stringify(item));
                    updateItem.nullList = nullList;
                    param.data.content.push(updateItem);
                } else {
                    // 无置空内容
                    param.data.content.push(item);
                }
            });
            await updateParts(param, (res) => {});
        },
        // 删除表格数据
        async deleteTableData(params) {
            await deleteParts(params, (res) => {
                this.$message.success("删除成功!");
                this.getTypes();
            });
        },
        //保存元空间关联
        async saveSpaceList() {
            let data = {
                shaftId: this.shaftId,
                spaceId: this.spaceList,
            };
            const params = {
                projId: this.projectId,
                secret: this.secret,
                data: data,
            };
            await saveCenoteRelateSpace(params, (res) => {
                this.$message.success("关联成功!");
                this.getTableHeader();
            });
        },
        // 添加部件
        handleCreateTableData() {
            this.activeTab.deviceId = this.deviceId;
            this.$router.push({
                name: "partsadd",
                query: {
                    ...this.activeTab,
                    pageNo: this.queryParam.pageNo,
                    pageSize: this.queryParam.pageSize,
                    showType: this.showType,
                },
            });
        },
        // 删除表格行
        handleDeleteTableRow() {
            let params = tools.differenceArr(this.tableData, this.copyTableData);
            if (params.length < 1 || this.tableData > this.copyTableData) {
                return;
            }
            let param = {
                projectId: this.projectId,
                data: [],
            };
            params.map((item) => {
                param.data.push({ id: item.id });
            });
            this.$confirm("此操作将删除部件，是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteTableData(param);
                })
                .catch(() => {
                    this.getTableHeader();
                    this.$message("取消删除");
                });
        },
        //修改
        handleUpdataTable(changeData, source) {
            if (!this.onlyRead) {
                if (changeData) {
                    let trimmedArr = this.trimmedRows();
                    let param = handsonUtils.getParam(changeData, source, this.tableExample, trimmedArr);
                    let data = [];
                    for (let i = 0; i < param.length; i++) {
                        data.push(param[i]);
                    }
                    //如果data中包含/且data长度为1,将其转换成.
                    if (changeData.length == 1 && changeData[0][1] && changeData[0][1].indexOf("/") > 0) {
                        changeData[0][1] = changeData[0][1].split("/").join(".");
                    }

                    // 存在data进行修改请求
                    if (data && data.length) {
                        this.updateTableData(data, changeData);
                    }
                }
            }
        },
        //撤回
        undo() {
            this.tableExample.undo();
        },
        //切换每页显示多少条数据
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getTableHeader();
        },
        //切换页数
        handleCurrentChange(val) {
            this.page.pageNumber = val;
            this.getTableHeader();
        },
        formatHeaderData(list) {
            //格式化表头显示的数据
            let arr = tools.copyArr(list);
            let data = showTools.headerTextFilter(arr, "parts", this.onlyRead, this.showType, true);
            // data.unshift("查看详情", "当前关联的资产");
            data.unshift("查看详情");
            return data;
        },
        formatHeaderType(list) {
            //格式化表头头映射的数据
            let arr = tools.copyArr(list);
            let data = showTools.headerTypeFilter(arr, "parts", this.onlyRead, this.showType, true);
            data.unshift(
                {
                    data: "caozuo",
                    renderer: tools.lookDetails,
                    readOnly: true,
                }
                // {
                //     data: "propertyLocalName",
                //     readOnly: true,
                // }
            );
            return data;
        },
        initTable() {
            //实例化表格
            let settings = {
                data: this.tableData,
                colHeaders: this.formatHeaderData(this.tableHeader),
                columns: this.formatHeaderType(this.tableHeader),
                rowHeights: 30,
                fillHandle: "vertical", //允许纵向填充
                maxRows: this.tableData.length,
                contextMenu: this.onlyRead
                    ? false
                    : {
                          items: {
                              remove_row: {
                                  name: "删除部件",
                              },
                          },
                      },
                // 事件
                afterChange: this.handleUpdataTable, //修改后
                afterRemoveRow: this.handleDeleteTableRow, //右键删除
                afterOnCellMouseDown: this.handleTdClick, //鼠标点击
            };
            this.$nextTick(() => {
                this.tableExample = this.$refs.table.init(settings);
            });
        },
        //去除数组中相同的元素
        array_diff(a, b) {
            for (var i = 0; i < b.length; i++) {
                for (var j = 0; j < a.length; j++) {
                    if (a[j] == b[i]) {
                        a.splice(j, 1);
                        j = j - 1;
                    }
                }
            }
            return a;
        },
        //修改关联的资产
        changeProperty(val) {
            this.setDataToMain(val.propertyId, "propertyId", this.row);
            this.setDataToMain(val.linkEquipLocalName, "linkEquipLocalName", this.row);
        },
        //上传文件弹窗触发事件
        fileChange(keys) {
            this.setDataToMain(keys, this.messKey, this.row);
        },
        //上传图片弹窗触发事件
        imgChange(keys) {
            this.setDataToMain(keys, this.messKey, this.row);
        },
        //设备图片弹窗改变事件
        changePics(keys) {
            this.setDataToMain(keys, this.messKey, this.row);
        },
        //表格点击事件
        handleTdClick(el, rowArr) {
            //点击的是表头
            if (rowArr.row < 0) {
                return;
            }
            //被筛选过后的数组
            let trimmedArr = this.trimmedRows();
            //是否启用了排序
            let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
            if (trimmedArr.length && isSort) {
                let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper.__arrayMap;
                let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
                this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
            } else if (isSort) {
                //排序后的数组
                let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper.__arrayMap;
                let infos = this.tableData[sortArr[rowArr.row]];
                this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
            } else if (trimmedArr.length) {
                let infos = this.tableData[trimmedArr[rowArr.row]];
                this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
            } else {
                let infos = this.tableData[rowArr.row];
                this.getInfors(infos, rowArr);
            }
        },
        //获取被筛选掉的行号
        trimmedRows() {
            var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
            let dataLength = this.tableData.length;
            let dataArr = new Array();
            for (let i = 0; i < dataLength; i++) {
                dataArr.push(i);
            }
            if (plugin.length <= 0) {
                dataArr = undefined;
            } else {
                dataArr = this.array_diff(dataArr, plugin);
            }
            return dataArr || [];
        },
        getInfors(infos, row) {
            this.row = row.row;
            let val = this.tableExample.colToProp(row.col);
            let inputData = this.inputMap[val];
            this.messKey = val;
            switch (val) {
                //操作
                case "caozuo":
                    // window.open(`http://adm.sagacloud.cn:8058/spread?id=${infos.EquipID}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
                    this.$message("开发中...");
                    break;
                //设备二维码图片
                case "qRCodePic":
                    this.qrcodeUrl = this.tableData[row.row].EquipQRCode;
                    if (!!this.qrcodeUrl) {
                        this.myDialog.qrcode = true;
                    } else {
                        this.$message("此设备没有设备二维码");
                    }
                    break;
                //关联系统
                case "linkSystem":
                    if (!this.onlyRead) {
                        this.curDevice = infos.EquipID;
                        this.systemList = this.tableData[row.row].linkSystem || [];
                        this.myDialog.systemType = true;
                    }
                    break;
                //关联资产
                case "propertyLocalName":
                    if (this.linkNameFalg) {
                        this.myDialog.changeRea = true;
                    }
                    break;
                /**
                 * 关联资产后才可维护的信息点
                 */
                // case 'flowBuild': //所属建筑楼层
                // case 'infos.productDate': //生产日期
                // case 'infos.serialNum': //出厂编号
                // case 'infos.assetID': //资产编号
                // case 'infos.purchasePrice': //采购价格
                // case 'infos.insuranceNum': //保险单号
                // case 'infos.insuranceFile': //保险文件
                //     const propertyId = this.tableData[row.row].propertyId;
                //     if (!propertyId) { //未关联资产
                //         this.$confirm('您暂未关联设备对应的资产，该信息点不可编辑', '提示', {
                //             confirmButtonText: '我知道了',
                //             showCancelButton: false,
                //             type: 'warning',
                //             center: true
                //         }).then(() => {
                //             return false;
                //         });
                //     }
                //     break
                //保险文件--设备文档--安装质检报告
                case "infos.insuranceFile": //保险文件
                case "infos.archive": //设备文档
                case "infos.checkReport": //安装质检报告
                case "infos.maintainManual": //维修保养手册
                case "infos.approachingAcceptance": //进场验收单
                case "infos.acceptanceReport": //验收报告
                case "infos.operationManual": //操作说明书
                case "infos.originalCertificate": //原厂证明
                case "infos.testReport": //检测报告
                case "infos.productCertification": //产品合格证
                case "infos.installInstruction": //安装说明书
                case "infos.supplierContract": //供应合同
                case "infos.drawing": //设备图纸
                case "infos.installDrawing": //安装图纸
                    let IPSdata = tools.dataForKey(this.tableData[row.row], val);
                    this.filesArr = IPSdata ? IPSdata : [];
                    this.myDialog.uploadFiles = true;
                    break;
                //安装照片--设备铭牌照片
                case "infos.installPic":
                case "infos.nameplate":
                    let SSPPdata = tools.dataForKey(this.tableData[row.row], val);
                    this.imgsArr = SSPPdata ? SSPPdata : [];
                    this.myDialog.uploadImgs = true;
                    break;
                //设备照片
                case "infos.pic":
                    let Pdata = tools.dataForKey(this.tableData[row.row], val);
                    this.picsArr = Pdata ? Pdata : [];
                    this.myDialog.pic = true;
                    break;
                //包含的部件字段
                case "count":
                    if (this.onlyRead) {
                        this.$router.push({ path: "/ledger/parts", query: { deviceId: infos.EquipID } });
                    } else {
                        this.$router.push({
                            path: "/ledger/partsmanage",
                            query: { deviceId: infos.EquipID, typeId: this.mess.deviceId },
                        });
                    }
                    break;
                default:
                    break;
            }
            if (!this.onlyRead && !inputData.editable) {
                this.$confirm("该信息点的值为自动生成，不可人工维护！", "提示", {
                    confirmButtonText: "我知道了",
                    showCancelButton: false,
                    type: "warning",
                    center: true,
                }).then(() => {
                    return false;
                });
            }
            // 维护多选枚举值
            if (!this.onlyRead && inputData.dataType == "MENUM") {
                this.updateInfoData = inputData;
                this.updateInfoPoint = val;
                this.updateInput = tools.dataForKey(this.tableData[row.row], val);
                this.myDialog.menum = true;
                return false;
            }
            if (!this.onlyRead && showTools.inputModeArr.indexOf(inputData.dataType) == "-1") {
                this.updateInfoPoint = val;
                this.updateInput = tools.dataForKey(this.tableData[row.row], val);
                this.myDialog.update = true;
                return false;
            }
        },
        //关闭临时维护弹窗回调
        handleCloseUpdate() {
            this.updateInputShow = false;
            this.updateInfoPoint = "";
            this.updateInput = "";
        },
        //更新临时维护信息点
        handleClickUpdate() {
            tools.setDataForKey(this.tableData[this.row], this.updateInfoPoint, this.updateInput);
            this.handleUpdataTable([[this.row, this.updateInfoPoint, null, this.updateInput]], "edit");
            this.updateInputShow = false;
            this.myDialog.update = false;
            this.updateInput = "";
        },
        //多选枚举类型值修改
        handleChangeMenum(newValue) {
            tools.setDataForKey(this.tableData[this.row], this.updateInfoPoint, newValue);
            this.handleUpdataTable([[this.row, this.updateInfoPoint, null, newValue]], "edit");
            this.myDialog.menum = false;
            this.updateInput = "";
        },
        utilToKey(key, name, data, messName) {
            if (key == name) {
                this.setDataToMain(data[key], messName, this.row);
            }
        },
        //判断是否有值，有值赋值
        setDataToMain(data, key, row) {
            if (!!data && data != "--") {
                if (!!this.tableData[row]) {
                    tools.setDataForKey(this.tableData[row], key, data);
                    this.handleUpdataTable([[row, key, null, data]], "edit");
                } else {
                    this.tableData[row] = {};
                    tools.setDataForKey(this.tableData[row], key, data);
                }
            } else {
                tools.setDataForKey(this.tableData[row], key, "");
            }
        },
        //修改资产
        changeAssetsFalg() {
            if (this.linkNameFalg) {
                this.linkNameFalg = false;
            } else {
                this.$confirm(
                    "<p>真的要在这里修改部件关联的资产么?</p><p>真的能通过列表信息找到想关联的资产么？</p><p>在这里修改关联的资产一定是因为之前关联错了要修改么？</p>",
                    "提示",
                    {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: "没错！我要改关联的资产",
                        cancelButtonText: "我就点开看看",
                        confirmButtonClass: "cancelButtonClass",
                        cancelButtonClass: "cancelButtonClass",
                    }
                )
                    .then((_) => {
                        this.linkNameFalg = true;
                    })
                    .catch((_) => {
                        this.$message("取消");
                    });
            }
        },
        // 返回
        goback() {
            this.$router.push({ path: "/ledger/facility" });
        },
    },
};
</script>
<style lang="less" scoped>
#deviceList {
    overflow: hidden;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    position: relative;

    .right {
        background: #fff;
    }

    .search-header {
        overflow: hidden;
        padding: 0 10px 10px 10px;
        border-bottom: 1px solid #bcbcbc;
    }

    .tableBox {
        display: flex;
        height: calc(100% - 150px);
        margin-top: 10px;

        .tableLeft,
        .middle_sty {
            flex: 1;
        }
    }
}

.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
    vertical-align: middle;
}
</style>
