<template>
    <div>
        <el-card shadow="hover" class="mgb20">
            <div class="flex-between">
                <el-page-header @back="goBack" :content="'内容设置'"></el-page-header>
            </div>
        </el-card>
        <!--内容设置-->
        <el-card shadow="hover" class="mgb20">
            <div class="page">
                <div class="relative">
                    <div class="p-title">内容设置</div>
                    <div class="btns">
                        <template v-if="!sorting">
                            <el-button type="primary" round @click="addChapter" v-auth="'/curriculum:内容设置:添加章节'">添加章节</el-button>
                            <el-button type="primary" round @click="sort" v-auth="'/curriculum:内容设置:编辑顺序'">编辑顺序</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" round @click="cancelSort">取消</el-button>
                            <el-button type="primary" round @click="saveSort">保存</el-button>
                        </template>
                    </div>
                </div>
                <el-divider></el-divider>
                <div class="page-content">
                    <div class="mgb20" v-for="(chapter,index) in chapters" :key="chapter.id">
                        <div class="flex-between mgb10">
                            <div>{{ chapter.name }}</div>
                            <div>
                                <template v-if="!sorting">
                                    <el-button class="action-btn" plain @click="editChapter(chapter)" v-auth="'/curriculum:内容设置:修改章节名称'">修改章节名称</el-button>
                                    <el-button class="action-btn" plain @click="addSection(chapter.id)" v-auth="'/curriculum:内容设置:添加小节'">添加小节</el-button>
                                    <el-button class="action-btn" plain @click="delChapter(chapter.id)" v-auth="'/curriculum:内容设置:删除章节'">删除</el-button>
                                </template>
                                <template v-else>
                                    <i class="el-icon-top sort-icon" :class="{disabled: index == 0}" style="margin-right: 5px" @click="sortChapter(chapter,'up',index == 0,index)"></i>
                                    <i class="el-icon-bottom sort-icon" :class="{disabled: index == chapters.length-1}" @click="sortChapter(chapter,'down',index == chapter.length-1,index)"></i>
                                </template>
                            </div>
                        </div>

                        <el-table :data="chapter.subsectionList" class="table" stripe header-align="center">
                            <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                            <el-table-column prop="name" label="资源名称">
                            </el-table-column>
                            <el-table-column prop="fileType" label="资源类型" align="center">
                                <template slot-scope="scope">
                                    {{ transferType(scope.row.fileType) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="300">
                                <template slot-scope="scope">
                                    <template v-if="!sorting">
                                        <el-button type="text" @click="download(scope.row)" v-auth="'/curriculum:内容设置:下载'">下载</el-button>
                                        <el-button type="text" @click="preview(scope.row)" v-auth="'/curriculum:内容设置:查看'">查看</el-button>
                                        <el-button type="text" @click="delSection(scope.row)" v-auth="'/curriculum:内容设置:删除小节'">删除</el-button>
                                        <el-button type="text" @click="editSectionName(scope.row,chapter.id)" v-auth="'/curriculum:内容设置:修改小节名称'">修改小节名称</el-button>
                                        <el-button type="text" @click="switchFile(scope.row,chapter.id)" v-auth="'/curriculum:内容设置:更换文件'">更换文件</el-button>
                                    </template>
                                    <template v-else>
                                        <i class="el-icon-top sort-icon" :class="{disabled: scope.$index == 0}" style="margin-right: 5px" @click="sortSection(index,'up',scope.$index == 0,scope.$index)"></i>
                                        <i class="el-icon-bottom sort-icon" :class="{disabled: scope.$index == chapter.subsectionList.length-1}" @click="sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)"></i>
                                    </template>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <el-dialog :title="chapterId ? '编辑章节' : '新增章节'" :visible.sync="chapterVisible" width="24%" :close-on-click-modal="false">
                        <el-form>
                            <el-form-item>
                                <el-input placeholder="请输入章节名称，便于对小节归类" v-model="chapterName" maxlength="50"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                        <el-button @click="chapterVisible = false">取消</el-button>
                        <el-button type="primary" @click="chapterSubmit">确定</el-button>
                    </span>
                    </el-dialog>

                    <el-dialog title="添加小节" :visible.sync="sectionVisible" width="24%" @close="closeSection" :close-on-click-modal="false">
                        <el-form label-width="80px">
                            <el-form-item label="资源添加">
                                <el-upload
                                    :before-upload="beforeUpload"
                                    :on-remove="handleRemove"
                                    :on-error="uploadError"
                                    :on-success="uploadSuccess"
                                    :before-remove="beforeRemove"
                                    :limit="1"
                                    :on-exceed="handleExceed"
                                    :action="this.api.fileupload"
                                    :file-list="uploadList"
                                    :headers="headers"
                                    name="file"
                                >
                                    <el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="小节名称">
                                <el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                        <el-button @click="sectionVisible = false">取消</el-button>
                        <el-button type="primary" @click="sectionSubmit">确定</el-button>
                    </span>
                    </el-dialog>

                    <el-dialog title="更换文件" :visible.sync="switchVisible" width="28%" :close-on-click-modal="false" @close="closeSwitch">
                        <div style="text-align: center">
                            <el-upload
                                :before-upload="beforeUpload"
                                :on-remove="handleRemove"
                                :on-error="uploadError"
                                :on-success="uploadSuccess"
                                :before-remove="beforeRemove"
                                :limit="1"
                                :on-exceed="handleExceed"
                                :action="this.api.fileupload"
                                :file-list="uploadList"
                                :headers="headers"
                                name="file"
                            >
                                <el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button>
                            </el-upload>
                        </div>
                        <span slot="footer" class="dialog-footer">
                        <el-button @click="switchVisible = false">取消</el-button>
                        <el-button type="primary" @click="switchSubmit">确定</el-button>
                    </span>
                    </el-dialog>

                    <el-dialog title="修改小节名称" :visible.sync="sectionNameVisible" width="24%" :close-on-click-modal="false">
                        <el-form>
                            <el-form-item>
                                <el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                        <el-button @click="sectionNameVisible = false">取消</el-button>
                        <el-button type="primary" @click="sectionNameSubmit">确定</el-button>
                    </span>
                    </el-dialog>

                    <div v-show="previewImg" class="el-image-viewer__wrapper" :class="{active: previewImg}" style="z-index: 2000">
                        <div class="el-image-viewer__mask"></div>
                        <span class="el-image-viewer__btn el-image-viewer__close" @click="previewImg = ''"><i class="el-icon-circle-close" style="color: #fff"></i></span>
                        <div class="el-image-viewer__canvas">
                            <img :src="previewImg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
                        </div>
                    </div>
                    <div v-show="iframeSrc" class="el-image-viewer__wrapper" :class="{active: iframeSrc}" style="z-index: 2000">
                        <div class="el-image-viewer__mask"></div>
                        <span class="el-image-viewer__btn el-image-viewer__close" :class="{'doc-close': isWord}" :style="{top: isWord ? '50px' : '5px'}" @click="closeIframe"><i class="el-icon-circle-close" style="color: #fff"></i></span>
                        <div class="el-image-viewer__canvas">
                            <iframe v-if="iframeSrc" class="fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
                            <template v-if="showMask">
                                <div class="mask" style="width: 200px;height: 30px;top: 53px;right: 320px"></div>
                                <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
                            </template>
                            <template v-if="showMask1">
                                <div class="word-mask1" style="width: 200px;height: 50px;"></div>
                                <div class="word-mask" style="height: 40px;top: 48px;"></div>
                                <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
                            </template>
                            <template v-if="showMask2 && iframeSrc">
                                <div class="excel-mask1" style="height: 48px;"></div>
                            </template>
                        </div>
                    </div>
                    <div v-show="playAuth" class="el-image-viewer__wrapper" :class="{active: playAuth}" style="z-index: 2000">
                        <div class="el-image-viewer__mask"></div>
                        <span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close" style="color: #fff"></i></span>
                        <div class="player" id="player"></div>
                    </div>

                    <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
                </div>
            </div>
        </el-card>
        <div class="player-download" id="playerDownload"></div>
    </div>
</template>

<script>
import { Loading } from "element-ui";
import pdf from "@/components/pdf";

export default {
    name: "contentSettings",
    data() {
        return {
            headers: {
                token: sessionStorage.getItem('token')
            },
            id: this.$route.query.cid,
            chapters: [],
            sorting: false,
            uploading: false,
            uploadList: [],
            chapterVisible: false,
            chapterId: "",
            chapterName: "",
            sectionVisible: false,
            sectionName: "",
            sectionId: "",
            switchVisible: false,
            sectionNameVisible: false,
            fileId: "",
            fileName: "",
            fileUrl: "",
            originalFileName: "",
            fileType: "",
            playAuth: "",
            player: null,
            previewImg: "",
            iframeSrc: "",
            curFile: {},
            isAddSection: false,
            isWord: false,
            isPPT: false,
            isExcel: false,
            showMask: false,
            showMask1: false,
            showMask2: false,
            loadIns: null,
            pdfVisible: false,
            pdfSrc: "",
            previewing: false
        };
    },
    components: { pdf },
    mounted() {
        this.insertScript();
        this.id && this.getData();
        // 处理预览资源后返回弹框不会消失的问题
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener("popstate", this.goBack, false);
        }
    },
    destroyed() {
        window.removeEventListener("popstate", this.goBack, false);
    },
    methods: {
        getData() {
            this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`)
                .then(res => {
                    this.chapters = res.chapterList;
                })
                .catch(err => {

                });
        },
        goBack() {
            if (this.previewing) {
                this.closeIframe();
            } else {
                this.$router.push("/curriculum");
            }
        },
        iframeOnload() {
            document.querySelector("#fileIframe").onload = e => {
                if (this.isPPT) {
                    this.showMask = true;
                } else {
                    this.showMask = false;
                }
                if (this.isWord) {
                    this.showMask1 = true;
                } else {
                    this.showMask1 = false;
                }
                if (this.isExcel) {
                    this.showMask2 = true;
                } else {
                    this.showMask2 = false;
                }
                this.loadIns.close();
            };
        },
        insertScript() {
            const linkTag = document.createElement("link");
            linkTag.rel = "stylesheet";
            linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css";
            document.body.appendChild(linkTag);

            const scriptTag = document.createElement("script");
            scriptTag.type = "text/javascript";
            scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js";
            document.body.appendChild(scriptTag);
        },
        // 上传文件
        beforeUpload(file) {
            let type = this.transferType(file.name.substring(file.name.lastIndexOf(".") + 1));
            if (type != "视频" && type != "图片" && type != "pdf" && (file.size / 1024 / 1024) > 10) {
                this.$message.error("请上传10M以内的文件");
                return false;
            }
            this.uploading = true;
            this.originalFileName = file.name;
            if (this.isAddSection) this.sectionName = file.name.substring(0, file.name.lastIndexOf("."));
            this.fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
            );
        },
        uploadSuccess(res, file, fileList) {
            let { fileId, fileType, fileUrl, ossFileName } = res.data.filesResult;
            this.uploading = false;
            this.fileId = fileId;
            this.fileType = fileType;
            this.fileUrl = fileUrl;
            this.fileName = ossFileName;
        },
        uploadError(err, file, fileList) {
            this.$message({
                message: "上传出错，请重试！",
                type: "error",
                center: true
            });
        },
        beforeRemove(file, fileList) {
            if ((file.size / 1024 / 1024) < 10) {
                return this.$confirm(`确定移除 ${file.name}？`);
            }
        },
        handleRemove(file, fileList) {
            this.uploadList = fileList;
        },
        uploadSure() {
            this.importVisible = false;
            this.pageNo = 1;
            this.staffGradeId = "";
            this.keyword = "";
            this.getTeacher();
        },
        transferType(ext) {
            if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片";
            if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频";
            return ext;
        },
        addChapter() {
            this.chapterName = "";
            this.chapterId = "";
            this.chapterVisible = true;
        },
        sort() {
            this.sorting = true;
        },
        cancelSort() {
            this.sorting = false;
        },
        saveSort() {
            this.chapters.forEach((n, k) => {
                n.sort = k + 1;
                n.subsectionList.forEach((j, i) => {
                    j.sort = i + 1;
                });
            });
            let data = {
                chapterVOList: this.chapters
            };
            this.$post(this.api.reorder, data).then(res => {
                this.sorting = false;
                this.getData();
            }).catch(res => {
            });
        },
        editChapter(item) {
            this.chapterId = item.id;
            this.chapterName = item.name;
            this.chapterVisible = true;
        },
        delChapter(id) {
            this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
                type: "warning"
            })
                .then(() => {
                    this.$del(`${this.api.deleteChapter}/${id}`).then(res => {
                        this.$message.success("删除成功");
                        this.getData();
                    }).catch(res => {
                    });
                })
                .catch(() => {
                });
        },
        closeSection() {
            this.isAddSection = false;
        },
        addSection(id) {
            this.chapterId = id;
            this.sectionName = "";
            this.fileUrl = "";
            this.uploadList = [];
            this.sectionId = "";
            this.isAddSection = true;
            this.sectionVisible = true;
        },
        chapterSubmit() {
            if (!this.chapterName) return this.$message.warning("请填写章节名称");
            let data = {
                cid: this.id,
                name: this.chapterName
            };
            if (this.chapterId) {
                data.id = this.chapterId;
                this.$put(this.api.editChapter, data).then(res => {
                    this.$message.success("修改成功");
                    this.chapterVisible = false;
                    this.getData();
                })
                    .catch(err => {
                    });
            } else {
                this.$post(this.api.addChapter, data).then(res => {
                    this.$message.success("添加成功");
                    this.chapterVisible = false;
                    this.getData();
                })
                    .catch(err => {
                    });
            }
        },
        sectionSubmit() {
            if (!this.sectionName) return this.$message.warning("请填写小节名称");
            if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
            if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
            let data = {
                id: this.sectionId,
                cid: this.id,
                chapterId: this.chapterId,
                name: this.sectionName,
                fileId: this.fileId,
                fileUrl: this.fileUrl,
                fileName: this.fileName,
                fileType: this.fileType,
                originalFileName: this.originalFileName
            };
            this.$post(this.api.addSubsection, data).then(res => {
                this.$message.success("添加成功");
                this.sectionVisible = false;
                this.getData();
            })
                .catch(err => {
                });
        },
        closeSwitch() {
            this.fileId = "";
            this.fileName = "";
            this.fileType = "";
            this.fileUrl = "";
            this.sectionId = "";
        },
        // 下载资源
        download(row) {
          const { fileType } = row
          // 下载ppt
          if (fileType === 'pptx') {
            this.downloadFile(row.name, row.fileUrl)
          } else if (fileType === 'mp4') {
            // 下载视频，先生成视频，再拿到视频地址去下载
            this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
              const player = new Aliplayer({
                id: "playerDownload",
                width: "100%",
                autoplay: false,
                vid: row.fileId,
                playauth: res.data.playAuth,
                encryptType: 1 //当播放私有加密流时需要设置。
              }, player => {
                this.downloadFile(row.name, player._urls[0].Url)
              })
            }).catch(res => {})
          }
        },
        preview(row) {
            if (this.transferType(row.fileType) == "视频") {
                this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
                    this.playAuth = res.data.playAuth;
                    if (this.player) {
                        this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
                    } else {
                        this.player = new Aliplayer({
                            id: "player",
                            width: "100%",
                            autoplay: false,
                            vid: row.fileId,
                            playauth: this.playAuth,
                            encryptType: 1 //当播放私有加密流时需要设置。
                        });
                    }
                }).catch(res => {
                });
            } else if (this.transferType(row.fileType) == "图片") {
                this.previewImg = row.fileUrl;
            } else if (row.fileType == "pdf") {
                this.pdfSrc = row.fileUrl;
                this.pdfVisible = true;
            } else {
                this.$get(`${this.api.getSubsection}/${row.id}`).then(res => {
                    this.previewing = true;
                    this.loadIns = Loading.service();
                    this.$route.fullPath.includes("#file") || history.pushState({ file: true }, "文件预览", "#" + this.$route.fullPath + "#file");
                    if (row.fileType == "pptx") {
                        this.isPPT = true;
                        this.isWord = false;
                        this.isExcel = false;
                    } else if (row.fileType == "doc" || row.fileType == "docx") {
                        this.isPPT = false;
                        this.isWord = true;
                        this.isExcel = false;
                    } else if (row.fileType == "xls" || row.fileType == "xlsx") {
                        this.isExcel = true;
                        this.isPPT = false;
                        this.isWord = false;
                    } else {
                        this.isPPT = false;
                        this.isWord = false;
                        this.isExcel = false;
                    }
                    this.iframeSrc = res.previewUrl;
                    this.$nextTick(() => {
                        this.iframeOnload();
                    });
                })
                    .catch(err => {
                    });
            }
        },
        editSectionName(row, chapterId) {
            this.chapterId = chapterId;
            this.sectionId = row.id;
            this.sectionName = row.name;
            this.sectionNameVisible = true;
        },
        switchFile(row, chapterId, sectionId) {
            this.uploadList = [];
            this.curFile = {
                fileId: row.fileId,
                fileName: row.fileName,
                fileType: row.fileType,
                fileUrl: row.fileUrl
            };
            this.chapterId = chapterId;
            this.sectionId = row.id;
            this.sectionName = row.sectionName;

            this.switchVisible = true;
        },
        switchSubmitFile() {
            let data = {
                id: this.sectionId,
                cid: this.id,
                chapterId: this.chapterId,
                name: this.sectionName,
                fileId: this.fileId,
                fileName: this.fileName,
                fileType: this.fileType,
                fileUrl: this.fileUrl,
                originalFileName: this.originalFileName
            };
            this.$put(this.api.editSubsection, data).then(res => {
                this.$message.success("更换成功");
                this.switchVisible = false;
                this.getData();
            })
                .catch(err => {
                });
        },
        switchSubmit() {
            if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
            if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
            if (this.transferType(this.curFile.fileType) == "视频") {
                let data = {
                    videoIdList: [this.sectionId]
                };
                this.$del(`${this.api.removeVideo}/${this.curFile.fileId}`).then(res => {
                    this.switchSubmitFile();
                }).catch(res => {
                });
            } else {
                this.$del(`${this.api.fileDeletion}?keys=${this.curFile.fileName}`).then(res => {
                    this.switchSubmitFile();
                }).catch(res => {
                });
            }
        },
        delSection(row) {
            this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
                type: "warning"
            })
                .then(() => {
                    this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => {
                        this.$message.success("删除成功");
                        this.getData();
                    }).catch(res => {
                    });
                })
                .catch(() => {
                });
        },
        sortChapter(row, type, disabled, index) {
            if (!disabled) {
                if (type == "up") {
                    let tempItem = this.chapters.splice(index - 1, 1)[0];
                    this.chapters.splice(index, 0, tempItem);
                } else {
                    let tempItem = this.chapters.splice(index + 1, 1)[0];
                    this.chapters.splice(index, 0, tempItem);
                }
            }
        },
        sortSection(chapterIndex, type, disabled, index) {
            if (!disabled) {
                let list = this.chapters[chapterIndex].subsectionList;
                if (type == "up") {
                    let tempItem = list.splice(index - 1, 1)[0];
                    list.splice(index, 0, tempItem);
                } else {
                    let tempItem = list.splice(index + 1, 1)[0];
                    list.splice(index, 0, tempItem);
                }
                this.chapters[chapterIndex].subsectionList = list;

            }
        },
        sectionNameSubmit() {
            if (!this.sectionName) return this.$message.warning("请填写小节名称");
            let data = {
                id: this.sectionId,
                cid: this.id,
                chapterId: this.chapterId,
                name: this.sectionName
            };
            this.$put(this.api.editSubsection, data).then(res => {
                this.$message.success("修改成功");
                this.sectionNameVisible = false;
                this.getData();
            })
                .catch(err => {
                });
        },
        closePlayer() {
            this.playAuth = "";
            this.player.pause();
        },
        closeIframe() {
            this.iframeSrc = "";
            this.showMask = false;
            this.showMask1 = false;
            this.showMask2 = false;
            this.previewing = false;
        }
    }
};
</script>

<style scoped lang="scss">
.action-btn{
    color: #9076FF;
    font-size: 14px;
    border: #9076FF 1px solid;
    background-color: #fff;
    border-radius: 4px;
}

.btns {
    position: absolute;
    top: 12px;
    right: 24px;

    .el-button {
        font-size: 14px;
    }
}

.sort-icon {
    font-size: 24px;
    cursor: pointer;

    &.disabled {
        color: #ccc;
        cursor: not-allowed
    }
}

.el-image-viewer__wrapper {
    transform: translateY(-10px);
    transition: transform .5s;

    &.active {
        transform: translateY(0)
    }
}

.el-image-viewer__close {
    z-index: 10000;
    top: 15px;
    right: 15px;

    &.doc-close {
        i {
            color: #000 !important;
        }
    }
}

.player {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px !important;
    height: 600px !important;
}
.player-download {
  position: absolute;
  top: -9999px;
}

.fileIframe {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.mask {
    z-index: 1000;
    position: fixed;
    background-color: rgb(57, 58, 61);
}

.word-mask {
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 100%;
    background-color: rgb(243, 242, 241);
}

.word-mask1 {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #2b579a;
}

.word-mask2 {
    z-index: 1000;
    position: fixed;
    background-color: transparent;
}

.excel-mask1 {
    z-index: 9;
    position: absolute;
    top: 0;
    left: 20%;
    width: 80%;
    background-color: #107c41;
}

.page {
    position: relative;
    padding: 24px;
    background-color: #fff;
    border-radius: 8px;

    .tool {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;

        .filter {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            flex: 1;

            li {
                display: inline-flex;
                align-items: center;
                margin-right: 30px;

                label {
                    margin-right: 6px;
                    font-size: 14px;
                    line-height: 14px;
                    color: rgba(0, 0, 0, .65);
                    white-space: nowrap;
                }
            }
        }

        &.mul {
            margin-bottom: 0;

            .filter {
                width: 1200px;

                li {
                    margin-bottom: 24px;
                }
            }
        }
    }
}
</style>