<template>
  <van-pull-refresh v-model="pull_loading" @refresh="onRefresh"  success-text="刷新成功">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text=""
    ref="list"
    @load="onLoad"
    class="msglist"
  >
    <div
      class="msgcell"
      v-for="(item, index) in list"
      :key="item.gandanhome_id"
    >
      <div class="namebox">
        <div class="left">
          <div class="leftcon">
            <img
              v-lazy="img_host + item.patient_photo"
              alt=""
              class="avastar head"
              @click="goPage(item.patient_uuid)"
            />
            <div class="info">
              <div class="name_level">
                <div class="name">{{ item.patient_name }}</div>
                <img
                  v-lazy="imgcell.url"
                  alt=""
                  class="level"
                  v-for="imgcell in item.tags"
                  :key="imgcell.url"
                  v-if="type != 'mypage'"
                />
                <div
                  class="settop"
                  v-if="type == 'mypage'|| type =='patient'"
                  v-show="item.top_flag == 1"
                >
                  <span>置顶</span>
                </div>
              </div>
              <div class="time">{{ item.update_date | fromTimeNow }}</div>
            </div>
          </div>
        </div>
        <div
          class="more"
          v-if="type == 'mypage'"
          @click="openMore(index, item.gandanhome_id, item.top_flag)"
        >
          ...
        </div>
      </div>
      <div class="title" @click="goDetail(item.gandanhome_id)">
        {{ item.title }}
      </div>
      <!-- <div @click.stop="goDetail(item.gandanhome_id)"> -->
      <clamp
        :htmlContent="item.content"
        :topics="item.topics"
        :id="item.gandanhome_id"
      ></clamp>
      <!-- </div> -->
      <div
        class="imgbox"
        @click="goDetail(item.gandanhome_id)"
        v-if="item.imgs.length <= 6 && item.imgs.length != 4"
      >
        <div class="imgrow" v-for="itemcell in transforPages(item.imgs, 3)">
          <div class="imgcell" v-for="imgcell in itemcell">
            <van-image
             v-if="imgcell.status==1"
              lazy-load
              fit="cover"
              radius="8px"
              :src="imgcell.url"
              width="110px"
              height="110px"
            />
            <van-image
               v-else
              lazy-load
              fit="cover"
              radius="8px"
              :src="require('../assets/weigui.png')"
              width="110px"
              height="110px"
            />
          </div>
        </div>
      </div>
      <div class="imgbox" v-else-if="item.imgs.length == 4">
        <div
          class="imgrow tworow"
          v-for="itemcell in transforPages(item.imgs, 2)"
          @click="goDetail(item.gandanhome_id)"
        >
          <div class="imgcell" v-for="imgcell in itemcell">
            <van-image
              lazy-load
               v-if="imgcell.status==1"
              radius="8px"
              :src="imgcell.url"
              width="110px"
              height="110px"
            />
            <van-image
              lazy-load
               v-else
              radius="8px"
               :src="require('../assets/weigui.png')"
              width="110px"
              height="110px"
            />
          </div>
        </div>
      </div>
      <div class="imgbox" v-else>
        <div class="swiperbox">
          <van-swipe  :height="142" indicator-color="#3CC7C0">
            <van-swipe-item
              v-for="(imgcell, index) in item.imgs"
              :key="index"
    
              @click="goDetail(item.gandanhome_id)"
            >
             <div class="swipebg" >
              <img v-lazy="imgcell.url" alt="" class="swiperImg" v-if="imgcell.status==1"/>
              <img src="../assets/weigui.png" alt="" class="swiperImg" v-else>
             </div>
            
            <!-- <img v-lazy="imgcell.url" alt="" class="swipebg" v-if="imgcell.status==1"/>
            <img src="../assets/weigui.png" alt="" class="swipebg" v-else> -->
              <img v-lazy="imgcell.url" alt="" class="swiperImg" v-if="imgcell.status==1"/>
              <img src="../assets/weigui.png" alt="" class="swiperImg" v-else>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="tool" @click="goDetail(item.gandanhome_id)">
        <div class="address">
          {{ item.ip_show == 1 ? item.ip_address_province : "" }}
        </div>
        <div class="zan_comment">
          <div
            class="zan"
            @click.stop="
              toggleLike(item.isLike, index, item.gandanhome_id, item.likeNum)
            "
          >
            <img src="../assets/zan.png" alt="" v-if="item.isLike == 1" />
            <img src="../assets/unzan.png" alt="" v-else />
            <div class="zancount" v-if="item.likeNum >0">{{ item.likeNum }}</div>
          </div>
          <!-- <div class="collectbox" v-if="type=='mypage' || type=='mycollect'" @click.stop="toggleCollect(item.is_collect,index,item.gandanhome_id)">
  
                       <img src="../assets/collect.png" alt="" v-if="item.is_collect == 1"/>
                      <img src="../assets/uncollect.png" alt="" v-else />
                    </div> -->
          <div class="comment">
            <img src="../assets/msg_comment.png" alt="" />
            <div class="zancount" v-if="item.commonNum >0">{{ item.commonNum }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="nodata" v-show="list.length == 0 ">
      <div class="empty">
        <img src="../assets/tie_empty.png" alt="" />
        <div class="emptydesc">
          {{
            type == "searchBytitle"
              ? "暂未搜到相关帖子~"
              : type == "homeFollow"
              ? "关注的人暂无发布哦~"
              : type == "homeFriend"
              ? "好友暂无发布哦~"
              : "暂无相关帖子~"
          }}
        </div>
      </div>
    </div>
    <van-popup
      v-model:show="showBottom"
      round
      position="bottom"
      :style="{ height: '236px' }"
    >
      <div class="dealcell" @click="toggleTop">
        {{ top_flag == 0 ? "置顶" : "取消置顶" }}
      </div>
      <div class="dealcell" @click="goPublic">编辑</div>
      <div class="dealcell" @click="confirmDel">删除</div>
      <div class="ba"></div>
      <div class="dealcell" @click="showBottom = false">取消</div>
    </van-popup>
  </van-list>
</van-pull-refresh>
</template>

<script>
import img_host from "@/utils/imgHost";
import clamp from "./clamp";
import moment from "moment";
import { Dialog } from "vant";
import { throttle } from "../utils/debounce";
import cookie from "../utils/cookie";
moment.locale("zh-cn");
export default {
  components: {
    clamp,
  },
  filters: {
    fromTimeNow(val) {
      return moment(val).fromNow();
    },
  },
  mounted(){
   
    this.$toast.allowMultiple();
  },
  data() {
    return {
      img_host: img_host,
      finished: false,
      loading: false,
      pull_loading: false,
      page: 0,
      list: [],
      top_flag: 0,
      showBottom: false,
      dealIndex: 0,
    };
  },
  props: {
    keyWord: {
      type: String,
      default: "",
    },
    patient_uuid: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    topic_id:{
      type: String,
      default: "",
    },
    api: {
      type: Function,
    },
  },
  watch: {
    keyWord(newVal, oldVal) {
      if (newVal) {
        if(this.type == "searchBytitle"){
          this.freshList();
        }
      }
    },
  },
  methods: {
    closeBottom(){
    this.showBottom = false;
  },
    goPage(uuid) {
      let cur_uuid = cookie.readCookie("patient_uuid");
      if (uuid == cur_uuid) {
        this.$router.push({
          path: "/mypage",
        });
      } else {
        this.$router.push({
          path: "/patientpage",
          query: {
            patient_uuid: uuid,
          },
        });
      }
    },
    confirmDel() {
      this.showBottom = false;
      Dialog.confirm({
        title: "温馨提示",
        className: "mydialog",
        message: "是否删除该帖子？",
      })
        .then(() => {
          this.handelDelTopic();
        })
        .catch(() => {
          // on cancel
        });
    },
    openMore(index, gandanhome_id, top_flag) {
      this.top_flag = top_flag;
      this.gandanhome_id = gandanhome_id;
      this.dealIndex = index;
      this.showBottom = true;
    },
    toggleTop() {
      this.top_flag == 0 ? this.handleTop() : this.handleCancelTop();
      this.showBottom = false;
    },
    goPublic() {
      this.showBottom = false;
      this.$router.push({
        path: "/publish",
        query: {
          gandanhome_id: this.gandanhome_id,
        },
      });
    },
    handelDelTopic() {
      this.$api
        .delTopic({
          gandanhome_id: this.gandanhome_id,
        })
        .then((rep) => {
          let result = rep.data;
          if (result.code == 200) {
            this.list.splice(this.dealIndex, 1);
            this.$toast({
              duration: 1000,
              message: "删除成功",
            });
          } else {
            this.$toast({
              duration: 1000,
              message: rep.data.message,
            });
          }
        });
    },
    handleTop() {
      this.$api
        .setTop({
          gandanhome_id: this.gandanhome_id,
        })
        .then((rep) => {
          let result = rep.data;
          if (result.code == 200) {
            this.$set(this.list[this.dealIndex], "top_flag", 1);
            this.$toast({
              duration: 1000,
              message: "置顶成功",
            });
            this.freshList();
          } else {
            this.$toast({
              duration: 1000,
              message: rep.data.message,
            });
          }
        });
    },
    handleCompleteTask(id) {
      this.$api
        .addGrowRecord({
          task_unique_id: id,
        })
        .then((rep) => {
          var result = rep.data;
          if (result.code == 200) {
              if(result.data){
                this.$toast({
                duration: 2000,
                message:'成长值+1',
              });
             }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleCancelTop() {
      this.$api
        .cancelSetTop({
          gandanhome_id: this.gandanhome_id,
        })
        .then((rep) => {
          let result = rep.data;
          if (result.code == 200) {
            this.$set(this.list[this.dealIndex], "top_flag", 0);
            this.$toast({
              duration: 1000,
              message: "已取消置顶",
            });
            this.freshList();
          } else {
            this.$toast({
              duration: 1000,
              message: rep.data.message,
            });
          }
        });
    },
    onLoad() {
      if (this.type == "searchBytitle") {
        let str = this.keyWord.replace(/\s+/g, "");
        if (str == "") {
          this.page = 1;
          this.list = [];
          this.loading = false;
          this.finished = false;
          //   this.$toast({
          //   duration: 1000,
          //   message: '请输入搜索内容',
          // });
          return false;
        }
      }
      this.page++;
      this.handleList();
    },
    goDetail(id) {
      this.$router.push({
        path: "talkDetail",
        query: {
          id: id,
        },
      });
    },
    onRefresh(){
      this.freshList()
    },
    freshList: throttle(function () {
      if (this.type == "searchBytitle") {
        if (this.keyWord.replace(/\s+/g, "") == "") {
          this.page = 1;
          this.list = [];
          this.loading = false;
          this.finished = false;
          //   this.$toast({
          //   duration: 1000,
          //   message: '请输入搜索内容',
          // });
          return false;
        }
      }
      this.page = 1;
      this.pull_loading=false
      this.list = [];
      this.loading = false;
      this.finished = false;
      this.handleList();
    }, 500),
    handleList() {
      let jsonData = null;
      if (this.type == "searchBytitle") {
        if (this.keyWord.replace(/\s+/g, "") == "") {
          this.page = 1;
          this.list = [];
          this.loading = false;
          this.finished = false;
          //   this.$toast({
          //   duration: 1000,
          //   message: '请输入搜索内容',
          // });
          return false;
        }
        jsonData = {
          type: 1,
          keyWord: this.keyWord,
          page: this.page,
          page_size: 10,
        };
      }else if(this.type =='ralationTopic'){
        jsonData = {
          topic_id: this.topic_id,
          page: this.page,
          page_size: 10,
        };
      } else if (this.type == "patient") {
        jsonData = {
          patient_uuid: this.patient_uuid,
          page: this.page,
          page_size: 10,
        };
      } else {
        jsonData = {
          page: this.page,
          page_size: 10,
        };
      }

      this.api(jsonData).then((rep) => {
        var result = rep.data;
        this.loading = false;
        if (result.code == 200) {
          this.list = this.list.concat(result.data.list);
          if (result.data.list.length < 10) {
            this.finished = true;
          }
          if (this.type == "homeFollow" && this.list.length > 0) {
            this.$emit("getMyFollow", true);
          }
        } else {
          this.$toast({
            duration: 1000,
            message: rep.data.message,
          });
        }
      });
    },
    transforPages(arr, num) {
      const pages = [];
      arr.forEach((item, index) => {
        const page = Math.floor(index / num);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
    handleCancelCollect(index, gandanhome_id) {
      this.$api
        .cancelCollect({
          gandanhome_id: gandanhome_id,
        })
        .then((rep) => {
          let result = rep.data;
          if (result.code == 200) {
            this.$set(this.list[index], "is_collect", 0);
            this.$toast({
              duration: 1000,
              message: "已取消收藏",
            });
          } else {
            this.$toast({
              duration: 1000,
              message: rep.data.message,
            });
          }
        });
    },

    toggleCollect(iscollect, index, gandanhome_id) {
      iscollect == 0
        ? this.handleCollect(index, gandanhome_id)
        : this.handleCancelCollect(index, gandanhome_id);
    },
    handleCollect(index, gandanhome_id) {
      this.$api
        .collect({
          gandanhome_id: gandanhome_id,
        })
        .then((rep) => {
          let result = rep.data;
          if (result.code == 200) {
            this.$set(this.list[index], "is_collect", 1);
            this.$toast({
              duration: 1000,
              message: "收藏成功",
            });
            this.handleCompleteTask('task_add_collect')
          } else {
            this.$toast({
              duration: 1000,
              message: rep.data.message,
            });
          }
        });
    },
    toggleLike(isLike, index, gandanhome_id, likeNum) {
      isLike == 0
        ? this.handleLike(gandanhome_id, index, likeNum)
        : this.handleCancelLike(gandanhome_id, index, likeNum);
    },
    handleCancelLike(gandanhome_id, index, likeNum) {
      this.$api
        .cancelLike({
          gandanhome_id: gandanhome_id,
        })
        .then((rep) => {
          let result = rep.data;
          if (result.code == 200) {
            this.$set(this.list[index], "isLike", 0);
            this.$set(this.list[index], "likeNum", likeNum - 1);
            this.$toast({
              duration: 1000,
              message: "已取消点赞",
            });
          } else {
            this.$toast({
              duration: 1000,
              message: rep.data.message,
            });
          }
        });
    },
    handleLike(gandanhome_id, index, likeNum) {
      this.$api
        .like({
          gandanhome_id: gandanhome_id,
        })
        .then((rep) => {
          let result = rep.data;
          if (result.code == 200) {
            this.$set(this.list[index], "isLike", 1);
            this.$set(this.list[index], "likeNum", likeNum + 1);
            this.$toast({
              duration: 1000,
              message: "点赞成功",
            });
            this.handleCompleteTask('task_add_collect')
          } else {
            this.$toast({
              duration: 1000,
              message: rep.data.message,
            });
          }
        });
    },
  },
};
</script>

<style  scoped>
.info .time {
  font-size: 14px;
  color: #666;
}
.swiperbox {
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
}
.swiperbox .van-swipe {
  width: 100%;
}
.wraper >>> .van-swipe__indicator {
  width: 9px;
  height: 9px;
  opacity: 1;
  background-color: #fff;
}
.swiperbox>>> .van-swipe-item{
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.swiperImg {
  margin:0 auto;
  width:auto;
  opacity: 1;
  position: relative;
  height:142px;
  object-fit: contain;
}
.swipebg{
  top:0;
  height:142px;
  position:absolute;
  width: 100%;
  opacity: 0.5;
  object-fit: contain;
}
.swipebg .swiperImg{
 width:100%;
 height:auto;
 left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.settop {
  width: 35px;
  height: 15px;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
  margin-left: 5px;
  background: linear-gradient(318deg, #3cc7c0 0%, #3cc7c0 0%, #6ef0e9 100%);
  border-radius: 8px;
  color: #fff;
}
.settop span {
  font-size: 12px;
  display: block;
  transform: scale(0.8);
}
.ba {
  width: 100%;
  height: 8px;
  background: #f3f3f3;
}
.dealcell {
  display: flex;
  align-items: center;
  height: 56px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  border-bottom: 1px solid #efefef;
}
.dealcell:last-child {
  border-bottom: none;
}
.more {
  font-size: 16px;
  color: #000;
}
.head[lazy="error"] {
  background: url("../assets/head.png") no-repeat center center;
  background-size: cover;
}
.imgbox {
  width: 100%;
}
.imgbox.tworow {
  width: 66.66%;
}
.imgbox .imgrow {
  margin-top: 10px;
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.imgcell {
  flex: 1;
  max-width: 33.33%;
  position: relative;
}

.imgbox .imgcell:nth-child(2n) {
  text-align: center;
}
.imgbox .imgcell:nth-child(3n) {
  text-align: right;
}
.tulist {
  padding-top: 15px;
  height: calc(100vh - 180px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.tool {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.address {
  font-size: 12px;
  color: #999999;
}
.zan_comment {
  min-width: 75px;
  display: flex;
  font-size: 14px;
  color: #333333;
  justify-content: space-between;
}
.zan {
  display: flex;
  align-items: center;
}
.collectbox {
  margin: 0 20px;
}
.zan img,
.comment img,
.collectbox img {
  width: 20px;
  height: 20px;
}
.comment {
  align-items: center;
  display: flex;
}

.msgcell {
  background: #fff;
  padding: 8px 15px;
  border-bottom: 5px solid #f4f4f4;
}

.namebox {
   width:100%;
  display: flex;
  justify-content: space-between;
}
.namebox .info {
  display: flex;
  flex: 1;
  height: 40px;
  justify-content: space-between;
  margin-right: 10px;
  margin-left: 6px;
  flex-direction: column;
}
.namebox .left {
  display: flex;
  flex: 1;
  align-items: center;
}
.msgcell .leftcon {
  display: flex;
  align-items: center;
}
.msgcell .avastar {
  width: 43px;
  height: 43px;
  border-radius: 50%;
}
.name_level {
  display: flex;
  align-items: center;
}
.name_level .name {
  white-space: nowrap;
  font-size: 18px;
  color: #000000;
}

.level {
  margin-left: 5px;
  margin-right: 4px;
  height: 15px;
}
.level:first-child {
  margin-left: 4px;
}
.listbox {
  margin-top: 10px;
}
.listbox .cell {
  margin: 0 15px;
  padding: 13px 10px;
  background: #fff;
  display: flex;
  align-items: center;
  border-radius: 4px;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
}
.listbox .cell .head {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.fllow {
  width: 68px;
  height: 25px;
  display: flex;
  color: #999;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 25px;
  border: 1px solid #999999;
}
.listbox .cell .name {
  font-size: 16px;
  color: #333333;
  margin-left: 24px;
}
.listbox .cell:last-child {
  border-bottom: none;
}
.listbox .cell .left {
  display: flex;
  align-items: center;
}
.msglist .title {
  line-height: 23px;
  margin-top: 12px;
  font-size: 17px;
  color: #000000;
}
.msglist .msgdetail {
  margin-top: 4px;
  font-size: 15px;
  line-height: 22px;
  color: #666666;
}
.msglist .msgdetail span {
  color: #3cc7c0;
}
.msglist {
  background: transparent;
}
</style>
