<template>
    <div class="notebookBox">
        <div class="notebookMainBox">
            <el-row :gutter="24">
                <el-col :span="24">
                    <div class="selectNotebookBox">
                        <div class="addNotebookBox">
                            <el-button type="primary" @click="addNotebookEvent"><font style="font-size:22px" class="el-icon-plus"></font></el-button>
                        </div>
                    </div>
                    <div class="notebookTable">
                        <el-table :data="notebookList" height="740"  >
                            <el-table-column align="left" width="80" label="查看">
                                <template slot-scope="scope">
                                        <i @click="checkNotebookItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-s-management"></i>
                                </template>
                            </el-table-column>
                            <el-table-column prop="projectName" align="left" label="项目名称">
                            </el-table-column>
                            <el-table-column prop="count" align="center" label="笔记数量">
                            </el-table-column>
                        </el-table>
                    </div>
                
                </el-col>
            </el-row>
        </div>
        
        <div class="notebookDialogBox">
            <div class="addNotebookInfoDialog">
                <el-dialog width="80%" top="2vh" :visible.sync="addNotebookInfoDialogVisible">
                    <addNotebook></addNotebook>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import addNotebook from "./addNotebook.vue"
export default {
    // 笔记本
    data() {
        return {
            notebookList:[
                {projectName:"张江双创", count:9},
                {projectName:"张江双创二期", count:10},
                {projectName:"徐汇教育局", count:12},
                {projectName:"徐汇二期", count:3},
                {projectName:"深圳艺校三期", count:6},
                {projectName:"深圳艺校四期", count:0},
            ],
            addNotebookInfoDialogVisible:false,
        }
    },
    components: { addNotebook },
    mounted:function(){
        this.initPscChart();
        this.initDayChart();
    },
    methods:{
        checkNotebookItem:function() {

        },
        addNotebookEvent:function() {
            this.addNotebookInfoDialogVisible = true;
        },
        initPscChart:function() {
            

        }
    }    
}
</script>

<style>

.notebookBox {
    width: 100%;   
}
.notebookBox .notebookTable {
    width: 100%;
    height: 750px;
}

.notebookBox .notebookTable {
    width: 100%;
    box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
    background-color: rgb(255 255 255 / 15%);
    border-radius: 6px;
}
/*最外层透明*/
.notebookBox .notebookTable .el-table, .el-table__expanded-cell{
   background-color: transparent;
}
/* 表格内背景颜色 */
.notebookBox .notebookTable .el-table th, .el-table tr, .el-table td {
   background-color: transparent;
   color: aliceblue;
}

.notebookBox .notebookTable .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(247, 247, 247, 0.205);
}

.notebookBox .selectNotebookBox {
    width: 100%;
    height: 60px;
}
.notebookBox .selectNotebookBox .addNotebookBox {
    display: inline-block;
    border-radius: 10px;
    height: 45px;
}
.notebookBox .selectNotebookBox .addNotebookBox .el-button {
    height: 100% !important;
    width: 100% !important;
    border-radius: 0px;
    background-color: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 35%);
}

/* 弹出框 */
.notebookDialogBox .el-dialog, .el-pager li {
    /* background-color: rgba(206, 206, 206, 0.486); */
    border-radius: 40px;
    box-shadow: 0 2px 50px 0 rgba(255, 255, 255, 0.699);
    background: url('../../assets/login/logbackground.png') no-repeat;
}
.notebookDialogBox .el-dialog__header {
    padding:0 0 0 0;
}

</style>