<template>
    <div id="zzjb">
        <el-tabs type="border-card">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-s-claim"></i> 生成简报</span>
                <div class="generateBriefing">
                    <div class="generateBriefing-title">
                        <span style="color:red">*</span>
                        <el-input placeholder="请输入简报名称" v-model="briefing.title"></el-input>
                    </div>
                    <div class="generateBriefing-condition">
                        <div class="condition-mechanism">
                            <el-input placeholder="请输入单位名称" v-model="briefing.company"></el-input>
                        </div>
                        <div class="condition-date">
                            <el-date-picker v-model="briefing.date" type="date" placeholder="选择日期" format="M月dd日" value-format="M月dd日">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="generateBriefing-content" v-for="(item,index) in briefing.content">
                        <div class="contentList-title">
                            <el-input v-model="item.title"></el-input>
                        </div>
                        <div class="contentList-explain">
                            <el-input type="textarea" autosize v-model="item.explain"></el-input>
                        </div>
                        <div class="contentList-text" v-for="(item1,index1) in item.text">
                            <div class="text-title">
                                <span>{{returnChinese(index1)+'、'}}</span>
                                <el-input v-model="item1.title" label="123"></el-input>
                            </div>
                            <div class="text-condition">
                                <el-input v-model="item1.tag" placeholder="请输入信息标签"></el-input>
                                <div class="button-condition" @click="selectParagraph(index,index1)">选择段落</div>
                                <div class="button-addCondition" @click="addCondition(index,index1)">增加段落</div>
                                <!-- <div class="button-condition" @click="selectChart">选择图表</div> -->
                            </div>
                            <div class="text-text">
                                <div class="text-area" v-for="(item2,index2) in item1.text1" v-if="item1.text1.length>0">
                                    <div class="left-text">
                                        <el-input v-model="item2.title" placeholder="段落标题"></el-input>
                                        <el-input class="area-txt" type="textarea" autosize placeholder="请输入内容" v-model="item2.description"> </el-input>
                                    </div>
                                    <div class="right-text">
                                        <span class="el-icon-delete" @click="removeText(item2,index,index1,index2)"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-condition" @click="addText(index)">增加</div>
                    </div>
                    <div class="generateBriefing-new">
                        <div class="button-condition" @click="addContent()">新增模块</div>
                    </div>
                    <div class="generateBriefing-form">
                        <el-form ref="form" label-width="100px">
                            <el-form-item label="报送：">
                                <el-input placeholder="报送部门" v-model="briefing.sendTo.submittedCompany"></el-input></br>
                                <el-input placeholder="报送人" v-model="briefing.sendTo.submittedPeople" style="margin-top:10px;"></el-input>
                            </el-form-item>
                            <el-form-item label="抄送：">
                                <el-input placeholder="抄送" v-model="briefing.sendTo.ccPerson"></el-input>
                            </el-form-item>
                            <el-form-item label="承办人：">
                                <el-input placeholder="承办人" v-model="briefing.sendTo.undertaker"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话：">
                                <el-input placeholder="联系电话" v-model="briefing.sendTo.contactNumber"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="generateBriefing-button">
                        <!-- <div class="button-condition" @click="onlinePreview">在线预览</div> -->
                        <div class="button-condition" @click="generateBriefing">生成简报</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-files"></i> 简报列表</span>
                <div class="search">
                    <el-input v-model="jbName" placeholder="请输入简报名称" ></el-input>
                    <div class="button-delete" v-if="multipleSelectionList.length>0" @click="deleteJb()">删除</div>
                    <div class="button-search" @click="searchList()">搜索</div>
                </div>
                <div class="searchResult">
                    <el-table :data="jbList" ref="multipleTable" @selection-change="handleSelectionChangeList" style="width: 100%;" height="calc(100% - 60px)" :header-cell-style="{color:'#ffffffc7',fontSize:'14px',background:'#263b5d'}" :row-style="{color:'#ffffffc7',fontSize:'14px',background:'#1d2d46'}">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="name" label="简报名称" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="author" label="制作人">
                        </el-table-column>
                        <el-table-column prop="createTime" label="制作时间">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="100">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="viewBriefing(scope.row)">预览</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-div">
                        <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" :page-size="zzjbObj.everySize" :current-page="zzjbObj.currentPage" :total="zzjbObj.total" @current-change="handleCurrentChange" :page-sizes="[10,20,50,100]">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 抽屉 -->
        <el-drawer title="选择段落" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
            <div class="search">
                <el-select v-model="value" placeholder="请选择" clearable>
                    <el-option v-for="item in collectionFolder" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-input v-model="input"></el-input>
                <div class="button-search" @click="search()">搜索</div>
                <div class="button-import" v-if="multipleSelection.length>0" @click="addBriefing()">加入简报</div>
            </div>
            <div class="searchResult">
                <div class="resultList">
                    <el-table ref="multipleTable" :data="collectionFolderNews" tooltip-effect="dark" style="width: 100%;" height="calc(100% - 60px)" @selection-change="handleSelectionChange" :header-cell-style="{color:'white',background:'#263b5d'}" :row-style="{color:'white',background:'#1d2d46'}">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="收藏内容" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <h5 v-text="scope.row.title"></h5>
                                <div v-text="scope.row.description"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" width="200" label="收藏时间" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { get } from '../../util/http_util';
import exportWord from "../../util/export_doc_util_zzjb";
import { queryBriefing, removeBriefing } from '../../api/decision';
export default {
    inject: ['reload'],
    data() {
        return {
            briefing: {
                title: '',
                company: '',
                date: '',
                content: [
                    {
                        title: '',
                        explain: '',
                        text: [
                            {
                                title: '',
                                tag: '',
                                text1: [{ title: '', description: '' }]
                            }
                        ]
                    }
                ],
                sendTo: {
                    submittedCompany: '',
                    submittedPeople: '',
                    ccPerson: '',
                    undertaker: '',
                    contactNumber: ''

                }
            },
            drawer: false,
            direction: 'rtl',
            value: '',
            input: '',
            checked: [],
            multipleSelection: [],
            collectionFolder: [],//收藏夹
            collectionFolderNews: [],//每个收藏夹下的收藏内容
            selectIndex: 0,
            selectIndex1: 0,
            zzjbObj: {
                everySize: 10,
                currentPage: 1,
                total: 0
            },
            jbList: [],
            jbName: '',
            multipleSelectionList: []
        }
    },
    methods: {
        //阿拉伯字母变中文大写
        returnChinese(val) {
            switch (val) {
                case 0:
                    return '一';
                    break;
                case 1:
                    return '二';
                    break;
                case 2:
                    return '三';
                    break;
                case 3:
                    return '四';
                    break;
                case 4:
                    return '五';
                    break;
                case 5:
                    return '六';
                    break;
                case 6:
                    return '七';
                    break;
                case 7:
                    return '八';
                    break;
                case 8:
                    return '九';
                    break;
                case 9:
                    return '十';
                    break;
                case 10:
                    return '一';
                    break;
            }
        },
        //选择段落
        selectParagraph(index, index1) {
            this.selectIndex = index;
            this.selectIndex1 = index1;
            this.drawer = true;
        },
        //选择图表
        selectChart() { },
        //新增分段
        addText(index) {
            let obj = {
                title: '',
                tag: '',
                text1: [
                    {
                        title: '',
                        description: ''
                    }
                ]
            };
            this.briefing.content[index].text.push(obj);
        },
        //新增内容
        addContent() {
            let obj = {
                title: '',
                explain: '',
                text: [
                    {
                        title: '',
                        tag: '',
                        text1: [{ title: '', description: '' }]
                    }
                ]
            };
            this.briefing.content.push(obj);
        },
        //在线预览
        onlinePreview() { },
        //生成简报
        generateBriefing() {
            let data = JSON.parse(JSON.stringify(this.briefing));
            data.content.forEach(item => {
                item.text.forEach((res, i) => {
                    res.title = this.returnChinese(i) + '、' + res.title;
                });
            });
            let aa = exportWord(
                "static/word/generateBriefing.docx",
                data,
                data.title,
                1,
                this.userInfo.account
            ).catch(err => {
                this.$message.error(err);
            });
            this.reload();
        },
        handleClose(done) {
            done();
        },
        //查询每个收藏夹下内容
        queryCollectionFolderNews(id) {
            get('api/rest/resource/queryCollection?folderId=' + id).then(res => {
                this.collectionFolderNews = res;
            }).catch((err)=>{
                this.$message.warning(err.message);
            });
        },
        search() {
            this.queryCollectionFolderNews(this.value);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        addBriefing() {
            if (this.multipleSelection.length > 0) {
                this.briefing.content[this.selectIndex].text[this.selectIndex1].text1 = this.briefing.content[this.selectIndex].text[this.selectIndex1].text1.concat(this.multipleSelection);
                this.drawer = false;
            }
        },
        //删除段落
        removeText(item, index, index1, index2) {
            if (this.briefing.content[index].text[index1].text1.length > 1) {
                this.briefing.content[index].text[index1].text1.splice(index2, 1);
            } else {
                this.$message.warning('最后一个段落不能删除！');
            }

        },
        //增加段落
        addCondition(index, index1) {
            let obj = {
                title: '',
                description: ''
            }
            this.briefing.content[index].text[index1].text1.push(obj);
        },
        // ========================================================简报========================================================
        searchList() {
            //查询上传简报
            queryBriefing(this.zzjbObj.currentPage, this.zzjbObj.everySize, this.jbName).then(res => {
                this.jbList = res.list;
                this.zzjbObj.total = res.totals;
            }).catch((err)=>{
                this.$message.warning(err.message);
            });
        },
        handleSelectionChangeList(val) {
            this.multipleSelectionList = [];
            val.forEach(item => {
                this.multipleSelectionList.push(item.path);
            });
        },
        handleSizeChange(size) {
            this.zzjbObj.everySize = size;
            this.reload();
        },
        handleCurrentChange(pageNum) {
            this.zzjbObj.currentPage = pageNum;
            this.reload();
        },
        deleteJb() {
            this.$confirm('此操作将永久删除简报, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeBriefing(this.multipleSelectionList).then(res => {
                    if (this.multipleSelectionList.length == res) {
                        this.reload();
                        this.$message.success('删除成功！');
                    }
                }).catch((err)=>{
                    this.$message.warning(err.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        viewBriefing(row) {
            window.open(`api/rest/document/viewBriefing/${row.path}`);
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { username: "" };
            }
        }
    },
    activated() {
        get('api/rest/resource/queryCollectionFolder?collector=' + this.userInfo.account).then(res => {
            this.collectionFolder = res;
            res.length > 0 && (this.value = res[0].id);
            res.length > 0 && this.queryCollectionFolderNews(res[0].id);
        }).then(res=>{
            this.searchList();
        })
        .catch((err)=>{
            this.$message.warning(err.message);
        });
    }
}
</script>

<style lang="scss">
#zzjb {
    width: 100%;
    height: 98%;
    padding: 30px;
    box-sizing: border-box;
    overflow-y: auto;
    .el-tabs--border-card {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border: 2px solid #125473;
        border-radius: 5px;
        box-sizing: border-box;
        background: #ffffff00;
        .el-tabs__header {
            background-color: unset;
            border-bottom: 2px solid #125473;
            .el-tabs__item {
                color: #dedede;
            }
            .el-tabs__item.is-active {
                color: #ffe000;
                background-color: #116791;
                border-right-color: #116791;
                border-left-color: #116791;
            }
            .el-tabs__item:not(.is-disabled):hover {
                color: #ffe000;
            }
        }
        .el-tabs__content {
            height: calc(100% - 42px);
            box-sizing: border-box;
        }
    }

    .generateBriefing {
        width: 70%;
        height: 100%;
        margin: 0 auto;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
        }
        .generateBriefing-title {
            width: 100%;
            height: 50px;
            margin-top: 20px;
            text-align: center;
            .el-input {
                width: 20%;
                input {
                    height: 30px;
                    color: white !important;
                    background: none !important;
                    border: 1px solid #146a80 !important;
                    box-shadow: 0 0 10px #1b6097;
                    &::-webkit-input-placeholder {
                        text-align: center;
                    }
                }
            }
        }
        .generateBriefing-condition {
            width: 100%;
            height: 50px;
            border-bottom: 2px solid #80c3d1;
            .condition-mechanism {
                width: 200px;
                height: 100%;
                float: left;
                .el-input {
                    width: 100%;
                    input {
                        height: 30px;
                        color: white !important;
                        background: none !important;
                        border: 1px solid #146a80 !important;
                        box-shadow: 0 0 10px #1b6097;
                    }
                }
            }
            .condition-date {
                width: 200px;
                height: 100%;
                float: right;
                .el-input {
                    width: 100%;
                    input {
                        height: 30px;
                        color: white !important;
                        background: none !important;
                        border: 1px solid #146a80 !important;
                        box-shadow: 0 0 10px #1b6097;
                    }
                    .el-input__icon {
                        line-height: 30px;
                    }
                }
            }
        }
        .generateBriefing-content {
            width: 100%;
            margin-top: 30px;
            border-bottom: 2px solid #80c3d1;
            &::after {
                content: '';
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            min-height: 350px;
            .contentList-title {
                width: 100%;
                height: 50px;
                margin-top: 10px;
                text-align: center;
                .el-input {
                    width: 20%;
                    input {
                        height: 30px;
                        color: white !important;
                        background: none !important;
                        border: 1px solid #146a80 !important;
                        box-shadow: 0 0 10px #1b6097;
                        &::-webkit-input-placeholder {
                            text-align: center;
                        }
                    }
                }
            }
            .contentList-explain {
                width: 100%;
                height: 50px;
                margin-top: 10px;
                text-align: center;
                .el-textarea {
                    width: 100%;
                    textarea {
                        height: 60px;
                        color: white !important;
                        background: none !important;
                        border: 1px solid #146a80 !important;
                        box-shadow: 0 0 10px #1b6097;
                    }
                }
            }
            .contentList-text {
                width: 100%;
                float: left;
                margin-top: 30px;
                .text-title {
                    width: 100%;
                    height: 40px;
                    margin-top: 10px;
                    .el-input {
                        width: 20%;
                        input {
                            height: 30px;
                            color: white !important;
                            background: none !important;
                            border: 1px solid #146a80 !important;
                            box-shadow: 0 0 10px #1b6097;
                        }
                    }
                }
                .text-condition {
                    width: 100%;
                    height: 40px;
                    margin-top: 10px;
                    .el-input {
                        width: 20%;
                        float: left;
                        input {
                            height: 30px;
                            color: white !important;
                            background: none !important;
                            border: 1px solid #146a80 !important;
                            box-shadow: 0 0 10px #1b6097;
                        }
                    }
                    .button-condition {
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 13px;
                        float: left;
                        margin-left: 10px;
                        text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/yqjc/41.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                    .button-addCondition {
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 13px;
                        float: left;
                        margin-left: 10px;
                        text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/yqjc/41.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .text-text {
                    width: 100%;
                    min-height: 80px;
                    float: left;
                    margin-top: 10px;
                    padding: 10px;
                    border: 1px solid #146a80;
                    box-sizing: border-box;
                    overflow-y: auto;
                    .text-area {
                        width: 100%;
                        float: left;
                        margin-top: 10px;
                        .left-text {
                            width: calc(100% - 80px);
                            float: left;
                            .el-input {
                                width: 20%;
                                float: left;
                                input {
                                    height: 30px;
                                    color: white !important;
                                    background: none !important;
                                    border: 1px solid #146a80 !important;
                                    box-shadow: 0 0 10px #1b6097;
                                }
                            }
                            .area-txt {
                                width: calc(100% - 80px);
                                float: left;
                                margin-top: 10px;
                                .el-textarea__inner {
                                    color: white !important;
                                    background: none !important;
                                    border: 1px solid #146a80 !important;
                                    box-shadow: 0 0 10px #1b6097;
                                }
                            }
                        }
                        .right-text {
                            width: 80px;
                            float: left;
                            .el-icon-delete {
                                float: left;
                                margin-top: 25px;
                                margin-left: 17px;
                                cursor: pointer;
                                &:hover {
                                    color: red;
                                }
                            }
                        }
                    }
                }
            }
            & > .button-condition {
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                float: left;
                margin-top: 10px;
                margin-left: 10px;
                margin-bottom: 10px;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/yqjc/41.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }
        .generateBriefing-new {
            width: 100%;
            height: 50px;
            margin-top: 30px;
            .button-condition {
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                float: left;
                margin-left: 10px;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/yqjc/41.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }
        .generateBriefing-form {
            width: 100%;
            margin-top: 20px;
            .el-form {
                .el-form-item__label {
                    line-height: 30px;
                    color: white;
                }
                .el-form-item__content {
                    .el-input {
                        width: 20%;
                        input {
                            height: 30px;
                            color: white !important;
                            background: none !important;
                            border: 1px solid #146a80 !important;
                            box-shadow: 0 0 10px #1b6097;
                        }
                    }
                }
            }
        }
        .generateBriefing-button {
            width: 100%;
            height: 50px;
            margin-top: 20px;
            text-align: center;
            .button-condition {
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                float: left;
                margin-left: 10px;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/yqjc/41.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                &:first-child {
                    margin-left: calc(50% - 35px);
                }
            }
        }
    }

    .el-drawer {
        width: 40% !important;
        color: white;
        background-color: #1d3959;
        .el-drawer__header {
            padding-bottom: 5px;
            color: white;
            border-bottom: 1px solid #ddd;
        }
        .el-drawer__body {
            width: 100%;
            height: calc(100% - 50px);
            text-align: right;
            .search {
                width: 100%;
                height: 50px;
                text-align: left;
                .el-select {
                    float: left;
                }
                .el-input {
                    width: 200px;
                    float: left;
                    margin-left: 15px;
                    input {
                        height: 30px;
                        color: white;
                        background: none !important;
                        border: 1px solid #146a80 !important;
                        box-shadow: 0 0 10px #1b6097;
                    }
                    .el-input__icon {
                        line-height: 30px;
                    }
                }
                .button-search,
                .button-import {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                    float: left;
                    margin-left: 10px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
            }
            .searchResult {
                width: 100%;
                height: calc(100% - 50px);
                overflow-y: auto;
                .resultList {
                    width: 100%;
                    height: 100%;
                    margin: 0px;
                    padding: 10px;
                    box-sizing: border-box;
                    .el-table--enable-row-hover {
                        .el-table__body tr {
                            &:hover > td {
                                background-color: #82848a78 !important;
                            }
                        }
                    }
                    .el-table {
                        background-color: transparent !important;
                        .el-table__header-wrapper {
                            width: 100%;
                            height: 48px;
                        }
                        .el-table__body-wrapper {
                            width: 100%;
                            height: calc(100% - 48px);
                        }
                        th.is-leaf {
                            border-bottom: 1px solid #185066;
                        }
                        .gutter {
                            background-color: #263b5d;
                        }
                        &::before {
                            display: none;
                        }
                        td {
                            border-bottom: 1px solid #185066;
                            &:nth-child(2) {
                                .el-tag {
                                    height: 20px;
                                    padding: 0px 8px;
                                    line-height: 19px;
                                }
                            }
                        }
                    }
                    .everyList {
                        width: 100%;
                        height: 60px;
                        border-bottom: 1px solid #ddd;
                        float: left;
                        .result-checkbox {
                            width: 60px;
                            height: 100%;
                            float: left;
                            .el-checkbox {
                                margin-top: 23px;
                            }
                        }
                        .result-content {
                            width: calc(100% - 100px);
                            height: 100%;
                            float: left;
                            margin-left: 20px;
                            padding: 5px;
                            box-sizing: border-box;
                            .content-txt {
                                width: 100%;
                                font-size: 15px;
                                text-overflow: -o-ellipsis-lastline;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                            }
                        }
                    }
                }
            }
        }
    }

    .search {
        width: 100%;
        height: 50px;
        text-align: right;
        .el-input {
            width: 200px;
            margin-right: 15px;
            input {
                height: 30px;
                color: white;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }
            .el-input__icon {
                line-height: 30px;
            }
        }
        .button-search {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .button-upload {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .button-delete {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .button-transform {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    .searchResult {
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;
        .el-table--enable-row-hover {
            .el-table__body tr {
                &:hover > td {
                    background-color: #82848a78 !important;
                }
            }
        }
        .el-table {
            background-color: transparent !important;
            .el-table__header-wrapper {
                width: 100%;
                height: 48px;
            }
            .el-table__body-wrapper {
                width: 100%;
                height: calc(100% - 48px);
            }
            th.is-leaf {
                border-bottom: 1px solid #185066;
            }
            .gutter {
                background-color: #263b5d;
            }
            &::before {
                display: none;
            }
            td {
                border-bottom: 1px solid #185066;
            }
        }
        .pagination-div {
            width: 100%;
            height: 50px;
            .el-pagination {
                margin-top: 9px;
                text-align: right;
                .el-pagination__total {
                    color: white;
                }
                .el-pagination__jump {
                    color: white;
                }
            }
            .myPagination.is-background .el-pager li:not(.disabled).active {
                color: #fff;
                border: 1px solid #146a80;
                box-shadow: 0 0 10px #1b6097;
                background-color: #1d2d46;
            }
        }
    }
}
</style>