<template>
  <div :style="maskStyle" v-show="isShow">
      <div class="mainStyleDiv" :style="mainStyleDiv">
        <img class="winRecordImg" :style="winRecordImg" :src="titleImage" />
        <img v-if="closeImg" class="closeImg" @click="closeClick" :style="closeImgStyle" :src='closeImg' />
        <div class="recordListDiv" :style="recordListStyle">
          <div v-if="winRcordListData.length > 0">
            <ul class="item" v-if="winRcordListData.length < 5">
              <li v-for="(item, index) in winRcordListData" :key="index" :style="recordItemStyle">
                <div class="recordItemLeft" :style="recordItemLeftStyle">
                  <img :style="userImgImg" :src="item[keyData.userImg]" />
                  <span>{{ item[keyData.nickName] }}</span>
                </div>
                <span class="date" v-text="item[keyData.prizeName]" :style="recordItemRight"></span>
              </li>
            </ul>
            <vue-seamless-scroll v-else :data="winRcordListData" class="seamless-warp">
              <ul class="item">
                <li v-for="(item, index) in winRcordListData" :key="index" :style="recordItemStyle">
                  <div class="recordItemLeft" :style="recordItemLeftStyle">
                    <img :style="userImgImg" :src="item[keyData.userImg]" />
                    <span>{{ item[keyData.nickName] }}</span>
                  </div>
                  <span class="date" v-text="item[keyData.prizeName]" :style="recordItemRight"></span>
                </li>
              </ul>
            </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 apis from '../../../util/apis1.js';
let { getWinnerData } = apis;
export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData'],
  data() {
    return {
      isOpenTouch: false,
      isShowtututu:false,//暂无数据图片
      failimg:'',//暂无数据图片样式
      record:'',//暂无数据文字样式
      mainStyleDiv: '', //背景样式
      winRecordImg: '', //标题背景样式
      recordListStyle: '', //列表样式
      recordItemStyle: '', //列表item样式
      recordItemLeftStyle: '', //列表左面样式
      recordItemRight: '', //列表右面样式
      userImgImg: '', //获奖人头像
      maskStyle:'',//幕布样式
      closeImgStyle:'',//关闭图片样式

      winRcordListData: [],
      isShow: false,

      titleImage: '' ,//标题图片
      closeImg:'',//关闭图片
    };
  },

  created() {
    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.winRecordStyle.failimg;
    this.record = this.styleData.winRecordStyle.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.maskStyle = this.styleData.winRecordStyle.maskStyle;
    this.mainStyleDiv = this.styleData.winRecordStyle.mainStyleDiv;
    this.closeImgStyle = this.styleData.winRecordStyle.closeImgStyle;

    this.winRecordImg = this.styleData.winRecordStyle.winRecordImg;
    this.recordListStyle = this.styleData.winRecordStyle.recordListDiv;
    this.recordItemStyle = this.styleData.winRecordStyle.recordItemDiv;
    this.recordItemLeftStyle = this.styleData.winRecordStyle.recordItemLeft;
    this.recordItemRight = this.styleData.winRecordStyle.recordItemRight;
    this.userImgImg = this.styleData.winRecordStyle.avatarImg;
    this.closeImg = this.datas.closeImg
    this.initData();
  },
  methods: {
    // showDialog(){

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

    initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        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 {
    margin-top: 0.24rem;
    font-size: 0.4rem;
  }
}

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