<template>
    <div class="container">
        <transition name="left">
        <div class="left-content" v-if="!menuShow">
            <!-- 排班管理 -->
            <div class="work-force">
                <div class="title">
                    <p class="titleText" text="排班管理" style="font-family: maleGod">
                        排班管理
                    </p>
                    <!-- <p class="work-time">
                        <el-date-picker v-model="workTime" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </p> -->
                </div>
                <!-- 当前值班人员 -->
                <div class="nowWork">
                    <p class="titleText" text="当前值班人员" style="font-family: maleGod;font-size: 14px;">
                        当前值班人员
                    </p>
                    <div class="work-items">
                        <p class="work-item">
                            <img src="../assets/images/itemImg.png" alt="">
                            <span>刘伟</span>
                        </p>
                        <p class="work-item">
                            <img src="../assets/images/itemImg.png" alt="">
                            <span>李坤霞</span>
                        </p>
                        <p class="work-item">
                            <img src="../assets/images/itemImg.png" alt="">
                            <span>蒋玲</span>
                        </p>
                    </div>
                </div>
                <!-- 中午值班人员 -->
                <div class="wuWork">
                    <p class="titleText" text="中午值班人员" style="font-family: maleGod;font-size: 14px;">
                        中午值班人员
                    </p>
                    <div class="work-items">
                        <p class="work-item">
                            <img src="../assets/images/itemImg.png" alt="">
                            <span>刘伟</span>
                        </p>

                    </div>
                </div>
                <div class="itemBtn">
                    <span>查看排班</span>
                </div>
            </div>
            <!-- 起点业务 -->
            <div class="start-business">
                <div class="title">
                    <p class="titleText" text="起点业务" style="font-family: maleGod">
                        起点业务
                    </p>
                </div>
                <div style="width: 100%;height:calc(100% - 40px)">
                    <dv-scroll-board :config="config" style="height:100%;width:100%" />
                </div>
            </div>
            <!-- 学习资料 -->
            <div class="study-means">
                <div class="title">
                    <p class="titleText" text="学习资料" style="font-family: maleGod">
                        学习资料
                    </p>
                </div>
                <div style="width: 100%;height:calc(100% - 40px)">

                    <dv-scroll-board :config="studyData" style="height:100%;width:100%" />
                </div>
            </div>
        </div>
        </transition>
        <transition name="right">
        <div class="right-content" v-if="!menuShow">
            <!-- 任务通知 -->
            <div class="notice">
                <div class="title">
                    <p class="titleText" text="任务通知" style="font-family: maleGod">
                        任务通知
                    </p>
                </div>
                <!-- 交办的任务 -->
                <div class="my-notice">
                    <p class="titleText" text="我交办的任务"
                        style="font-family: maleGod;margin-bottom: 10px;font-size: 14px;">
                        我交办的任务
                    </p>
                    <div class="myBox">
                        <div class="noticeBg" v-for="(s, i) in myNotice1">
                            <section>
                                <p :class="'p' + i">{{ s.num }}</p>
                                <p class="name1">{{ s.name }}</p>
                            </section>
                        </div>
                    </div>
                </div>
                <div class="jiao-notice">
                    <p class="titleText" text="我承办的任务" style="font-family: maleGod;margin:10px 0 10px;font-size: 14px;">
                        我承办的任务
                    </p>
                    <div class="myBox">
                        <div class="noticeBg" v-for="(s, i) in myNotice2">
                            <section>
                                <p :class="'p' + i">{{ s.num }}</p>
                                <p class="name1">{{ s.name }}</p>
                            </section>
                        </div>
                    </div>
                </div>


            </div>
            <!-- 服务 -->
            <div class="service">
                <div class="title">
                    <p class="titleText" text="服务" style="font-family: maleGod">
                        服务
                    </p>
                </div>
                <div class="service-event">
                    <div class="event-item" v-for="(s, i) in serviceList" :key="i">
                        <p class="event-title">{{ s.name }}</p>
                        <p>
                            <span :class="'span' + i">{{ s.num }}</span>
                            <span class="unit">件</span>
                        </p>
                    </div>
                </div>
                <p class="titleText" text="疑似不规范的行为" style="font-family: maleGod;margin:10px 0 10px;font-size: 14px;">
                    疑似不规范的行为
                </p>
                <!-- 画面 -->
                <div class="service-frame">
                    <div class="frame-item" v-for="(s, i) in serviceFrame">
                        <div class="frame">

                        </div>
                        <div class="frame-cont">
                            <ul>
                                <li>{{ s.time }}</li>
                                <li>{{ s.adress }}</li>
                                <li style="color:#ebad22">{{ s.statu1 }}</li>
                                <li style="color:#0e745c">{{ s.statu2 }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        </transition>
    </div>
</template>
<script>

export default {
    name: 'smartPage',
    components: {
    },
    data() {
        return {
            menuShow:true,
            // 服务画面
            serviceFrame: [
                {
                    time: '2023-02-03 16:23',
                    adress: '国网雨花营业厅',
                    statu1: '离岗异常',
                    statu2: '已办理'
                },
                {
                    time: '2023-02-03 16:23',
                    adress: '国网雨花营业厅',
                    statu1: '离岗异常',
                    statu2: '已办理'
                },
                {
                    time: '2023-02-03 16:23',
                    adress: '国网雨花营业厅',
                    statu1: '离岗异常',
                    statu2: '已办理'
                }
            ],
            // 服务情况事件
            serviceList: [
                {
                    name: '已响应事件',
                    num: 4
                },
                {
                    name: '未响应事件',
                    num: 0
                },
                {
                    name: '累计未响应事件',
                    num: 0
                }
            ],
            // 
            workTime: '',
            config: {
                header: ['排名', '业务类型', '占比'],
                data: [
                    [1, '过户', '53.85%'],
                    [2, '电费结算协议变更', '19.23%'],
                    [3, '更名', '3.5%'],
                    [4, '低压居民新装增000', '15.30%'],
                    [5, '客户基础信息000', '3.85%'],
                    [6, '低压非居民新装000', '3.85%'],
                    [7, '过户', '3.85%'],
                    [8, '更名', '3.85%'],
                    [9, '电费', '3.85%'],
                    [10, '过户', '3.85%']
                ],
                oddRowBGC: 'transparent',
                evenRowBGC: '#102c50',
                waitTime: 10000,
                headerBGC: 'transparent',
                rowNum: 6,
                columnWidth: [80],
                align: ['center']
            },
            studyData: {
                header: ['序号', '标题', '时间'],
                data: [[1, '关于进一步规范...', '2023-12-12 14:58'], [2, '关于重申在全市... ', '2023-12-12 14:58'], [3, '南京供电公司营...', '2023-12-12 14:58'], [4, '关于重申在全市...', '2023-12-12 14:58']],
                oddRowBGC: 'transparent',
                evenRowBGC: '#102c50',
                waitTime: 10000,
                headerBGC: 'transparent',
                rowNum: 4,
                columnWidth: [80],
                align: ['center']
            },
            // 我交办的任务
            myNotice1: [
                {
                    name: '任务总数',
                    num: 3,
                },
                {
                    name: '已完成',
                    num: 3,
                },
                {
                    name: '未完成',
                    num: 0
                }
            ],
            // 我承办的任务
            myNotice2: [{
                name: '任务总数',
                num: 2,
            },
            {
                name: '已完成',
                num: 1,
            },
            {
                name: '未完成',
                num: 1
            }
            ]
        }
    },
    mounted(){
    },
    methods:{
        handleShow(){
            this.menuShow = false
        },
        menuShow1(){
            this.menuShow = true
        }
    }
}
</script>
<style lang="less" scoped>
.el-date-editor.el-input {
    width: 100px;

}

.el-input__inner {
    height: 30px !important;
}

/deep/ .dv-scroll-board {
    color: #f8fcfd;
}

/deep/ .dv-scroll-board .header {
    background-image: url(../assets/images/stratHead.png) !important;
}

/deep/ .start-business .dv-scroll-board .rows .row-item>div:nth-child(3) {
    font-family: maleGod;
    color: #40accd;
    font-size: 14px;
}
.container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.left-content,
.right-content {
    // position: absolute;
    width: 20.6%;
    // top: 0;
    height: 100%;
}

.left-content>div,
.right-content>div {
    width: 100%;
    background-image: url(../assets/images/border.png);
    background-size: 100% 100%;
    margin-bottom: 5px;
    padding: 13px;
    box-sizing: border-box;
}

.left-content,
.right-content {



    // 左边内容
    .work-force {
        height: 39%;

        .itemBtn {
            width: 356px;
            height: 35px;
            text-align: center;
            background-size: 100% 100%;
            margin: 0 auto;
            line-height: 35px;
            color: #fff;
            font-size: 14px;
            background-image: url(../assets/images/itemBtn.png);
        }

        .nowWork,
        .wuWork {
            .titleText {
                margin-bottom: 3px;
            }

            .work-items {
                display: flex;
                justify-content: space-evenly;

                .work-item>img {
                    width: 83px;
                    height: 76px;
                }

                span {
                    display: block;
                    text-align: center;
                    color: #fff;
                    font-size: 14px;
                }
            }
        }
    }

    .start-business {
        height: 35%;
    }

    @media screen and (min-height:980px) {
        .wuWork>.titleText {
            margin-top: 15px;
        }

        .nowWork,
        .wuWork {
            .titleText {
                margin-bottom: 15px !important;
            }

        }

        .itemBtn {
            margin: 8px auto 0 !important;
        }
    }

    .study-means {
        height: 24.8%;
        margin-bottom: 0;
    }

    // 标题样式
    .title {
        width: 100%;
        background-image: url(../assets/images/border-title.png);
        height: 30px;
        background-size: 100% 100%;
        display: flex;
        padding-left: 8%;
        box-sizing: border-box;
        color: #fff;
        font-family: 'maleGod';
        align-items: center;
        letter-spacing: 1px;
        margin-bottom: 10px;

    }

    // 右边内容
    .notice {
        height: 31.6%;

        .my-notice,
        .jiao-notice {
            width: 100%;
            height:41%;
            .myBox {
                display: flex;
                justify-content: space-around;
            }

            .p0 {
                color: #40accd;
            }

            .noticeBg>section>p:nth-child(1) {
                font-size: 18px;
                font-family: maleGod;
            }

            .noticeBg {
                background-image: url(../assets/images/notice-item.png);
                background-size: 100% 100%;
                width: 123px;
                height: 68px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;

                .name1 {
                    color: #f8fcfd;
                    font-size: 14px;
                    margin-top: 5px;
                }

                .p1 {
                    color: #54b441
                }

                .p2 {
                    color: #b8894b;
                }
            }
        }

    }

    .service {
        height: 67.5%;

        .service-event {
            display: flex;
            justify-content: space-around;

            .event-item>p:nth-child(2) {
                text-align: center;
                font-size: 26px;

            }

            .event-item {
                background-image: url(../assets/images/eventBg.png);
                width: 116px;
                height: 73px;
                padding: 8px;
                position: relative;
                box-sizing: border-box;
                font-size: 14px;
                color: #f8fcfd;

                .unit {
                    position: absolute;
                    bottom: 15px;
                    right: 10px;
                    font-size: 14px;
                }

                .span0,
                .span1,
                .span2 {
                    font-family: maleGod;
                    color: #40accd
                }
            }

        }

        .service-frame {
            width: 100%;
            height: calc(100% - 148px);

            .frame-item {
                background-image: url(../assets/images/undefinedBg.png);
                background-size: 100% 100%;
                height: 30%;
                margin-bottom: 13px;
                padding: 10px 15px 10px;
                box-sizing: border-box;
                width: 100%;
                display: flex;

                .frame {
                    background-image: url(../assets/images/frame.png);
                    background-size: 100% 100%;
                    height: 100%;
                    width: 173px;
                }

                .frame-cont {
                    // width: calc(100% - 203px);
                    width:calc(100% - 173px);
                    ul {
                        width:100%;
                        height:100%;
                        
                        li{
                            padding-left:30px;
                            padding-top:12px;
                            box-sizing:border-box;
                            height:22%;
                            display:flex;
                            // margin-top:2px;
                            align-items:center;
                            font-size:14px;
                            color:#fff;
                        }
                    }
                }
            }
        }
    }
}

.titleText {
    position: relative;
    display: inline-block;
    color: #fff;
}

// 渐变颜色
.titleText:before {
    content: attr(text);
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    color: rgb(163, 227, 245);
    -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
}
//left动画
@keyframes donghua1 {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}
.left-leave,
.left-leave-active,
.left-leave-to {
  animation: donghua1 1s linear;
}

.left-enter,
.left-enter-active,
.left-enter-to {
  animation: donghua1 1s linear reverse;
}
//right动画
@keyframes donghua2 {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
.right-leave,
.right-leave-active,
.right-leave-to {
  animation: donghua2 1s linear;
}

.right-enter,
.right-enter-active,
.right-enter-to {
  animation: donghua2 1s linear reverse;
}
</style>