<template>
  <div
    :key="timer"
    :style="styleData.maskStyle"
    class="maskStyle"
    v-show="isShow"
    ref="winnersRecord"
    @click="styleClick('click', 'winnersRecord')"
    @mousemove="styleClick('mousemove', 'winnersRecord')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="mainStyleDiv" :style="styleData.mainStyleDiv">
      <img
        class="winRecordImg"
        :style="styleData.winRecordImg"
        :src="styleData.winRecordImg.imageUrl"
      />
      <img
        v-if="closeImg"
        class="closeImg"
        @click="closeClick"
        :style="styleData.closeImgStyle"
        :src="closeImg"
      />
      <div class="recordListDiv" :style="styleData.recordListDiv">
        <div v-if="winRcordListData.length > 0">
          <div class="item" v-if="winRcordListData.length < 5">
            <div
              v-for="(item, index) in winRcordListData"
              :key="index"
              :style="styleData.recordItemDiv"
            >
              <div class="recordItemLeft" :style="styleData.recordItemLeft">
                <img
                  :style="styleData.avatarImg"
                  :src="item.userImg == '' ? userImg : item[keyData.userImg]"
                />
                <span :style="styleData.userName">{{
                  item[keyData.nickName]
                }}</span>
              </div>
              <span
                class="date"
                v-text="item[keyData.prizeName]"
                :style="styleData.recordItemRight"
              ></span>
            </div>
          </div>
          <vue-seamless-scroll
            v-else
            :data="winRcordListData"
            class="seamless-warp"
          >
            <div class="item">
              <div
                v-for="(item, index) in winRcordListData"
                :key="index"
                :style="styleData.recordItemDiv"
              >
                <div class="recordItemLeft" :style="styleData.recordItemLeft">
                  <img
                    :style="styleData.avatarImg"
                    :src="item.userImg == '' ? userImg : item[keyData.userImg]"
                  />
                  <span :style="styleData.userName">{{
                    item[keyData.nickName]
                  }}</span>
                </div>
                <span
                  class="date"
                  v-text="item[keyData.prizeName]"
                  :style="styleData.recordItemRight"
                ></span>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
        <div v-else class="noData" :style="record">暂无相关获奖信息哦~</div>
        <div v-if="isShowtututu && winRcordListData.length <= 0">
          <img :style="failimg" :src="keyData.noneimage" alt="图片加载失败" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dataJson from "../../../../src/data.json";
import styleJson from "./winnersRecord.json";
import apis1 from "../../../util/apis1.js";
import vueSeamlessScroll from "vue-seamless-scroll";
let { getWinnerData } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      timer: new Date().getTime(),
      isOpenTouch: false,
      isShowtututu: false, //暂无数据图片
      failimg: "", //暂无数据图片样式
      record: "", //暂无数据文字样式
      mainStyleDiv: "", //背景样式
      winRecordImg: "", //标题背景样式
      recordListStyle: "", //列表样式
      recordItemStyle: "", //列表item样式
      recordItemLeftStyle: "", //列表左面样式
      recordItemRight: "", //列表右面样式
      userImgImg: "", //获奖人头像
      maskStyle: "", //幕布样式
      closeImgStyle: "", //关闭图片样式
      userImg:
        "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
      winRcordListData: [],
      isShow: false,

      titleImage: "", //标题图片
      closeImg: "", //关闭图片
      styleDataOld: {},
    };
  },
  watch: {
    styleData: {
      handler(val) {
        console.log("styleData", val);
        this.styleData = val;
        this.$forceUpdate();
      },
      deep: true,
    },
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    console.log("styleData7777", this.styleData);
    //如果父组件传递过来的样式数据则使用样式数据否则使用默认数据
    // this.activityType = sessionStorage.getItem("activityType");
    // if (this.activityType == 10031) {
    //   if (this.styleData && JSON.stringify(this.styleData) != "{}") {
    //     console.log(this.styleData, 333);
    //     this.styleData.winRecordImg.imageUrl = this.styleData.winRecordImg
    //       .imageUrl
    //       ? this.styleData.winRecordImg.imageUrl
    //       : this.datas.titleImage;
    //   } else {
    //     this.styleData = styleJson; //默认数据
    //   }
    // }

    this.datas = this.datas ? this.datas : this.datasCom;
    this.styleData = this.styleData ? this.styleData : this.styleDataCom;
    this.keyData = this.keyData ? this.keyData : this.keyDataCom;
    this.isShowtututu = this.datas.isShowtututu;
    this.failimg = this.styleData.failimg;
    this.record = this.styleData.record;

    console.log(this.record, "打老虎");
    console.log(this.datas, "this.datas");
    console.log(this.styleData, "this.styleData");

    this.titleImage = this.datas.titleImage;
    console.log(this.datas, "dsfhglsadf");
    this.isShow = this.datas.isShowRecord;

    //是否显示重新调用接口
    this.publicData.$on("isNotyFiceWinnerReorrd", (datas, isTemplate) => {
      this.isTemplate = isTemplate;
      if (datas == true) {
        this.isShow = true;
        this.initData();
      } else {
        this.isShow = false;
      }
    });
    this.publicData.$on("showCarouselimg", (datas) => {
      console.log(datas);
      if (datas == false) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    });

    this.closeImg = this.datas.closeImg;
    this.initData();
    this.timer = new Date().getTime();
  },
  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);
      }
    },
    // showDialog(){

    // },
    closeClick() {
      this.isShow = false;
    },

    initData() {
      var datasAll = this.templateData;
      console.log(this.isTemplate, "this.isTemplate");
      console.log(datasAll, "datasAllthis.isTemplate");
      if (this.isTemplate == true) {
        if (this.isWebClick) {
          this.winRcordListData = [
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "z***撒",
              prizeName: "中了100京豆",
            },
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "a***3",
              prizeName: "中了满100减5优惠券",
            },
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "李***云",
              prizeName: "中了充电宝",
            },
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "j***3",
              prizeName: "中了充电宝",
            },
          ]; //获奖名单
        } else {
          // if (!datasAll) {
          this.winRcordListData = [
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "z***撒",
              prizeName: "中了100京豆",
            },
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "a***3",
              prizeName: "中了满100减5优惠券",
            },
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "李***云",
              prizeName: "中了充电宝",
            },
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "j***3",
              prizeName: "中了充电宝",
            },
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "j***8",
              prizeName: "中了充电宝",
            },
            {
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
              nickName: "j***3",
              prizeName: "中了充电宝",
            },
          ]; //获奖名单
          // }
        }
      } else {
        //去请求接口
        if (this.isShow) {
          getWinnerData((initDtasAll) => {
            this.winRcordListData = initDtasAll.data;
            for (var i = 0; i < this.winRcordListData.length; i++) {
              this.winRcordListData[i].nickName =
                this.winRcordListData[i].nickName.substr(0, 1) +
                "***" +
                this.winRcordListData[i].nickName.substr(-1, 1);
            }
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.mainStyleDiv {
  .noData {
    font-size: 0.24rem;
    width: 100%;
    color: #8c8c8c;
    height: calc(100% - 0.3rem);
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.recordListDiv::-webkit-scrollbar {
  width: 0;
}
.maskStyle {
  position: relative;
}

@keyframes rowup {
  0% {
    transform: translate3d(0, 300px, 0);
  }
  100% {
    transform: translate3d(0, -300px, 0);
  }
}
</style>
