<template>
  <div class="mask" v-if="isShow">
      <div class="dialog-wrapper">
          <div class="dialog-body table-list">
              <triangle>
                <slot>
                    <div class="common-title">
                        <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
                        <span class="title">{{dialogData.title}}</span>
                        <img class="bg" src="/images/screen/title02_bg.png" alt="">
                        <img src="/images/screen/icon-close.png" alt="" class="close" @click="closeDialog">
                    </div>
                    <dialog-bar-demand class="dialog-echarts-box" v-if="dialogData.type===1"/>
                    <dialog-line-interaction class="dialog-echarts-box" v-if="dialogData.type===2"/>
                    <div class="list-of-body">
                        <ul class="body-title" v-if="dialogData.type===1">
                            <li class="f2">序号</li>
                            <li class="f5">机构名称</li>
                            <li class="f3">互动频次</li>
                        </ul>
                        <ul class="body-title" v-if="dialogData.type===2">
                            <li class="f2">序号</li>
                            <li class="f5">统计时间</li>
                            <li class="f3">点播总量</li>
                        </ul>
                        <div class="body-content">
                            <div v-if="dialogData.type===1">
                                <ul class="body-item" v-for="(item,index) in demandList" :key="index">
                                    <li  class="f2">{{index+1}}</li>
                                    <li  class="f5">{{item.name}}</li>
                                    <li  class="f3">{{item.num}}</li>
                                </ul>
                            </div>
                            <div v-if="dialogData.type===2">
                                <ul class="body-item" v-for="(item,index) in actionList" :key="index">
                                    <li  class="f2">{{index+1}}</li>
                                    <li  class="f5">{{item.dateTime}}</li>
                                    <li  class="f3">{{item.num}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </slot>
            </triangle>
            
          </div>
      </div>
      
  </div>
</template>

<script>
import triangle from './slot/triangle'
import dialogBarDemand from './echarts/bar'
import dialogLineInteraction from './echarts/line'
export default {
    components:{
        triangle,
        dialogBarDemand,
        dialogLineInteraction
    },
    props: {
        isShow: {
            type: Boolean
        },
        dialogData: {
            type: Object,
        }
    },
    data() {
        return {
            demandList:[
                { name:'北京市政府',num:'90'},
                { name:'天津市政府',num:'85'},
                { name:'呼和浩特市政府',num:'83'},
                { name:'石家庄市政府',num:'75'},
                { name:'合肥市政府',num:'73'},
                { name:'哈尔滨市政府',num:'63'},
                { name:'廊坊市政府',num:'56'},
                { name:'临沂市政府',num:'52'},
                { name:'忻州市政府',num:'40'},
                { name:'黑龙江市政府',num:'30'},
            ],
            actionList:[
                { dateTime:'2021/01/01',num:'18'},
                { dateTime:'2021/01/02',num:'19'},
                { dateTime:'2021/01/03',num:'22'},
                { dateTime:'2021/01/04',num:'23'},
                { dateTime:'2021/01/05',num:'25'},
                { dateTime:'2021/01/06',num:'26'},
                { dateTime:'2021/01/07',num:'28'},
                { dateTime:'2021/01/08',num:'30'},
                { dateTime:'2021/01/09',num:'36'},
                { dateTime:'2021/01/10',num:'38'},
                { dateTime:'2021/01/11',num:'40'},
                { dateTime:'2021/01/12',num:'42'},
                { dateTime:'2021/01/13',num:'44'},
                { dateTime:'2021/01/14',num:'45'},
                { dateTime:'2021/01/15',num:'46'},
                { dateTime:'2021/01/16',num:'47'},
                { dateTime:'2021/01/17',num:'49'},
                { dateTime:'2021/01/18',num:'52'},
                { dateTime:'2021/01/19',num:'56'},
                { dateTime:'2021/01/20',num:'59'},
                { dateTime:'2021/01/21',num:'63'},
                { dateTime:'2021/01/22',num:'66'},
                { dateTime:'2021/01/23',num:'68'},
                { dateTime:'2021/01/24',num:'69'},
                { dateTime:'2021/01/25',num:'73'},
                { dateTime:'2021/01/26',num:'75'},
                { dateTime:'2021/01/27',num:'78'},
                { dateTime:'2021/01/28',num:'80'},
                { dateTime:'2021/01/29',num:'83'},
                { dateTime:'2021/01/30',num:'85'},
                { dateTime:'2021/01/31',num:'90'},
            ]
        }
    },
    mounted() {
    },
    methods: {
        closeDialog() {
            this.$emit('update:isShow', false)
        }
    }
}
</script>

<style lang="scss">
.mask {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: auto;
    z-index: 100;
    .dialog-wrapper {
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translate(-50%, 0.1rem);
        font-size: 0.32rem;
        color: #62BAFF;
        width: 50vw;
        height: 50vh;
        padding: .24rem;
        margin: 0;
        background: rgba(0,19,45,0.9);
        box-shadow: -0.01rem 0 .1rem #62baff33, .01rem 0 .1rem #62baff33, 0 -.01rem .1rem #62baff33, 0 .01rem .1rem #62baff33;
        .close {
            position: absolute;
            right: 0.12rem;
            top: 0.12rem;
            width: 0.28rem;
            height: 0.28rem;
            z-index: 101;
        }
        .dialog-body {
            width: 100%;
            .triangle {
                padding-bottom: .32rem;
            }
            .list-of-body {
                height: calc(34vh - 1rem);
                padding-top: 0;
                overflow:hidden;
                .body-content {
                    height: 100%;
                }
            }
        }
        .dialog-echarts-box{
            height: 16vh;
            width: 100%;
            display: inline-block;
            box-sizing: border-box;
        }

    }
}
</style>