<template>
  <div class="container">
    <div class="collecttop">
      <div class="flextwo sharetopkk" @click="back">
        <div class="leftrow leftrowkimg">
          <img src="../../../assets/leftrow.png" alt />
        </div>
        <div class="sharemiddle">我的收藏</div>
        <div class="sharebtn">
          <!-- <img src="../../../assets/sharebtn.png" alt /> -->
        </div>
      </div>
      <div class="coursenav flexone">
        <div
          class="coursenavleft"
          :class="selnav == 0 ? 'selactive' : ''"
          :data-id="0"
          @click="selecttab"
        >
          帖子
        </div>
        <div
          class="coursenavleft"
          :class="selnav == 1 ? 'selactive' : ''"
          :data-id="1"
          @click="selecttab"
        >
          课程
        </div>
        <div
          class="coursenavleft"
          :class="selnav == 2 ? 'selactive' : ''"
          :data-id="2"
          @click="selecttab"
        >
          活动
        </div>
      </div>
    </div>
    <div class="boxbig">
      <!-- 帖子 -->
      <div v-if="selnav == 0">
        <div class="nodata" v-if="list.length == 0">暂无数据</div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          v-else
        >
          <div class="societyitem" v-for="(item, index) in list" :key="index">
            <div class="societytop flextwo">
              <div class="societyleft flexone">
                <div class="personimg">
                  <img :src="item.avatar" alt />
                </div>
                <div class="personright">
                  <div class="personname">{{ item.nickname }}</div>
                  <div class="persondate">{{ item.createtime }}</div>
                </div>
              </div>
              <div class="dingimg" v-if="item.is_top == 1">
                <img src="../../../assets/ding.png" alt />
              </div>
            </div>
            <div
              class="societytext"
              :class="item.show == true ? 'desyincang' : ''"
            >
              {{ item.description }}
            </div>
            <div
              class="kanmore flexthree"
              v-if="item.more == true"
              @click="seemore(item, index)"
            >
              {{ item.show == true ? "查看更多" : "收起" }}
              <img
                src="../../../assets/jianotu.png"
                alt
                class="xiajiantou"
                v-if="item.show == true"
              />
              <img
                src="../../../assets/jianotu.png"
                alt
                class="shangjiantou"
                v-else
              />
            </div>
            <div class="societyimg flexone" v-if="item.images.length != 0">
              <div
                class="societyimgitem"
                v-for="(item, indexk) in item.images"
                :key="indexk"
                @click="previewimg(index, indexk)"
              >
                <img :src="item" alt />
              </div>
            </div>
            <div class="jianzhengtui flexone">
              <div
                class="jianzheng flexone"
                v-for="(item, index) in item.tags"
                :key="index"
              >
                <div class="jianzhengleft" :style="{ background: item.color }">
                  #
                </div>
                <div class="jianzhengright" :style="{ color: item.color }">
                  {{ item.name }}
                </div>
              </div>
            </div>

            <div class="dainzan flexone">
              <div class="flexone dianitem" @click="zanclick(index, item)">
                <img
                  src="../../../assets/diankong.png"
                  alt
                  class="dianzanimg"
                  v-if="item.is_good == 0"
                />
                <img
                  src="../../../assets/zan.png"
                  alt
                  class="dianzanimg"
                  v-else
                />
                <span class="number">{{ item.good_count }}</span>
              </div>
              <div class="flexone dianitem" @click="collect(index, item)">
                <img
                  src="../../../assets/starkong.png"
                  alt
                  class="dianzanimg"
                  v-if="item.is_favorite == 0"
                />
                <img
                  src="../../../assets/star.png"
                  alt
                  class="dianzanimg"
                  v-else
                />

                <span class="number">{{ item.favorite_count }}</span>
              </div>
              <div class="flexone dianitem" @click="messageshow(index, item)">
                <img src="../../../assets/xiaoxi.png" alt class="dianzanimg" />

                <span class="number">{{ item.comment_count }}</span>
              </div>
              <div class="flexone dianitem" @click="copytext">
                <img src="../../../assets/edit.png" alt class="dianzanimg" />

                <span
                  class="number"
                  v-clipboard:copy="item.description"
                  v-clipboard:success="onCopy"
                  v-if="item.deletetime == null"
                  >复制</span
                >
                <span class="number" v-else @click="fuzhi(item)">复制</span>
              </div>
              <!-- <div class="flexone dianitem" @click="save(item)">
                <img
                  src="../../../assets/download.png"
                  alt
                  class="dianzanimg"
                />
                <span class="number">一键保存</span>
              </div> -->
              <!-- 
              <div class="flexone dianitem" @click="del(item)">
                <img src="../../../assets/delim.png" alt class="dianzanimg" />
                <span class="number">删除</span>
              </div>-->
            </div>
          </div>
        </van-list>

        <!-- 课程 -->
      </div>
      <!-- 课程 -->
      <div v-if="selnav == 1">
        <div class="nodata" v-if="courselist.length == 0">暂无数据</div>
        <van-list
          class="coursebox"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          v-else
        >
          <div
            class="courseboxitem"
            v-for="(item, index) in courselist"
            :key="index"
            @click="coursedetail(item)"
          >
            <div class="coursenameimg">
              <img :src="item.image" alt />
            </div>
            <div class="coursetext">
              <div class="coursename">{{ item.title }}</div>
              <div class="courseteacher">讲师：{{ item.nickname }}</div>
            </div>
          </div>
        </van-list>
      </div>
      <div></div>
      <!-- 预览图片 -->
      <van-image-preview
        v-model="show"
        :images="images"
        @change="onChange"
        :startPosition="startPosition"
      >
        <template v-slot:index>第{{ index + 1 }}页</template>
      </van-image-preview>

      <!-- 图片没有上传 -->
      <div class="gantanimg" v-if="nophoto">
        <img src="../../../assets/gantan.png" class="ganimg" alt />
        <div class="gantantext">用户未上传图片</div>
      </div>
      <!-- 活动 -->
      <div v-if="selnav == 2">
        <div class="nodata" v-if="activitylist.length == 0">暂无数据</div>
        <van-list
          class="activitybox"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          v-else
        >
          <div
            class="activityimg"
            v-for="(item, index) in activitylist"
            :key="index"
            @click="toactivity(item.object_id)"
          >
            <img :src="item.image" alt />
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

import { List, Toast, ImagePreview } from "vant";
import { Dialog } from "vant";

Vue.use(ImagePreview);

Vue.use(List);
export default {
  data() {
    return {
      selnav: 0,
      sortlist: [],
      loading: false,
      finished: false,
      page: 1,
      this_page: "",
      total_page: "",
      societylist: [],
      courselist: [],
      activitylist: [],
      list: [],
      images: [],
      index: 0,
      startPosition: 0,
      show: false,
      nophoto: false,
      delfavorite_id: ""
    };
  },
  mounted(){
    console.log('3489438943989')
   
  },


  created() {
    console.log('created')
    document.title = "唐元集";
    console.log(localStorage.getItem("selnav"),'3489834934809');
    let selnav = localStorage.getItem("selnav");
    console.log('当前的selnav',selnav)
    this.page = 1;
    this.list = [];
    this.activitylist = [];
    this.courselist = [];
    if (selnav == "" || selnav == 0) {
      this.getsociety();
      this.selnav = 0;
    } else if (selnav == 1) {
      this.selnav = 1;
      this.mycollectke();
    } else if (selnav == 2) {
      this.selnav = 2;
      this.mycollecthuodong();
    }
  },
 watch:{
    $route:{
      handler(val,oldval){

        console.log('rhthwejktjhwerthjwerkj')
        console.log(val);//新路由信息
        console.log(oldval);//老路由信息
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    // 进入活动中心详情
    toactivity(id) {
      this.$router.push({
        path: "/activitydetail",
        query: {
          id: id
        }
      });
    },
    // 进入直播详情
    // 录播详情
    coursedetail(item) {
      console.log(item.type)
      if (item.type == 2) {
        this.$router.push({
          path: "/lubodetail",
          query: {
            id: item.object_id
          }
        });
      } else {
        this.$router.push({
          path: "/yingyangdetail",
          query: { id: item.object_id }
        });
       
      }

    },

    // 删除帖子
    del(item) {
      this.social_id = item.id;
      Dialog.confirm({
        title: "是否撤销帖子"
      })
        .then(res => {
          console.log(3489348);
          let that = this;
          var url = "/api/user/social_del";
          let param = {
            social_id: that.social_id
          };

          that.$axios
            .post(url, param)
            .then(function (res) {
              console.log(res);
              Toast("删除成功");
              that.page = 1;
              that.list = [];
              that.getsociety();
            })
            .catch(function (err) {
              console.log(err);
            });
          // on confirm
        })
        .catch(res => {
          // on cancel
        });
    },

    // 后台删除帖子
    deletetiezi() {
      let that = this;
      var url = "/api/user/my_favorite_social_del";
      let param = {
        favorite_id: that.delfavorite_id
      };
      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.list.forEach(function (value, index, array) {
            if (that.delfavorite_id == value.id) {
              that.list.splice(index, 1);
              that.list = that.list;
              that.$forceUpdate();
            }
          });
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 我的帖子收藏
    getsociety() {
      let that = this;
      var url = "/api/user/my_favorite_social";
      let param = {
        page: that.page
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.list = that.list.concat(res.data.list);
          that.this_page = res.data.this_page;
          that.total_page = res.data.total_page;
          that.list.forEach(function (value, index, array) {
            value.show = true;

            if (value.description.length > 66) {
              value.more = true;
            } else {
              value.more = false;
            }
          })
          that.list = that.list;
          that.$forceUpdate()
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 我的收藏课程
    mycollectke() {
      let that = this;
      var url = "/api/user/my_favorite_lesson";
      let param = {
        page: that.page
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.this_page = res.data.this_page;
          that.total_page = res.data.total_page;
          that.courselist = that.courselist.concat(res.data.list);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 我的收藏活动
    mycollecthuodong() {
      let that = this;
      var url = "/api/user/my_favorite_activity";
      let param = {
        page: that.page
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.this_page = res.data.this_page;
          that.total_page = res.data.total_page;
          that.activitylist = that.activitylist.concat(res.data.list);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    back() {
      this.$router.go(-1);
    },
    selecttab(e) {
      this.selnav = e.currentTarget.dataset.id;
      localStorage.setItem("selnav", this.selnav);
      console.log('selnav',localStorage.getItem("selnav"))
      this.page = 1;
      this.list = [];
      this.courselist = [];
      this.activitylist = [];
      if (this.selnav == 0) {
        this.getsociety();
      } else if (this.selnav == 1) {
        this.mycollectke();
      } else if (this.selnav == 2) {
        this.mycollecthuodong();
      }
    },
    // 一键保存
    save(item) {
      let that = this;
      if (item.deletetime != null) {
        that.delfavorite_id = item.id;
        that.page = 1;
        Toast("帖子已被删除");
        that.deletetiezi();
        return false;
      }
      this.images = item.images;
      if (this.images.length == 0) {
        this.nophoto = true;
        setTimeout(function () {
          that.nophoto = false;
        }, 1500);
      } else {
        this.index = 0;
        this.show = true;
      }
    },
    // 预览图片
    previewimg(index, indexk) {
      console.log(index, indexk);
      this.index = indexk;
      this.images = this.list[index].images;
      this.show = true;
      this.startPosition = indexk;
    },
    nophotoup() {
      this.nophoto = false;
    },
    // 图片预览
    onChange(index) {
      this.index = index;
    },
    onCopy(e) {
      console.log(e);
      Toast("复制成功");
    },
    fuzhi(item) {
      let that = this;
      that.delfavorite_id = item.id;
      that.deletetiezi();
      Toast("帖子已被删除");
    },
    // 上拉加载
    onLoad() {
      let that = this;
      console.log(888);

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        let newpage = that.page;
        newpage++;
        that.page = newpage;
        console.log(9999);
        if (that.selnav == 0) {
          that.getsociety();
        } else if (that.selnav == 1) {
          that.mycollectke();
        } else if (that.selnav == 2) {
          that.mycollecthuodong();
        }

        // 加载状态结束
        that.loading = false;
        // 数据全部加载完成
        if (that.total_page == that.this_page) {
          that.finished = true;
        }
      }, 1000);
    },
    // 收藏
    collect(index, item) {
      let that = this;
      if (item.deletetime != null) {
        Toast("帖子已被删除");
        that.page = 1;
        that.delfavorite_id = item.id;
        that.deletetiezi();

        return false;
      }
      var url = "/api/user/favorite";
      let param = {
        type: 3,
        favorite_id: item.id
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          if (item.is_favorite == 0) {
            item.is_favorite = 1;
            that.list[index].is_favorite = 1;
            that.list[index].favorite_count =
              that.list[index].favorite_count + 1;
            Toast("收藏成功");
          } else if (item.is_favorite == 1) {
            item.is_favorite = 1;
            Toast("取消收藏成功");
            that.list[index].is_favorite = 0;
            that.list[index].favorite_count =
              that.list[index].favorite_count - 1;
          }
          that.list.splice(index, 1)
          that.list = that.list;
          that.$forceUpdate();
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 点赞
    zanclick(index, item) {
      let that = this;
      console.log(item.id);
      console.log(item.deletetime);
      if (item.deletetime != null) {
        Toast("帖子已被删除");
        that.page = 1;
        that.delfavorite_id = item.id;
        that.deletetiezi();

        return false;
      }
      var url = "/api/user/good";
      let param = {
        type: 1,
        good_id: item.id
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          if (item.is_good == 0) {
            item.is_good = 1;
            that.list[index].is_good = 1;
            that.list[index].good_count = that.list[index].good_count + 1;
            Toast("点赞成功");
          } else if (item.is_good == 1) {
            item.is_good = 1;
            Toast("取消点赞成功");
            that.list[index].is_good = 0;
            that.list[index].good_count = that.list[index].good_count - 1;
          }
          that.list = that.list;
          that.$forceUpdate();
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 查看更多
    seemore(item, index) {
      console.log(9999);

      let that = this;
      that.list.forEach(function (value, index, array) {
        console.log(value);
        if (value.id == item.id) {
          if (value.more == true) {
            value.show = !value.show;
          }
        }
      });
      that.sortlistlist = that.list;
      that.$forceUpdate();
    },

    // 复制文本
    copytext() { },
    // 头部切换
    selectnav(id, index) {
      let that = this;
      this.selnav = index;
      localStorage.setItem("selnav",this.selnav)
      this.sort_id = id;
      that.page = 1;
      that.list = [];
      that.getsociety();
    }
  }
};
</script>

<style scoped>
@import "../../../style/usercenter.css";
.kanmore {
  width: 100%;
  color: #333;
  font-size: 0.28rem;
  margin: 0.32rem 0;
}
.jiantou {
  width: 0.2rem;
  height: 0.25rem;
  margin-left: 0.16rem;
}
.xiajiantou {
  width: 0.2rem;
  height: 0.25rem;
  transform: rotate(90deg);
  margin-left: 0.16rem;
}
.shangjiantou {
  width: 0.2rem;
  height: 0.25rem;
  transform: rotate(-90deg);
  margin-left: 0.16rem;
}
.desyincang {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>