<template>
<div class="port-detail">
    <Radio-group type="button" v-model="channel" size="large" class="channel" @on-change="getChannel">
        <Radio label="IOS"></Radio>
        <Radio label="Android"></Radio>
        <Radio label="PC"></Radio>
        <Radio label="WAP"></Radio>
    </Radio-group>

    <all-data :cId="cId"></all-data>
    <port-chart :cId="cId"></port-chart>
</div>

</template>
<script>
import * as service from 'service.wap';
import headerTitle from 'wap/header-title';
import allData from 'wap/portDetail/all-data';
import portChart from 'wap/portDetail/port-chart';
import * as _ from 'lodash';

let channelId = {
    'IOS': 1,
    'Android': 2,
    'PC': 3,
    'WAP': 4
};

export default {
    name: 'port-detail',
    data() {
        return {
            channel: 'IOS',
            cId: this.$store.get('channel') || 1
        };
    },
    created() {
        _.each(channelId, (item, key) => {
            if (item == this.$store.get('channel')) {
                this.channel = key;
            }
        });
        this.$store.set('channel', channelId[this.channel]);
    },
    methods: {
        getChannel(e) {
            this.cId = channelId[e];
            this.$store.set('channel', this.cId);
        }
    },
    components: {headerTitle, allData, portChart}
}
</script>
<style lang="scss">
body {
    margin: 0;
    padding: 0;
    background: url(../img/back.png);
}

.port-detail {
    display: flex;
    flex-direction: column;

    .channel {
        margin: 0 auto 20px;
        text-align: center;
        display: block;
    }
    .ivu-radio-group-button .ivu-radio-wrapper{
        background: transparent;
        color: #fff;
        height: 45px;
        line-height: 43px;
        width: 70px;
        padding: 0;
        text-align: center;
    }
    .ivu-radio-wrapper-checked{
        background: #fff!important;
        color: #000!important;
    }

    .expression{
        border:1px solid #fff;
        border-radius: 5px;
        width: 98%;
        height: 300px;
        box-sizing: border-box;
        color: #fff;
        margin: 0 1% 60px;
        .marTop{
            margin-top: 10px;
        }
        .red{
            color: red;
        }
        .green{
            color: green;
        }
        .cheng{
            color: #ff641c;
        }
        .bigger{
            font-size: 16px;
        }
        .left{
            width: 17%;
            line-height: 300px;
            height: 100%;
            float: left;
        }
        .right{
            width: 83%;
            height: 100%;
            line-height: 300px;
            float: left;
            position: relative;
            .kuohao{
                width: 20px;
                height: 80%;
                vertical-align: middle;
            }
            .container{
                position:absolute;
                width: 100%;
                height: 100%;
                padding-left: 20px;
                box-sizing: border-box;
                top:0;
                .wrap{
                    width: 22.5%;
                }
                .top,.bottom{
                    height: 50%;
                    line-height: 150px;
                }
            }
            .last{
                width: 28%;
                height: 100%;
                vertical-align: middle;
                display: inline-block;
                position: relative;
                .top2,.bottom2{
                    height: 50%;
                    line-height: 75px;
                    .wrap{
                        width: 100%;
                    }
                }
            }
        }
        .wrap{
            display:inline-block;
            vertical-align: middle;
            line-height: 1;
            width: 100%;
            text-align: center;
            padding:0 5px;
            .border{
                border-bottom:1px solid #fff;
                padding-bottom:5px;
            }
            .noborder{
                p:after{
                    content:'';
                    display:block;
                    background:url(../img/point.png);
                    height: 6px;
                    background-size: 100% 100%;    
                    margin-bottom: -2px;
                    margin-top: 4px;
                }
            }
            .noimg{
                border: none!important;
                p:after{
                    background:none;
                }
            }
            span{
                margin-top: 5px;
                display: inline-block;
            }
            p{
                font-size: 12px;
            }
        }
    }
}
</style>