<template>
  <!--  -->
  <div class="csdn-datav-m" @click="navAdd(true)">
   
    <div class="nav back" @click.stop="navAdd(navFlag)" style="z-index:13;">
      <div class="nav-box">
        <img src="@/assets/img/menu-m.png" alt="">
        <div class="nav-list" v-if="navFlag">
          <div v-for="(it, index) in routerList"
            :key="index">
            <router-link
            v-if="it.path"
            tag="p"
            :to="it.path"
            >{{ it.meta.navTitle }}</router-link
          >
           <a :href="it.url" v-else target="_blank">{{it.title}}</a>
          </div>
        </div>
      </div>
    </div>
    <div class="share back" @click="shareCopy" id="copy_title" :data-clipboard-text="clipbText">
      <img src="@/assets/img/share.png" alt="">
    </div>
    <a v-if="popoverItem.url" :href="popoverItem.url" target="_blank" class="help back"   >
      <img src="@/assets/img/question-wap.png" alt="">
    </a>
    <router-view></router-view>
    <!-- <van-popup v-model="Popup" 
   >
      <div class="popup-content">
        <div class="popover-top">
          <p class="popover-title">{{popupObj.title}} </p>
          <p class="popover-city"><i class="el-icon-location-outline"></i><span class="city">{{popupObj.obj.name}}</span> <span>{{popupObj.navname}}</span> <span class="num">{{popupObj.obj.score}}</span></p>
          <div class="exhibition"><p>排名</p> <p class="img">用户</p> <p>{{popupObj.navname}}</p></div>
          <div v-if="popupObj.obj.list&&popupObj.obj.list.length>0"><a :href="`https://blog.csdn.net/${item.username}`" v-for="(item,index) in popupObj.obj.list" :key="index" target="_blank" class="exhibition active"><p>{{index+1}}</p> <p class="img"> <img :src="item.avatar" alt=""> <span>{{item.nickname||item.username}}</span></p> <p class="num">{{item.score}}</p></a></div>
          <div class="popover-empty" v-else>
            <span>暂无上榜</span>
            <a href="" target="_blank">前往查看热榜更新规则</a>
          </div>
        </div>
      </div>
      <div class="close" @click="Popup = false"><img src="@/assets/img/close-circle.png" alt=""></div>
    </van-popup> -->
  </div>
</template>
<script> 
import Clipboard from 'clipboard'
export default {
  data(){
    return {
      routerList:[],
      navFlag:false,
      Popup:false,
      clipbText:'',
       popoverList:[
        {
          key:'/m/fans',
          desc:'',
          url:'https://bbs.csdn.net/topics/606708603'
        },
        {
          key:'/m/force',
          desc:'',
          url:'https://bbs.csdn.net/topics/602534373'
        }
      ],
      popoverItem:{},
      popupObj:{
        obj:{},
        title:'',
        navname:''
      }
    }
  },
  methods: {
    shareCopy () {
      var clipboard = new Clipboard("#copy_title");
      clipboard.on("success", (e) => {
        this.$toast.success('复制成功');
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        this.$toast.fail('该浏览器不支持复制');
        clipboard.destroy();
      });
    },
    navAdd(flag){
      this.navFlag = !flag
    }
  },
  beforeUpdate(){
    this.popoverItem = this.popoverList.find(it=>it.key === this.$route.path)
  },
  mounted (){
    this.popoverItem = this.popoverList.find(it=>it.key === this.$route.path)
    this.routerList = this.$router.options.routes.find(it => it.name === 'pcmap').children.filter(it => it.meta)
    this.routerList.push({
      title:'参与项目',
      url:'https://gitcode.net/csdn/csdn-datav'
    })
    this.clipbText = window.location.href
  }
}
</script>
<style lang="scss">
html,body,.app{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
p{
  margin: 0;
}
.ranklist{
  position: relative;
  .user-rank-list{
    width: 100%;
    position: absolute;
    height: 80%;
  }
}
.csdn-datav-m{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #0B1224;
  background-image: url("@/assets/img/map-back.png");
  background-size: cover;
  .back{
    width: 36px;
    height: 36px;
    background: #2C3547;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    img{
      height: 24px;
    }
    position: absolute;
  }
  .help{
    right: 10px;
    top: 102px;
  }
  .go{
    left: 10px;
    top: 10px;
  }
  .nav-box{
    height: 36px;
    display: flex;
    align-items: center;
    position: relative;
    .nav-list{
      width: 100px;
      // height: 200px;
      position: absolute;
      top: 45px;
      background: #2C3547;
      border-radius: 10px;
      right: -7px;
      padding: 4px 0;
      z-index: 20;
      p,a{
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #B2BCCF;
        height:40px ;
        line-height: 40px;
        text-align: center;
        &.router-link-active{
          background: rgba(0,0,0,0.2000);
          color: #FFFFFF;
        }
      }
    }
  }
  .popup-box{
    position: absolute;
    bottom:20px;
    background: #0d0;
    width: 200px;
    height: 40px;
    left: 50%;
    margin-left:-100px;
  }
  .van-popup{
    background: none;
    .close{
      text-align: center;
      // background: #fff;
      img{
        width: 28px;
        height: 28px;
      }
    }
  }
  .popup-content {
    width: 360px;
    height: 250px;
    background-image: url("@/assets/img/popover.png");
    background-size: cover;
    padding-top: 10px;
    position: relative;
    .close{
      position: absolute;
      width: 100px;
      height:30px;
      background: #fff;
    }
    .popover-title {
      font-size: 16px;
      font-weight: 500;
      color: #77c0ff;
      height: 36px;
      line-height: 36px;
      padding: 0 16px;
      
    }
    .popover-empty {
      height: 120px;
      text-align: center;
      span {
        font-size: 18px;
        font-weight: 500;
      }
      a {
        font-size: 14px;
        font-weight: 500;
        color: #77c0ff;
      }
    }
    .popover-city {
      height: 44px;
      // line-height: 44px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      span {
        font-size: 14px;
        font-weight: 500;
        color: #77c0ff;
        &.city {
          margin-right: 48px;
        }
        &.num {
          color: #29ffa3;
        }
      }
    }
    .exhibition {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration:none;
      padding: 0 16px;
      p {
        font-size: 14px;
        font-weight: 500;
        color: rgba(119, 192, 255, 0.7);
        text-align: start;
        
        &:nth-child(1){
          width: 30px;
          text-align: center;
        }
        &:nth-child(3){
          width: 90px;
          text-align: right;
        }
        &.img{
          flex:1;
          margin-left: 40px;
          display: flex;
          align-items: center;
          span{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }
      }
      img{
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 8px;
      }
      &.active {
        p {
          color: #77c0ff;
        }
        .num {
          color: #29ffa3;
        }
        &:hover {
          background: rgba(95, 151, 213, 0.3);
          cursor: pointer;
        }
      }
    }
  }
  .nav{
    right: 10px;
    top: 10px;
  }
  .share{
    right: 10px;
    top: 56px;
  }
}
</style>