<template>
    <div class="screen-container">
        <div class="page-title">
            <p> - 播放数据统计 - </p>
        </div>
        <div class="user-info">
            <img src="/images/screen/user.png" alt="" class="icon-user">
            <span class="user-name">中国国家博物馆</span>
            <img src="/images/screen/close.png" alt="" class="signup">
            <img src="/images/screen/manager.png" @click="goManager" alt="" class="manager">
        </div>
        <div class="middel-part">
            <!--地区展板播放统计-->
            <areas class="table-list"></areas>
            <!--中间地图-->
            <div class="map-container">
                <borderNums></borderNums>
                <mapDiv></mapDiv>
            </div>
            <!--全国点播板块-->
            <top10 class="table-list"></top10>
        </div>
        <div class="echartspanel">
            <demand class="echarts-box left" @itemClick="itemClick"></demand>
            <interaction class="echarts-box right" @itemClick="itemClick"></interaction>
        </div>
        <!-- 弹框 -->
        <m-dialog :is-show.sync="showDialog" :dialog-data="dialogData"/>
    </div>
</template>
<script>
  import {
    demand,
    interaction,
    areas,
    top10,
    mapDiv,
    borderNums,
    MDialog
  } from '../components'
  export default {
    data(){
      return{
          showDialog:false,
          dialogData:{} // 1 是互动频次弹框 2 是趋势图弹框
      }
    },
    components:{demand, interaction , areas, top10, mapDiv, borderNums,MDialog},
    mounted(){
      let clientWidth = document.body.clientWidth;
      clientWidth = clientWidth>1920? 1920: clientWidth
      let fontSize =  clientWidth/1920 * 100
      document.getElementsByTagName("html")[0].style.fontSize = fontSize + 'px'
    },
    methods:{
        // 接收柱状图传来的数据
        itemClick(params){
            this.showDialog = true
            this.dialogData = params
        },
        goManager(){
            location.href="http://121.4.56.121:84"
        }
    }
  }
</script>
<style lang="scss">
.screen-container{
    ::-webkit-scrollbar {
        width: 8px;
        height: 10px;
        //background-color: rgba(255, 255, 255, 0.2) !important;
    }
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #08214c;
    /*background: url("/images/screen/bg.png") no-repeat;*/
    background: url("/images/screen/bg@1x.png") no-repeat;
    background-size: 100% 100%;
    padding: 0 0.32rem;
    box-sizing: border-box;
    .page-title{
        width: 100%;
        height: 0.67rem;
        background: url("/images/screen/top_bg.png") no-repeat;
        background-size: 100% 100%;
        p{
            font-size: 0.32rem;
            color: #62BAFF;
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0.1rem);
            margin: 0;
        }
    }
    .user-info{
        position: absolute;
        right: 0.56rem;
        top: 0.31rem;
        display: flex;
        align-items: center;
        .icon-user,.signup{
            width: 0.28rem;
            height: 0.28rem;
        }
        .user-name{
            font-size: 0.18rem;
            color: #4FFFFD;
            margin-left: 0.12rem;
        }
        .signup{
            margin-left: 0.4rem;
        }
        .manager {
            cursor: pointer;
            width: .32rem;
            height: .32rem;
            margin-left: .2rem;
        }
    }
    .echartspanel{
        height: 34vh;
        width: 100%;
        bottom: 0rem;
        padding: 0.24rem 0;
        box-sizing: border-box;
        .echarts-box{
            height: 100%;
            width: 50%;
            display: inline-block;
            box-sizing: border-box;
           &.left{
               padding-right: 0.12rem;
               float: left;
           }
           &.right{
               padding-left: 0.12rem;
               float: right;
           }
        }
    }
    .middel-part{
        display: flex;
        margin-top: 4.16vh;
        height: 56.48vh;
        justify-content: space-between;
        .table-list{
            width: 25vw;
            height: 100%;
        }
    }
    .table-list{
        .list-of-body{
            padding-top: 0.7rem;
            height: 100%;
            box-sizing: border-box;
            ul{
                display: flex;
                align-items: flex-start;
                font-size: 0.16rem;
                padding-left: 0.24rem;
                box-sizing: border-box;
                li{
                    line-height: 0.4rem;
                    &.f1{
                       width: 10%;
                    }
                    &.f2{
                       width: 20%;
                    }
                    &.f3{
                        width: 30%;
                    }
                    &.f5{
                        width: 50%;
                    }
                    &.f6{
                        width: 60%;
                    }
                    &.f7{
                        width: 70%;
                    }
                    div.title{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .body-title{
                color: #62BAFF;
                margin-bottom: 0.07rem;
            }
            .body-content{
                height: calc(100% - 0.8rem);
                overflow-y: auto;
                .body-item{
                    height: 0.4rem;
                    background-color: #62baff33;
                    margin-bottom: 0.04rem;
                    color: #4EFFFD ;
                }
            }
        }
    }
    .common-title{
        .icon-title{
            position: absolute;
            top: 0.10rem;
            left: 0.1rem;
            width: 0.4rem;
        }
        .title{
            position: absolute;
            top: 0.20rem;
            left: 0.52rem;
            font-size: 0.2rem;
            line-height: 0.2rem;
            color:#4EFFFD ;
        }
        .bg{
            position: absolute;
            width: calc(100% - 0.48rem);
            left:  0.24rem;
            top: 0.24rem;
        }
    }
    .map-container{
       flex: 1;
       height: 100%;
       position: relative;
       padding-top: 0.7rem;
       box-sizing: border-box;
    }
}
</style>
