<template>
  <view class="content">
     
      <view class="title">
          <view class="history" :class="{active:active1}" @click="historyShow">浏览历史</view>
          <view class="cellect" :class="{active:active2}" @click="cellectShow">我的收藏</view>
      </view>
    <view class="historyBox" v-if="isHistoryShow">
      <view class="liulan">
          <view class="liulantitle">浏览历史</view>
          <view class="del">清空</view>
          <!-- <view class="del">完成</view> -->
      </view>
      <view class="mateitem" v-for="(item,index) in historylist" :key="index">
          <view class="contentBox">
          <image class="photo" src="../../static/logo_img@2x.png"></image>
          <view class="cont">
              <view class="title">红色的战旗</view>
              
              <view class="fen">就读体验</view>
          </view>
          <view class="right">
              <view class="text">已关注</view>
          </view>
          <view class="txt">班主任用“心”战“疫” 全力做好学生防疫工作</view>
          </view>
      </view>
        <view class="nodata" v-if="historylist.length==0">暂无数据</view>

   
      </view>

      <!-- 我的收藏 -->
      <view class="cellectBox" v-else>
        <view class="liulan">
          <view class="liulantitle">我的收藏</view>
          <view class="del" @click="change2" v-if="isdel">完成</view>
          <view class="del" @click="change" v-else>编辑</view>
      </view>
      <view class="mateitem" v-for="(item,index) in cellectlist" :key="index">
          <image class="delBtn" src="../../static/shanchu_icon@2x.png" v-if="isdel"></image>
          <view class="contentBox" :style="{width:width}">
              <image class="photo" src="../../static/logo_img@2x.png"></image>
              <view class="cont">
                <view class="title">红色的战旗</view>
                <view class="fen">就读体验</view>
              </view>
              <view class="right">
                <view class="text">已关注</view>
              </view>
             <view class="txt">班主任用“心”战“疫” 全力做好学生防疫工作</view>
          </view>
          
      </view>
      <view class="nodata" v-if="cellectlist.length==0">暂无数据</view>
        
      </view>
  </view>
</template>

<script>
import app from "../../App.vue";
export default {
    data(){
        return{
            active1:true,
            active2:false,
            isHistoryShow:true,
            isdel:false,
            width:"660rpx",
            page:1,
            size:10,
            cellectlist:[],
            historylist:[]
        }
    },
    methods:{
        historyShow(){
            this.active1=true,
            this.active2=false,
            this.isHistoryShow=true
        },
        cellectShow(){
            this.isHistoryShow=false,
            this.active2=true,
            this.active1=false
        },
        change(){
            this.isdel=true
            this.width="620rpx"

        },
        change2(){
            this.isdel=false
            this.width="660rpx"
        },
        getMyCellect(){
            var that = this
            var url = "article/getMyLikeArticle"
            var token = uni.getStorageSync('token')
            var params = {
                token:token,
                page:that.page,
                size:that.size
            }
            app.post(url,params,"get").then((res)=>{
                console.log(res)
                that.cellectlist=res
            }).catch((err)=>{
                console.log(err)
            })
        },
        gethistory(){
            var that = this
            var url = "article/getLookArticleList"
            var token = uni.getStorageSync('token')
            var params = {
                token:token,
                page:that.page,
                size:that.size
            }
            app.post(url,params,"get").then((res)=>{
                console.log(res)
                that.historylist=res
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    onLoad(){
        this.getMyCellect()
    }

}
</script>

<style lang="less">
.content{
    // background-color: #F9F9F9;
    .nodata{
        font-size: 28rpx;
        text-align: center;
    }
    .title{
        background-color: #fff;
        display: flex;
        .history,.cellect{
            width: 50%;
            text-align: center;
            font-size:28rpx;
            padding: 24rpx 0;
        }
        .active{
            background: url("../../static/xuanzhong_icon@2x.png") no-repeat;
            background-size: 60rpx 12rpx;
            background-position: 156rpx 70rpx;
            color: rgba(5,132,157,1);
        }
    }
    .liulan{
        display: flex;
        font-size:32rpx;
        width: 686rpx;
        margin: 0 auto;
        justify-content: space-between;
        padding: 30rpx 0;
        .liulantitle{
            color:rgba(45,85,117,1);
        }
        .del{
            font-size:24rpx;
        }
    }
    .mateitem{
        display: flex;
        align-items: center;
        width:686rpx;
        // height:172rpx;
        background:rgba(255,255,255,1);
        opacity:1;
        border-radius:20rpx;
        margin: 0 auto;
        background-color: #fff;
        padding: 24rpx 0;
        // box-sizing: border-box;
        margin-bottom: 24rpx;
        .delBtn{
            width: 28rpx;
            height: 28rpx;
            // position: absolute;
            // top: 50%;
            // transform: translateY(-50%);
            // left: 28rpx;
            margin-left: 26rpx;
        }
        .contentBox{
        display: flex;
        // align-items: center;
        position: relative;
        flex-wrap: wrap;
        margin-left: 26rpx;
        width: 660rpx;
        .photo{
            width: 68rpx;
            height: 68rpx;
            margin-right: 26rpx;
            margin-top: 6rpx;
        }
        .cont{
            .title{
                color:rgba(61,68,77,1);
                font-size: 24rpx;
            }
            
            .fen{
                font-size: 24rpx;
                color:rgba(140,145,152,1);
                margin-top: 4rpx;
            }
        }
        .right{
            width:118rpx;
            height:44rpx;
            border:2rpx solid rgba(189,196,206,1);
            opacity:1;
            border-radius:40rpx;
            position: absolute;
            right: 26rpx;
            top: 32rpx;
            .text{
            color:rgba(189,196,206,1);
            text-align: center;
            line-height: 44rpx;
            font-size:24rpx;
            }
        }
        .txt{
            // width: 600rpx;
            font-size:28rpx;
            margin-top: 24rpx;
        }
        }
        
        
    }
}
</style>