<template>
  <div
    class="maskStyle"
    :style="styleData.maskStyle"
    v-show="isShow"
    ref="winnersRecord1"
    @click="styleClick('click', 'winnersRecord1')"
    @mousemove="styleClick('mousemove', 'winnersRecord1')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="mainStyleDiv" :style="styleData.mainStyleDiv">
      <img class="winRecordImg" :style="styleData.winRecordImg" :src="titleImage" />
      <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">
          <ul class="item" v-if="winRcordListData.length < 5">
            <li
              v-for="(item, index) in winRcordListData"
              :key="index"
              :style="styleData.recordItemDiv"
            >
              <div class="recordItemLeft" :style="styleData.recordItemLeft">
                <img :style="styleData.avatarImg" :src="item[keyData.userImg]" />
                <span>{{ item[keyData.nickName] }}</span>
              </div>
              <span
                class="date"
                v-text="item[keyData.prizeName]"
                :style="styleData.recordItemRight"
              ></span>
            </li>
          </ul>
          <vue-seamless-scroll
            v-else
            :data="winRcordListData"
            class="seamless-warp"
          >
            <ul class="item" :style="styleData">
              <li
                v-for="(item, index) in winRcordListData"
                :key="index"
                :style="styleData.recordItemDiv"
              >
                <div class="recordItemLeft" :style="styleData.recordItemLeft">
                  <img :style="styleData.avatarImg" :src="item[keyData.userImg]" />
                  <span>{{ item[keyData.nickName] }}</span>
                </div>
                <span
                  class="date"
                  v-text="item[keyData.prizeName]"
                  :style="styleData.recordItemRight"
                ></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
        <div v-else class="noData" :style="styleData.failimgdiv">
          <div>
            <img
              :style="styleData.failimg"
              :src="keyData.noneimage"
              alt="图片加载失败"
            />
          </div>
          <p :style="styleData.record">暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dataJson from "../../../../src/data.json";
import apis1 from "../../../util/apis1.js";
let { getWinnerData } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      isOpenTouch: false,

      winRcordListData: [],
      isShow: false,

      titleImage: "", //标题图片
      closeImg: "", //关闭图片
      styleDataOld: {},
    };
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.datas = this.datas ? this.datas : this.datasCom;
    this.styleData = this.styleData ? this.styleData : this.styleDataCom;
    this.keyData = this.keyData ? this.keyData : this.keyDataCom;

    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();
  },
  methods: {
    // showDialog(){

    // },
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    closeClick() {
      this.isShow = false;
    },

    initData() {
      var datasAll = this.templateData;
      if (this.isTemplate) {
        var datasAll = this.templateData;
        console.log(datasAll, "datasAll");
        if (datasAll) {
        } else {
          if (this.isWebClick) {
            this.winRcordListData = [
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                nickName: "z***撒",
                prizeName: "中了100京豆",
              },
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                nickName: "a***3",
                prizeName: "中了满100减5优惠券",
              },
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                nickName: "李***云",
                prizeName: "中了充电宝",
              },
            ]; //获奖名单
          } else {
            this.winRcordListData = [
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                nickName: "z***撒",
                prizeName: "中了100京豆",
              },
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                nickName: "a***3",
                prizeName: "中了满100减5优惠券",
              },
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                nickName: "李***云",
                prizeName: "中了充电宝",
              },
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                nickName: "j***3",
                prizeName: "中了充电宝",
              },
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                nickName: "j***8",
                prizeName: "中了充电宝",
              },
              {
                userImg:
                  "http://storage.360buyimg.com/i.imageUpload/6a645f3434653364326232323533396131363030303737313930373338_mid.jpg",
                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 {
    margin-top: 0.24rem;
    font-size: 0.4rem;
  }
}
.maskStyle {
  position: relative;
}

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