<template>
    <div>
        <div class="container" style="position: relative;min-height:100%;">
            <div class="row" style="padding-top:24px;padding-bottom:40px;">
                <div class="col-md-6" @mouseup="mouseUp" v-if="isSingle">
                    <div class="title">This is the title</div>
                    <p class="content">Going vegan means seeking the new sources of essential nutrients. Contrary to widespread beliefs,
                        eating plant-based foods can provide the body with most of the nutrients it needs, especially when it comes to minerals.
                        Iron is a crucial mineral that both meat lovers and vegan girls are deficient. Reduce your intake of saturated fats, cholesterol,
                        pesticides, and hormones, and increase your iron intake by eating the following vegan foods. They are as delicious as nutritious.
                        Cashews are rich in nutrients that help to support a vegan diet. They contain a wealth of iron as well as protein, magnesium, and
                        vitamin B6 that keep your digestive system healthy and control your blood pressure. Cashews make incredible nut butter
                        (even a healthier alternative to peanut butter) and a delicious addition to salads, soups, desserts, and stir-fry dishes.
                        If you are going vegan, cashews should definitely be a part of your diet.Going vegan means seeking the new sources of essential nutrients. Contrary to widespread beliefs,
                        eating plant-based foods can provide the body with most of the nutrients it needs, especially when it comes to minerals.
                        Iron is a crucial mineral that both meat lovers and vegan girls are deficient. Reduce your intake of saturated fats, cholesterol,
                        pesticides, and hormones, and increase your iron intake by eating the following vegan foods. They are as delicious as nutritious.
                        Cashews are rich in nutrients that help to support a vegan diet. They contain a wealth of iron as well as protein, magnesium, and
                        vitamin B6 that keep your digestive system healthy and control your blood pressure. Cashews make incredible nut butter
                        (even a healthier alternative to peanut butter) and a delicious addition to salads, soups, desserts, and stir-fry dishes.
                        If you are going vegan, cashews should definitely be a part of your diet.
                    </p>
                    <div class="">
                        原文链接：<a href="http://www.baidu.com">http://www.baidu.com</a>
                    </div>
                </div>
                <div class="col-md-6" v-if="isSingle">
                    <div class="row">
                        <div class="col-md-12">
                            <input type="text" class="form-control" placeholder="翻译标题">
                        </div>
                    </div>
                    <div class="row" style="margin-top:12px;">
                        <div class="col-md-12">
                            <textarea class="form-control" rows="20" placeholder="翻译原文"></textarea>
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px;">
                        <div class="col-sm-12 text-right">
                            <div style="display:inline-block;line-height:33px;margin-right:20px;">
                                <input type="checkbox" style="margin-top:1px;"> 匿名提交
                            </div>
                            <button class="btn btn-primary" style="width:100px;">提交</button>
                        </div>
                    </div>
                    <div class="attention">
                        翻译注意事项（含评分标准）: 翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求
                    </div>
                    <div class="glossary">
                        <div class="tt">
                            <img src="../assets/glossary.png">
                            生词表
                        </div>
                        <a href="javascript:void 0" v-for="n in 8">Vulputate</a>
                    </div>
                </div>

                <div class="col-sm-6 mutileft" v-if="!isSingle">
                    <div class="header">
                        原文链接：<a href="http://www.baidu.com">http://www.baidu.com</a>
                    </div>
                    <div class="section-list">
                        <div class="item" v-for="(item,index) in sectionList">
                            <div class="tt">
                                <span>段落{{index}}</span>
                                <span v-if="item.receiver">{{item.receiver}}</span>
                                <button v-else class="btn btn-primary">领取任务</button>
                            </div>
                            <p class="section">{{item.section}}</p>
                            <div class="edit" v-if="item.translation">
                                <textarea class="form-control" rows="8" :value="item.translation"></textarea>
                                <button class="btn btn-danger">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 mutiright" v-if="!isSingle">
                    <div class="attention-title">
                        <img src="../assets/attention.png" width="16">
                        <span style="margin-left:5px;">注意事项</span>
                        <button class="btn btn-danger pull-right" style="width:100px">队长申请</button>
                    </div>
                    <div class="attention" style="margin-top:10px;margin-bottom:20px;">
                        翻译注意事项（含评分标准）: 翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求翻译要求
                    </div>
                    <div>
                        <img src="../assets/glossary.png" width="16">
                        <span style="margin-left:5px;">高频词汇</span>
                    </div>
                    <div class="words clearfix">
                        <div class="word" v-for="n in 10">
                            <span>Boy 男孩</span>
                            <img src="../assets/remove.png">
                        </div>
                    </div>
                    <div class="team clearfix">
                        <div class="member" v-for="(member,index) in 5">
                            领取者{{index+1}}:
                            <span>王大白</span>
                            (500字)
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <img src="../assets/transkill.png">
            <span>翻译神技:</span>
            <img src="../assets/baidu.png">
            <span>百度翻译</span>
            <img src="../assets/youdao.png">
            <span>有道翻译</span>
            <img src="../assets/google.png">
            <span>谷歌翻译</span>
            <span style="margin-left:20px;">更多技能，敬请期待...</span>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                isSingle:true,
                sectionList:[{
                    receiver:'王大白',
                    section:"ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenbenceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben",
                    translation:"测试翻译文本测试翻译文本测试翻译文本测试翻译文本测试翻译文本测试翻译文本测试翻译文本测试翻译文本"
                },{
                    receiver:null,
                    section:"ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenbenceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben",
                },{
                    receiver:null,
                    section:"ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenbenceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben ceshi wenben",
                }]
            }
        },
        mounted(){
            this.isSingle = this.$route.params.id == 0 ? true : false;
        },
        methods:{
            mouseUp(){
                var txt;
                if (window.getSelection) {
                    txt = window.getSelection().toString();
                } else if (document.getSelection) {
                    txt = document.getSelection();
                } else if (document.selection) {
                    txt = document.selection.createRange().text;
                }
                if(txt){

                }
            }
        }
    }
</script>

<style scoped>
    select{
        border-radius:3px;
    }

    textarea{
        border-radius:3px;
    }

    .title{
        font-weight:bold;
        font-size:16px;
        line-height:1;
        margin-bottom:10px;
    }

    .content{
        color:#666;
    }

    .attention{
        padding:15px;
        background-color:#f7f7f7;
        margin-top:20px;
    }

    .footer{
        height:40px;
        line-height:40px;
        font-size:0;
        text-align:center;
        position:fixed;
        bottom:120px;
        left:0;
        /*margin-top:-40px;*/
        background-color:rgba(253,185,44,0.5);
        width:100%;
    }

    .footer img{
        width:24px;
        height:24px;
        margin-left:20px;
    }

    .footer span{
        font-size:14px;
        vertical-align: middle;
        margin-left:5px;
    }

    ::selection {
        background:#fe5e5e;
        color:#fff;
    }

    .glossary{
        width:100px;
        background-color:#f7f7f7;
        padding:10px;
        position:absolute;
        right:-100px;
        top:0;
    }

    .glossary > *:not(:last-child){
        margin-bottom:15px;
    }

    .glossary .tt{
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
        line-height:1;
        /*text-align:center;*/
    }

    .glossary .tt img{
        width:14px;
        height:14px;
    }

    .glossary > a{
        color:#000;
        display:block;
    }

    .mutileft .header{
        padding-bottom:15px;
        border-bottom:1px solid #d6d6d6;
    }

    .section-list .item{
        padding:10px 0;
        border-bottom:1px solid #d6d6d6;
    }

    .section-list .item .tt{
        /*line-height:33px;*/
        font-size:0;
    }

    .section-list .item .tt span:first-child{
        vertical-align: middle;
        font-weight:bold;
        font-size:14px;
        margin-right:10px;
    }

    .section-list .item .tt span:last-child{
        vertical-align: middle;
        font-size:14px;
        color:#438eff;
    }

    .section-list .item .tt button{
        width:100px;
    }

    .section-list .item .section{
        margin-top:10px;
    }

    .section-list .item textarea{
        padding-bottom:53px;
    }

    .section-list .item .edit{
        position:relative;
    }

    .section-list .item .edit button{
        position:absolute;
        right:20px;
        bottom:10px;
        width:80px;
    }

    .mutileft{
        height:100%;
    }

    .attention-title{
        line-height:33px;
        margin-bottom:10px;
    }

    .words{
        padding:15px;
        background-color:#f7f7f7;
        margin-top:10px;
    }

    .words .word{
        float:left;
        /*margin-left:10px;*/
        padding:5px;
    }

    .words .word span:hover{
        text-decoration: underline;
    }

    .words .word:hover img{
        display:inline-block;
    }

    .words .word img{
        width:14px;
        cursor:pointer;
        display:none;
    }

    .team{
        padding:15px;
        background-color:#f7f7f7;
        margin-top:10px;
    }

    .team .member{
        float:left;
        width:33.3333%;
        white-space:nowrap;
        color:#666;
    }
    .team .member span{
        color:#438eff;
    }
</style>
