<template>
  <div class="container">
    <div class="flextwo sharetopk" @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="boxbig">
      <!-- 帖子 -->
      <div>
        <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.user.avatar" alt />

                  <div class="yifadotk" v-if="item.unread_count != 0">
                    {{ item.unread_count }}
                  </div>
                </div>
                <div class="personright">
                  <div class="personname">{{ item.user.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="flexone">
              <div
                class="societyimg flexone"
                v-if="item.images_arr.length != 0"
              >
                <div
                  class="societyimgitem"
                  v-for="(item, indexk) in item.images_arr"
                  :key="indexk"
                  @click="previewimg(index, indexk)"
                >
                  <img :src="item" alt />
                </div>
              </div>
            </div>
            <div class="socvideo">
              <div
                class="socvideoitem"
                v-if="item.video != ''"
                @click="entervideo(item.video)"
                style="position: relative; margin-top: 0.24rem"
              >
                <img :src="item.video_image" alt />
                <img src="../../../assets/anniu.png" alt class="listanniuk" />
              </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">
                <img src="../../../assets/edit.png" alt class="dianzanimg" />

                <span
                  class="number"
                  v-clipboard:copy="item.description"
                  v-clipboard:success="onCopy"
                  >复制</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>
    <!-- 图片没有上传 -->
    <div class="gantanimg" v-if="nophoto">
      <img src="../../../assets/gantan.png" class="ganimg" alt />
      <div class="gantantext">用户未上传图片</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="register" v-if="showcomment">
      <div class="commentwrap">
        <div class="commenttop flextwo" @click="hidecomment">
          <div class="commenttopleft"></div>
          <div class="commenttopmiddle">全部{{ allcomment.length }}条评论</div>
          <img src="../../../assets/close.png" alt class="closeimg" />
        </div>

        <div class="commentbox">
          <div class="nodata" v-if="showcommentlist.length == 0">暂无评论</div>
          <div v-else>
            <div
              class="commentboxitem"
              @click="replay(item, index)"
              v-for="(item, index) in showcommentlist"
              :key="index"
            >
              <div class="commentimg">
                <img :src="item.user_info.avatar" alt />
              </div>
              <div class="commentright">
                <div class="commentname">{{ item.user_info.nickname }}</div>

                <div class="commenttext" v-if="item.reply_name == ''">
                  {{ item.content }}
                </div>
                <div class="commenttext" v-else>
                  回复
                  <span class="repalayname">{{ item.reply_name }}:</span>
                  {{ item.content }}
                </div>
              </div>
            </div>
          </div>

          <div
            class="kanmore flexthree"
            @click="seemorecomment"
            v-if="defaultlen"
          >
            查看更多
            <img src="../../../assets/jianotu.png" alt class="jiantou" />
          </div>
        </div>
        <div class="commentbot flextwo">
          <img src="../../../assets/jianpan.png" alt class="jianpan" />
          <div class="entercomment">
            <input type="text" :placeholder="dateinit" v-model="textcomment" />
          </div>
          <div class="fasong" @click="sendtext">发送</div>
        </div>
      </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 {
      list: [],
      loading: false,
      finished: false,
      page: 1,
      total_page: "",
      this_page: "",
      images: [],
      index: 0,
      startPosition: 0,
      show: false,
      nophoto: false,
      showcomment: false,
      socialId: "",
      comment_id: "",
      textcomment: "",
      shortcomment: [],
      allcomment: [],
      showcommentlist: [],
      defaultlen: false,
      dateinit: "请输入",
      fasong: ""
    };
  },
  created() {
    this.gettiezilist();
  },
  methods: {
    // 显示消息弹出层
    messageshow(index, item) {
      console.log(item);
      this.showcomment = true;
      this.socialId = item.id;
      this.getcommentlist();
    },
    // 获取消息列表
    getcommentlist() {
      let that = this;
      var url = "/api/social/comment_list";
      let param = {
        social_id: that.socialId
      };

      that.$axios
        .post(url, param)
        .then(function(res) {
          console.log(res);
          that.allcomment = res.data.social;
          console.log("434", that.allcomment);
          that.shortcomment = res.data.social.slice(0, 5);

          if (that.fasong == 1) {
            if (that.defaultlen == true) {
              that.defaultlen = true;
              that.showcommentlist = that.shortcomment;
            } else {
              that.defaultlen = false;
              that.showcommentlist = that.allcomment;
            }
          } else {
            if (res.data.social.length > 5) {
              that.defaultlen = true;
            }
            that.showcommentlist = that.shortcomment;
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    replay(item, index) {
      console.log(item);
      this.dateinit = item.user_info.nickname;
      this.comment_id = item.id;
    },
    hidecomment() {
      this.showcomment = false;
    },
    sendtext() {
      let that = this;
      if (this.textcomment == "") {
        Toast("请输入评论内容");
        return false;
      }
      var url = "/api/social/comment_send";
      let param = {
        social_id: that.socialId,
        comment_id: that.comment_id,
        content: that.textcomment
      };

      that.$axios
        .post(url, param)
        .then(function(res) {
          console.log(res);
          Toast("发送成功");
          that.list.forEach(function(value, index, arrray) {
            if (value.id == that.socialId) {
              value.comment_count = value.comment_count + 1;
            }
          });
          that.list = that.list;
          // that.showcomment = false;
          that.fasong = 1;
          that.textcomment = "";
          that.getcommentlist();
        })
        .catch(function(err) {
          console.log(err);
          Toast(err.msg);
        });
    },
    seemorecomment() {
      this.showcommentlist = this.allcomment;
      this.defaultlen = false;
    },
    // 查看更多
    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.list = that.list;
      that.$forceUpdate();
    },

    back() {
      this.$router.go(-1);
    },
    onCopy(e) {
      Toast("文案复制成功");
    },
    // 图片预览
    onChange(index) {
      this.index = index;
    },
    // 一键保存
    save(item) {
      let that = this;

      this.images = item.images_arr;
      if (this.images.length == 0) {
        this.nophoto = true;
        setTimeout(function() {
          that.nophoto = false;
        }, 1500);
      } else {
        this.index = 0;
        this.show = true;
      }
    },
    // 上拉加载
    onLoad() {
      let that = this;
      console.log(888);

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        let newpage = that.page;
        newpage++;
        that.page = newpage;
        console.log(9999);
        that.gettiezilist();
        // 加载状态结束
        that.loading = false;
        // 数据全部加载完成
        if (that.total_page == that.this_page) {
          that.finished = true;
        }
      }, 1000);
    },

    // 播放视频
    entervideo(url) {
      console.log(344803);
      console.log(url);
      this.$router.push({
        path: "/videoplay",
        query: { url: url }
      });
    },
    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.gettiezilist();
            })
            .catch(function(err) {
              console.log(err);
            });
          // on confirm
        })
        .catch(res => {
          // on cancel
        });
    },
    // 我的收藏社区
    gettiezilist() {
      let that = this;
      var url = "/api/user/social_list";
      let param = {
        page: that.page
      };

      that.$axios
        .post(url, param)
        .then(function(res) {
          console.log(res);
          that.list = that.list.concat(res.data.social);
          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.this_page = res.data.this_page;
          that.total_page = res.data.total_page;
          console.log(that.list);
        })
        .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.list = that.list;
      that.$forceUpdate();
    },

    previewimg(index, indexk) {
      console.log(index, indexk);
      this.index = indexk;
      this.images = this.list[index].images_arr;
      this.show = true;
      this.startPosition = indexk;
    },

    // 收藏
    collect(index, item) {
      let that = this;

      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 = that.list;
          that.$forceUpdate();
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 点赞
    zanclick(index, item) {
      let that = this;
      console.log(item.id);
      console.log(item.deletetime);

      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);
        });
    }
  }
};
</script>

<style scoped>
@import "../../../style/usercenter.css";
.dianitem {
  margin-right: 0.15rem;
}
.boxbig {
  margin-top: 1rem;
}
.listanniu {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.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;
}
.societybox {
  margin-bottom: 1.2rem;
  margin-top: 1.2rem;
}
.desyincang {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.commentbot {
  padding: 0.16rem 0.32rem;
  box-sizing: border-box;
  background: #f7f7f7;
}
.entercomment {
  width: 4.9rem;
  height: 0.76rem;
  background: #fff;
  color: #454e56;
  font-size: 0.28rem;
}
.entercomment input {
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
}
.fasong {
  width: 1.14rem;
  height: 0.6rem;
  background: linear-gradient(135deg, #87bd87 1%, #4a834a);
  border-radius: 0.04rem;
  color: #fff;
  font-size: 0.28rem;
  text-align: center;
  line-height: 0.6rem;
}
.jianpan {
  width: 0.5rem;
  height: 0.5rem;
}
.repalayname {
  color: rgb(89, 145, 88);
  font-size: 0.28rem;
}
.commenttext {
  color: #454e56;
  font-size: 0.28rem;
  margin-top: 0.1rem;
}
.commentname {
  color: "#333333";
  font-size: 0.28rem;
  font-weight: bold;
}
.commentimg {
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  margin-right: 0.08rem;
  font-size: 0;
  flex: 0 0 auto;
}
.commentimg img {
  border-radius: 50%;
}
.commentboxitem {
  margin-top: 0.24rem;
  display: flex;
}
.commentwrap {
  width: 100%;
  height: 8.5rem;
  background: #fff;
  border-radius: 0.1rem 0.1rem 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
}
.closeimg {
  width: 0.24rem;
  height: 0.24rem;
}
.commenttop {
  padding: 0.32rem 0.32rem 0;
  box-sizing: border-box;
}
.commentbox {
  padding: 0 0.32rem;
  box-sizing: border-box;
  overflow-y: scroll;
  height: 6.62em;
  padding-bottom: 0.32rem;
}
.commenttopleft {
  width: 0.24rem;
  height: 0.24rem;
}
.commenttopmiddle {
  color: #041121;
  font-size: 0.36rem;
}
</style>