<template>
    <div class="container">
        <div class="row" style="margin-top:20px;">
            <div class="col-sm-9" style="padding:0 40px;">
                <tabs :data="tabs" @click="tabClick"></tabs>
                <div class="safe" v-show="active === 0">
                    <div class="safe-item">
                        <span>邮箱：未绑定</span>
                        <button class="btn btn-primary">绑定</button>
                    </div>
                    <div class="safe-item">
                        <span>手机号：未绑定</span>
                        <button class="btn btn-primary">绑定</button>
                    </div>
                </div>
                <div class="password" v-show="active === 1">
                    <form class="form-horizontal" style="margin-top:20px;">
                        <div class="form-group">
                            <label for="oldpassword" class="col-sm-2 control-label">原密码：</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="oldpassword" placeholder="请输入原密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newpassword" class="col-sm-2 control-label">新密码：</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="newpassword" placeholder="请输入新密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="confirm" class="col-sm-2 control-label">确认新密码：</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="confirm" placeholder="请再次输入新密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button class="btn btn-primary" style="width:80px;">确定</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="msg" v-show="active === 2">
                    <div class="msg-item">
                        <span>邀请我去翻译</span>
                        <myswitch @click="switchClick" class="pull-right" :open="true"></myswitch>
                    </div>
                    <div class="msg-item">
                        <span>关注的任务有了新翻译</span>
                        <myswitch @click="switchClick" class="pull-right" :open="false"></myswitch>
                    </div>
                    <div class="msg-item">
                        <span>有人评论了我的翻译</span>
                        <myswitch @click="switchClick" class="pull-right" :open="true"></myswitch>
                    </div>
                    <div class="msg-item">
                        <span>有人觉得我的译文很棒</span>
                        <myswitch @click="switchClick" class="pull-right" :open="false"></myswitch>
                    </div>
                    <div class="msg-item">
                        <span>有人关注了我</span>
                        <myswitch @click="switchClick" class="pull-right" :open="true"></myswitch>
                    </div>
                </div>
                <div class="blacklist" v-show="active === 3">
                    <div class="blacklist-item" v-for="n in 4">
                        <img src="../assets/headimg.png">
                        <span>王大白</span>
                        <a href="javascript:void 0;">取消屏蔽</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <list :data="list" :active="4"></list>
            </div>
        </div>
    </div>
</template>

<script>
    import List from './SideList.vue'
    import Tabs from './Tabs.vue'
    import Myswitch from './Switch.vue'
    import {SIDE_LIST} from '../const'

    export default{
        components:{
            List,
            Tabs,
            Myswitch
        },
        data(){
            return {
                list:SIDE_LIST,
                tabs:[{
                    title:'账号安全'
                },{
                    title:'设置密码'
                },{
                    title:'消息邮件'
                },{
                    title:'黑名单'
                }],
                active:0
            }
        },
        methods:{
            tabClick(idx){
                if(this.active !== idx)this.active = idx;
            },
            switchClick(isOpen){

            }
        }
    }
</script>

<style scoped>
    .safe-item{
        line-height:32px;
        margin-top:10px;
        width:300px;
    }

    .safe-item button{
        float:right;
    }

    .msg-item{
        line-height:32px;
        margin-top:15px;
        width:400px;
    }

    .blacklist-item{
        font-size:0;
        line-height:32px;
        margin-top:10px;
    }

    .blacklist-item img{
        width:32px;
        height:32px;
    }

    .blacklist-item span{
        font-size:14px;
        vertical-align: middle;
        margin-left:10px;
    }

    .blacklist-item a{
        float:right;
        font-size:14px;
        color:#000;
        text-decoration: underline;
    }
</style>
