s<template>
  <div :key="keyee" ref="evaluationList" @click="styleClick('click', 'evaluationList')"
    @mousemove="styleClick('mousemove', 'evaluationList')" @mouseout="styleClick('mouseout')">
    <div :style="styleData.listTab">
      <div class="myTab" :style="tabClass ? styleData.listTabActive : styleData.listTabActive1" @click="tabClick">
        全部晒单
      </div>
      <div class="myTab" :style="tabClass ? styleData.listTabActive1 : styleData.listTabActive" @click="tabMyClick">
        我的晒单
      </div>
    </div>
    <div :style="styleData.tabStyle">
      <!-- <div :style="styleData.smallTab" v-if="tabClass">
        <div class="everySmallTab" :style="smallTabClass ? styleData.smallTabActive : smallTabActive1"
          @click="smallTabClick">
          最新
        </div>
        <div class="everySmallTab" :style="smallTabClass ? styleData.smallTabActive1 : styleData.smallTabActive"
          @click="smallTabHotClick">
          最热
        </div>
      </div> -->
      <div :style="styleData.listTabContent">
        <div v-if="dataList.length == 0" :style="styleData.noTab">
          暂无相关晒单哦~
        </div>
        <div v-else class="sheetdiv">

          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="show-evaluation">
            <div v-for="(item, index) in dataList" :key="index" :style="styleData.tabListStyle" class="tabList">
              <div v-if="item.isTop == 1" class="choiceness"></div>
              <img v-if="item.detail.images.length > 0" :src="`${firstImg + item.detail.images[0].imgUrl}`" alt @click="imgClick(item.detail, index)" />
              <van-rate v-model="item.detail.appraiseScore || item.detail.score" icon="like " void-icon="like-o"
                :size="12" class="likevan" :readonly="true" />
              <div class="tabListText">{{ item.detail.content }}</div>
              <div class="userData">
                <div class="userData" style="margin-top: -0.07rem">
                  <img :src="item.detail.headPortrait" alt class="userHeader" />
                  <div class="userName">{{ item.detail.nickName }}</div>
                </div>
                <div class="userPointdiv">
                  <div class="userPoint" v-lz-click="'10'" @click="upNums(item.detail, index, item)">
                    {{ item.detail.upNums || item.clicks }}
                  </div>
                  <img @click="upNums(item.detail, index, item)" class="userPointimg"
                    src="https://img10.360buyimg.com/imgzone/jfs/t1/47470/22/16858/711/5ddcf76aE0432520f/01167ed29fa3bc29.png"
                    alt />
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { List, Rate, Toast } from "vant";
import apis1 from "../../../util/apis1.js";
Vue.use(List);
Vue.use(Rate);
import { buyUserSheetPopComService } from "../../../util/hdzxtcomCreate.js";
import bus from "../../../util/bus.js";
let { newBuyersGetMyOrders, newBuyersGiveLike } = apis1;
export default {
  props: [
    "styleData",
    "keyData",
    "datas",
    "isTemplate",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      tabClass: true, //全部晒单或我的晒单
      smallTabClass: true, //最新或最热
      tabList: [], //订单数据
      dataList: [], //总数据
      finished: false, //加载完成
      loading: false, //列表到底加载中
      value: 5,
      firstImg: "https://img10.360buyimg.com/imgzone/",
      nowClickUp: 0, //点赞数
      userName: "", //用户名
      upClick: [], //是否点过赞
      disStatus: 0,
      keyee: 0,
      allData: null,
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initdata();
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initdata() {
      if (this.isTemplate) {
        this.dataList = [
          {
            detail: {
              appraiseScore: 3,
              appraiseTime: "2021-08-04 12:58:53",
              commentId: "9c356f4d28042fb8bba1c0de0f677031",
              content: "每次团建用来喝，不头疼，又划算。",
              hasUp: false,
              headPortrait:
                "http://storage.360buyimg.com/i.imageUpload/72756e7a6a6331353033313138343036363831_mid.jpg",
              images: [
                {
                  id: 1507712161,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/196938/28/1495/193543/610a1e8dE2b6985f0/12f6c071454a4b9e.jpg",
                },
              ],
              nickName: "runzjc",
              pin: "jt6K5KfPqE3RLa5woeIPl1J9+Pn/Jlmf0GhgDeq4Gl7GrtyYutzbki6cJODXVM1+",
              skuId: "1493813396",
              skuImage:
                "jfs/t1/184011/11/17387/184836/610a0d17Ec173841c/5b2a355a8d58506c.jpg",
              skuName:
                "【官方旗舰】古井贡酒 年份原浆献礼版（第六代）50度500ml*6瓶（内含3个手提袋）",
              status: 0,
              upNums: 1,
              venderId: 92739,
              videos: null,
            },
          },
          {
            detail: {
              appraiseScore: 4,
              appraiseTime: "2021-07-27 08:10:51",
              commentId: "f74a723f9d45401e15ca9cc5dc19db42",
              content: "安徽好酒好喝好喝好喝",
              hasUp: false,
              headPortrait: null,
              images: [
                {
                  id: 1500919981,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/194422/18/15229/35657/60ff4f0bE2de73f78/bc8688b2cceffb5f.jpg",
                },
                {
                  id: 1500919982,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/195646/4/14903/43752/60ff4f0bEcad78c55/e097805785553b73.jpg",
                },
              ],
              nickName: "wuyanguo1982",
              pin: "DoyO0RksK45W9cq89eXa5auPlrbwajr+mlKSAUQGJeinh9LA4YCEcFb8KdjJBCTv",
              skuId: "10020366998084",
              skuImage:
                "jfs/t1/132689/9/6929/138743/5f35df8aE19ab4996/edd133b1d9b0423f.jpg",
              skuName:
                "【官方旗舰】古井贡酒第六代 55度 500mL*6瓶纯粮食 白酒整箱",
              status: 0,
              upNums: 2,
              venderId: 92739,
              videos: null,
            },
          },
          {
            detail: {
              appraiseScore: 5,
              appraiseTime: "2021-07-17 18:14:40",
              commentId: "1ab80b5e6e47c2e47de3e51a15ab81b4",
              content:
                "买过，幸福，1989，梦梦，老瓷贡，经典，这回试试这个青花大坛。古井还是一如既往的好喝。",
              hasUp: false,
              headPortrait:
                "http://storage.360buyimg.com/i.imageUpload/6a645f3432623835626534363734663631363133323135383239313039_mid.jpg",
              images: [
                {
                  id: 1493347418,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/189861/21/13587/136599/60f2ad8eE7fd772f2/5d892be3e03ee9b3.jpg",
                },
                {
                  id: 1493347419,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/194133/23/13621/93344/60f2ad8fE5fd0f0bb/af41ddea32248115.jpg",
                },
                {
                  id: 1493347420,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/189530/2/13559/68197/60f2ad8fE435657c9/5dbb0d693a0328d0.jpg",
                },
              ],
              nickName: "南書先生",
              pin: "kFg6C0OTZKbIyElKjiYaQE7oeVP9kq2pYSH90mYt4m3fwcJlClpxrfmVYaGKuquQkdK3rLBQpEQH9V4tdrrh0w==",
              skuId: "1305750766",
              skuImage:
                "jfs/t1/178711/23/17510/138747/610a2962E037b33db/5eed53217fedec7f.jpg",
              skuName:
                "【官方旗舰】古井贡酒青花大坛 50度2500ml*1坛 浓香型白酒 大坛装纯粮食白酒",
              status: 0,
              upNums: 3,
              venderId: 92739,
              videos: [
                {
                  id: 1493348261,
                  mainUrl:
                    "https://jvod.300hu.com/img/2021/87408511/1/img2.jpg",
                  videoHeight: 1280,
                  videoId: "595367677",
                  videoLength: 12,
                  videoTitle: "",
                  videoUrl:
                    "https://jvod.300hu.com/vod/product/705768c8-b145-4eb3-ae81-0e62faf03cf2/602440ca5dc94ac495201ae5989d7223.mp4?source=2&h265=h265/18799/b4905841fac7459081148038cee41016.mp4",
                  videoWidth: 606,
                },
              ],
            },
          },
          {
            detail: {
              appraiseScore: 2,
              appraiseTime: "2021-07-23 16:43:20",
              commentId: "fc70578e278e390dbb15ffbb76cc3ec1",
              content: "包装设计欣赏，酒喝光了，不上头的，好",
              hasUp: false,
              headPortrait: null,
              images: [
                {
                  id: 1498116404,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/184786/1/15494/193633/60fa8127E52edcda8/7be2341563874d5c.jpg",
                },
                {
                  id: 1498116405,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/187107/6/14580/180050/60fa8127Ef72aeea7/2dbfdcacbc11dfd4.jpg",
                },
                {
                  id: 1498116406,
                  imgTitle: "",
                  imgUrl:
                    "https://img10.360buyimg.com/imgzone/jfs/t1/184329/27/15334/157915/60fa8127E5ff5ecd0/a3fada55eb35e963.jpg",
                },
              ],
              nickName: "jd_海阔天空",
              pin: "gUSTv4k88c2TzssiWggF9yNS2+cedv7BrsZoUDa4lGSHSnwnXFQKK9yQco/OGmHebU48Dr07k+7+k1UaXRbZKg==",
              skuId: "10025844963809",
              skuImage:
                "jfs/t1/157135/21/305/137187/5fea91abE787d4c4d/0a06b13497aa63e0.jpg",
              skuName:
                "【官方旗舰】古井贡酒年份原浆 古16 50度500ml*2瓶 浓香型白酒礼盒装 送礼白酒",
              status: 0,
              upNums: 1,
              venderId: 92739,
              videos: null,
            },
          },
        ];
        this.dataList.forEach((v, i) => {
          this.upClick.splice(i, 1, true);
          console.log(v.detail, "ddddddddddd");
          v.detail.nickName =
            v.detail.nickName.slice(0, 1) + "***" + v.detail.nickName.slice(-1);
          v.detail.headPortrait =
            v.detail.headPortrait == null
              ? "https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg"
              : v.detail.headPortrait;
        });
        return;
      } else {
        this.tabClass = true;
        this.smallTabClass = true;
        bus.$on("data", (content) => {
          console.log(content, "hahha4");
          this.dataList = content;
          this.disStatus = content.disStatus;
          content.forEach((v, i) => {
            this.tabList.splice(i, 1, v.detail);
          });
          this.userName = content.nickName;
          this.dataList.forEach((v, i) => {
            this.upClick.splice(i, 1, true);
            v.detail.nickName =
              v.nickName.slice(0, 1) + "***" + v.nickName.slice(-1);
            v.detail.headPortrait =
              content[i] == null
                ? "https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg"
                : content[i].userImg;
          });
        });
        bus.$on("initdata", (content) => {
          this.allData = content.data;
          console.log(content, "initdata");
        });
        console.log(this.tabList);
      }
    },
    tabClick() {
      if (this.isTemplate) {
        this.$toast("手机预览，仅供查看");
        return;
      }
      if (this.tabClass == true) {
        return;
      }
      this.tabClass = true; //控制选项卡样式切换
      newBuyersGetMyOrders(0, 0, (data) => {
        console.log(data.data, "hahha1");
        this.dataList = data.data;
        this.disStatus = data.data.disStatus;
        data.data.forEach((v, i) => {
          this.tabList.splice(i, 1, v.detail);
        });
        this.userName = data.data.nickName;
        this.tabList.forEach((v, i) => {
          this.upClick.splice(i, 1, true);
          v.nickName = v.nickName.slice(0, 1) + "***" + v.nickName.slice(-1);
          v.headPortrait =
            data.data[i] == null
              ? "https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg"
              : data.data[i].userImg;
        });
        this.keyee++;
      });
    },
    tabMyClick() {
      if (this.isTemplate) {
        this.$toast("手机预览，仅供查看");
        return;
      }
      if (this.tabClass == false) {
        return;
      }
      this.tabClass = false; //控制选项卡样式切换
      newBuyersGetMyOrders(1, 0, (data) => {
        console.log(data.data, "hahha2");
        this.dataList = data.data;
        this.disStatus = data.data.disStatus;
        data.data.forEach((v, i) => {
          this.tabList.splice(i, 1, v.detail);
        });
        this.userName = data.data.nickName;
        this.tabList.forEach((v, i) => {
          this.upClick.splice(i, 1, true);
          v.nickName = v.nickName.slice(0, 1) + "***" + v.nickName.slice(-1);
          v.headPortrait =
            data.data[i] == null
              ? "https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg"
              : data.data[i].userImg;
        });
        this.keyee++;
      });
    },
    smallTabClick() {
      if (this.isTemplate) {
        this.$toast("手机预览，仅供查看");
        return;
      }
      if (this.smallTabClass == true) {
        return;
      }
      this.smallTabClass = !this.smallTabClass; //控制选项卡样式切换
      newBuyersGetMyOrders(0, 0, (data) => {
        console.log(data.data, "hahha3");
        this.dataList = data.data;
        data.data.forEach((v, i) => {
          this.tabList.splice(i, 1, v.detail);
        });
        this.userName = data.data.nickName;
        this.tabList.forEach((v, i) => {
          this.upClick.splice(i, 1, true);
          v.nickName = v.nickName.slice(0, 1) + "***" + v.nickName.slice(-1);
          v.headPortrait =
            data.data[i] == null
              ? "https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg"
              : data.data[i].userImg;
        });
        this.keyee++;
      });
    },
    smallTabHotClick() {
      if (this.isTemplate) {
        this.$toast("手机预览，仅供查看");
        return;
      }
      if (this.smallTabClass == false) {
        return;
      }
      this.smallTabClass = !this.smallTabClass; //控制选项卡样式切换
      newBuyersGetMyOrders(0, 1, (data) => {
        console.log(data.data, "hahha");
        this.dataList = data.data;
        data.data.forEach((v, i) => {
          this.tabList.splice(i, 1, v.detail);
        });
        this.userName = data.data.nickName;
        this.tabList.forEach((v, i) => {
          this.upClick.splice(i, 1, true);
          v.nickName = v.nickName.slice(0, 1) + "***" + v.nickName.slice(-1);
          v.headPortrait =
            data.data[i] == null
              ? "https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg"
              : data.data[i].userImg;
        });
        this.keyee++;
      });
    },
    imgClick(item, index) {
      if (this.isTemplate) {
        this.$toast("手机预览，仅供查看");
        return;
      }
      console.log("sukabulie");
      buyUserSheetPopComService.create(
        item,
        this.dataList[index],
        this.allData,
        (submit) => {
          buyUserSheetPopComService.close();
        }
      );
    },
    upNums(item, index, data) {
      if (this.isTemplate) {
        this.$toast("手机预览，仅供查看");
        return;
      }
      console.log(item);
      if (this.disStatus == 1) {
        Toast("领奖期不能点赞！");
        return;
      }
      if (item.nickName == this.userName) {
        Toast("自己不能给自己点赞");
        return;
      } else {
        if (this.upClick[index]) {
          console.log(data.commentId, item.skuid, "ssssssssss");
          newBuyersGiveLike(data.commentId, item.skuid, (suka) => {
            console.log(suka, "suak");
            if (suka.data == false) {
              Toast("点赞失败");
            } else {
              this.upClick.splice(index, 1, false);
              this.dataList[index].clicks++;
              Toast("点赞成功");
            }
          });
        } else {
          Toast("点赞失败");
        }
      }
    },
    onLoad() {
      // if (this.tabList.length < 10) {
        this.loading = false;
      // }else{

      // }
    },
  },
};
</script>
<style lang="scss" scoped>
// #listTabActive {
//   width: 3.32rem;
//   height: 0.8rem;
//   background: #ff7c7c;
//   font-size: 0.36rem;
//   color: #fff;
// }
// #smallTabActive {
//   color: #f23c3c;
//   border-bottom: solid 1px #f23c3c;
// }
.myTab {
  width: 2.48rem;
  height: 0.65rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.3rem;
  color: #333;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #fff;
  &:last-child {
    margin-left: 0.1rem;
  }
}
.everySmallTab {
  width: 1.64rem;
  height: 0.78rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.3rem;
  color: #252525;
}
.show-evaluation {
  width: 6.32rem;
  margin: 0.35rem auto 0;
  // column-count: 2;
  column-gap: 0.1rem;
  display: flex;
  flex-wrap: wrap;
}
.tabList {
  margin-top: 0.1rem;
  position: relative;
}
.tabList:nth-child(1) {
  margin-top: 0;
}
.tabList:nth-child(2) {
  margin-top: 0;
}
.tabListText {
  font-size: 0.2rem;
  color: rgb(102, 102, 102);
  padding: 0 0.1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 0.1rem;
  overflow: hidden;
  text-align: left;
  min-height: 0.6rem;
}
.userData {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0.1rem 0.2rem;
}
.userHeader {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}
.userName {
  font-size: 0.24rem;
  margin-left: 0.1rem;
  margin-top: 0.05rem;
  white-space: nowrap;
}
.userPoint {
  margin-right: 0.1rem;
  margin-top: 0.05rem;
  color: red;
  font-size: 0.24rem;
}
.sheetdiv {
  width: 100%;
}
.likevan {
  margin-top: 0.1rem;
}
.userData {
  flex: 1;
  display: flex;
}
.userPointdiv {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  margin-top: 0.05rem;
}
.userPointimg {
  width: 0.3rem;
  height: 0.3rem;
}
.choiceness{
    position: absolute;
    right: 0;
    width: 0.7rem;
    background-size: contain;
    height: 0.3rem;
    background-repeat: no-repeat;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/205252/3/19361/1858/63914b35Eeb1401b7/a72a29325425f323.png);
}
</style>