<template>
  <view class="content">
      <view class="title">
          <view class="mine" :class="{active:active3}" @click="mineShow">我的发布</view>
          <view class="history" :class="{active:active1}" @click="historyShow">浏览历史</view>
          <view class="cellect" :class="{active:active2}" @click="cellectShow">我的收藏</view>
      </view>
      <view class="mineBox" v-if="isMineShow==true&&isHistoryShow==false">
          <view class="minetop">
            <view class="mineTitle">我的发布</view>
            <view class="del" @click="edit" v-if="isedit==false">编辑</view>
            <view class="del" @click="editok" v-if="isedit==true">完成</view>
            <!-- <view class="del">完成</view> -->
          </view>
          <view class="item" v-for="(item,index) in articlelist" :key="index">
              <image class="icon" src="../../static/shanchu_icon@2x.png" v-if="isedit" @click="delarcial(item,index)"></image>
              <view class="cont" :style="{width:width}"  @click="toarticl" :data-id="item.id">
                  <view class="rowOne">{{item.article_type_name}}</view>
                  <view class="rowTwo">{{item.title}}</view>
                  <view class="rowThree">{{item.des_content}}</view>
              </view>
          </view>
          <view class="nodata" v-if="articlelist.length==0">暂无数据</view>
      </view>
      <view class="historyBox" v-if="isHistoryShow==true&&isMineShow==false">
        <view class="liulan">
            <view class="liulantitle">浏览历史</view>
            <view class="del" @click="delhistory">清空</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="cellcetBox" v-if="isHistoryShow==false&&isMineShow==false">
        <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:width2}">
            <image class="photo" src="../../static/logo_img@2x.png"></image>
            <view class="cont">
                <view class="title">{{item.nickname}}</view>
                
                <view class="fen">{{item.title}}</view>
            </view>
            <view class="right">
                <view class="text">已关注</view>
            </view>
            <view class="txt">{{item.des_content}}</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{
            active3:true,
            active1:false,
            active2:false,
            isHistoryShow:false,
            isMineShow:true,
            isdel:false,
            isedit:false,
            width:'686rpx',
            width2:'660rpx',
            page:1,
            size:10,
            articlelist:[],
            historylist:[],
            cellectlist:[]
        }
    },
    methods:{
        historyShow(){
            this.active1=true,
            this.active2=false,
            this.isHistoryShow=true
            this.isMineShow=false,
            this.active3=false
        },
        cellectShow(){
            this.isHistoryShow=false,
            this.active2=true,
            this.active1=false,
            this.isMineShow=false,
            this.active3=false
        },
        mineShow(){
            this.active3=true,
            this.active1=false,
            this.active2=false,
            this.isMineShow=true,
            this.isHistoryShow=false
        },
        edit(){
            this.isedit=true,
            this.width="580rpx"
        },
        editok(){
            this.isedit=false,
            this.width="686rpx"
        },
        change(){
            this.isdel=true
            this.width="620rpx"

        },
        change2(){
            this.isdel=false
            this.width="660rpx"
        },
        getMyArticle(){
            var that = this
            var url = "article/getMyArticle"
            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.articlelist=res
            }).catch((err)=>{
                console.log(err)
            })
        },
        gethistory(){
            var that = this
            var url = "article/getLookArticleList"
            var token = uni.getStorageSync('token')
            var params = {
                token:token
            }
            app.post(url,params,"get").then((res)=>{
                that.historylist=res
                console.log(res)
            }).catch((err)=>{
                console.log(err)
            })
        },
        delhistory(){
            var that = this
            var url = "article/delLookArticle"
            var token = uni.getStorageSync('token')
            var params = {
                token:token
            }
            app.post(url,params,"post").then((res)=>{
                that.historylist=res
                console.log(res)
                uni.showToast({
                    title:'浏览记录已清空'
                })
            }).catch((err)=>{
                console.log(err)
            })
        },
        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)
            })
        },
        toarticl(e){
            var id = e.currentTarget.dataset.id
            uni.navigateTo({
                url:'../school/article?article_id='+id
            })
        },
        delarcial(item,index){
            var that = this
            var url = "article/delArticle"
            var params = {
                token:uni.getStorageSync('token'),
                article_id:item.id
            }
            app.post(url,params,"post").then((res)=>{
                console.log(res)
                that.articlelist.splice(index, 1)　
                uni.showToast({
                    title:'删除成功',
                    icon:'none'
                })
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    onLoad(){
        this.getMyArticle()
        this.gethistory()
        this.getMyCellect()
    }

}
</script>

<style lang="less">
    .content{
        background:rgba(249,249,249,1);
        height: 100vh;
        // padding: 32rpx;
        .nodata{
            text-align: center;
            font-size: 28rpx;
        }
         .title{
            background-color: #fff;
            display: flex;
            .history,.cellect,.mine{
                width: 33%;
                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: 95rpx 70rpx;
                color: rgba(5,132,157,1);
            }
        }
        .minetop{
            display: flex;
            font-size:32rpx;
            width: 686rpx;
            margin: 0 auto;
            justify-content: space-between;
            padding: 30rpx 0;
            .mineTitle{
                color:rgba(45,85,117,1);
            }
            .del{
                font-size:24rpx;
            }
        }
        .item{
            width: 686rpx;
            background-color: #fff;
            margin: 0 auto;
            border-radius:20rpx;
            padding: 20rpx 30rpx;
            box-sizing: border-box;
            margin-bottom: 14rpx;
            display: flex;
            align-items: center;
            .cont{
                .rowOne{
                    font-size:24rpx;
                    color:rgba(140,145,152,1);
                }
                .rowTwo{
                    font-size:28rpx;
                    color:rgba(61,68,77,1);
                    margin-top: 16rpx;
                }
                .rowThree{
                    font-size:24rpx;
                    color:rgba(140,145,152,1);
                    margin-top: 4rpx;
                    height: 74rpx;
                    overflow: hidden;
                }
            }
            .icon{
                width: 28rpx;
                height: 28rpx;
                margin-right: 26rpx;
            }
        }
        .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>