<template>
  <div :class="activityType == '10081'?'prizePopMaskDiv1':'prizePopMaskDiv'" v-show="show">
    <basicPop :pop="pop" @closeClick="closeClick">
      <div class="listDivStyle" :style="styleDataNew.listDivStyle" v-if="drawListData.length > 0">
        <div class="itemDivStyle" :style="styleDataNew.itemDivStyle" v-for="(item, index) in drawListData" :key="index">
          <div class="prizeTypeStyle" :style="styleDataNew.prizeTypeStyle">
            <span v-if="item[keyData.prizeType]">
              <!-- {{ item[keyData.prizeType] == '1' ? '京豆' : item[keyData.prizeType] == '2' ? '优惠券' : item[keyData.prizeType] == '3' ? '实物' : '积分' }} -->
              <span v-if="item[keyData.prizeType] == '1'">京豆</span>
              <span v-if="item[keyData.prizeType] == '2'">优惠券</span>
              <span v-if="item[keyData.prizeType] == '3'">实物</span>
              <span v-if="item[keyData.prizeType] == '4'">积分</span>
              <span v-if="item[keyData.prizeType] == '5'">专享价</span>
              <span v-if="item[keyData.prizeType] == '6'">红包</span>
              <span v-if="item[keyData.prizeType] == '7'">礼品卡</span>
              <span v-if="item[keyData.prizeType] == '8'">京东E卡</span>
              <span v-if="item[keyData.prizeType] == '9'">京东plus会员卡</span>
              <span v-if="item[keyData.prizeType] == '10'">爱奇艺会员卡</span>
              <span v-if="item[keyData.prizeType] == '12'">福禄</span>
            </span>

            <div v-if="item[keyData.prizeType] == 3 && item[keyData.logisticsJson] && item.isEditAddress && needAddress == '1'">
              <span v-if="JSON.parse(item[keyData.logisticsJson]).realName">收货人：{{ JSON.parse(item[keyData.logisticsJson]).realName }}</span>
            </div>
          </div>
          <div class="prizeBottomStyle" :style="styleDataNew.prizeBottomStyle">
            <div class="prizeLeftStyle" :style="styleDataNew.prizeLeftStyle">
              <div v-if="item[keyData.prizeUrl]"><img class="prizeImgStyle" :style="styleDataNew.prizeImgStyle" :src="item[keyData.prizeUrl]" /></div>
              <div class="prizeDetailStyle" :style="styleDataNew.prizeDetailStyle">
                <ul v-if="item[keyData.prizeName]" class="prizeNameStyle" :style="styleDataNew.prizeNameStyle">
                  {{
                    item[keyData.prizeName]
                  }}
                </ul>
                <ul v-if="item.createTime" class="prizeDateStyle" :style="styleDataNew.prizeDateStyle">
                  获奖时间：{{
                    item.createTime
                  }}
                </ul>
              </div>
            </div>
            <div v-if="item[keyData.prizeType] != '9' && item[keyData.prizeType] != '10' && item[keyData.prizeType] != '5'" class="prizeRightStyle" :style="styleDataNew.prizeRightStyle">
              <div
                class="prizeStatusStyle"
                :style="styleDataNew.prizeStatusStyle"
                v-if="(item[keyData.prizeType] != '3' && item[keyData.prizeType] != '12') || (item[keyData.prizeType] == '12' && item.sendResult === 1)"
              >
                已发放
              </div>

              <div class="prizeDaiStatusStyle12" :style="styleDataNew.prizeDaiStatusStyle12" v-if="item[keyData.prizeType] == '12' && item.sendResult !== 1">待领取</div>
              <div class="prizeStatusStyle12" :style="styleDataNew.prizeStatusStyle12" v-if="item[keyData.prizeType] == '12' && item.sendResult !== 1" @click="getPrizeClick(index, item)">
                点击领取
              </div>

              <div class="prizeStatusStyle" :style="styleDataNew.prizeStatusStyle" v-if="item[keyData.prizeType] == '7'" @click="giftCardExchange(index)">查看详情</div>

              <div class="logisticsStateClass" :style="styleDataNew.logisticsStateStyle" v-if="item[keyData.prizeType] == '3' && needAddress == '1'">
                <div v-if="item.logisticsState == 0">
                  <div class="logisticsStatePClass" @click="deliverFun(item)" :style="styleDataNew.logisticsStatePClass">待发货</div>
                  <div v-if="item.isTimeout">
                    <div class="prizeEditGrayStyle" :style="styleDataNew.prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ item.logisticsObj.realName ? '修改地址' : '填写地址' }}</div>
                  </div>

                  <div v-else class="prizeEditStyle" :style="styleDataNew.prizeEditStyle" @click="prizeDetailOper(1, item)">查看地址</div>
                </div>
                <div v-if="item.logisticsState == 1">
                  <div class="logisticsStatePClassP1" @click="deliverFun(item)" :style="styleDataNew.logisticsStatePClassP1">查看快递单号</div>
                  <div v-if="item.isTimeout">
                    <div class="prizeEditGrayStyle" :style="styleDataNew.prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ item.logisticsObj.realName ? '修改地址' : '查看地址' }}</div>
                  </div>
                  <div v-else class="prizeEditGrayStyle" :style="styleDataNew.prizeEditGrayStyle" @click="prizeDetailOper(1, item)">查看地址</div>
                </div>
                <div v-if="item.logisticsState == 9">
                  <div class="logisticsStatePClassP1" @click="deliverFun(item)" :style="styleDataNew.logisticsStatePClassP1">查看快递单号</div>
                  <div v-if="item.isTimeout">
                    <div class="prizeEditGrayStyle" :style="styleDataNew.prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ item.logisticsObj.realName ? '修改地址' : '查看地址' }}</div>
                  </div>
                  <div v-else class="prizeEditGrayStyle" :style="styleDataNew.prizeEditGrayStyle" @click="prizeDetailOper(1, item)">查看地址</div>
                </div>
              </div>
            </div>

            <div v-else-if="item[keyData.prizeType] == '9' || item[keyData.prizeType] == '10'" class="prizeRightStyle" :style="styleDataNew.prizeRightStyle">
              <div @click="exchangeClick()" class="prizeExchangeStyle" :style="styleDataNew.prizeExchangeStyle">立即兑换</div>
            </div>

            <div v-else-if="item[keyData.prizeType] == '5'" class="prizeRightStyle" :style="styleDataNew.prizeRightStyle">
              <div @click="goBuyClick(item)" class="prizeExchangeStyle" :style="styleDataNew.prizeExchangeStyle">立即购买</div>
            </div>
          </div>
          <div v-if="item[keyData.prizeType] == 3 && needAddress == '0'" class="not-address-text">请联系店铺客服领取实物奖品</div>
        </div>
      </div>
      <div class="listDivStyle" :style="listDivStyle" v-else><div class="noPrizeDataStyle" :style="styleDataNew.noPrizeDataStyle">暂无获奖记录哦~</div></div>
      <div v-if="activityType == '10088' && (nowTime < settlementStartTime && opportunityType == 1)" @click="updateAddressFun()"
      style="color:#0083ff;font-size:0.24rem;text-align: center;padding: .15rem;">
        修改地址 
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from './hdzxtbasicPop.vue';
import dataJson from '../../../../src/data.json';
import { LogisticsPopComService, GiftPopComService } from '../../../util/comCreate.js';
import { fillInInformationData, AddressPopComService,deliverResultPopComService } from '../../../util/hdzxtcomCreate.js';
import Vue from 'vue';
import apis1 from '../../../util/apis1.js';
import { Notify, Toast } from 'vant';
import { exchangePrize, newToSkuPage } from '../../../util/tools.js';
import dateUtils from '../../../util/dateUtil.js';
Vue.use(Toast, Notify);
let { myprize,storeGoodsPoint } = apis1;
export default {
  props: [],
  components: {
    basicPop
  },
  data() {
    return {
      // title: '我的奖品',
      activityType:sessionStorage.getItem('activityType'),
      drawListData: [],
      // listDivStyle: '', //奖品列表样式
      // itemDivStyle: '', //列表每一条数据样式
      // prizeTypeStyle: '', //奖品类型
      // prizeBottomStyle: '', //奖品泪飙每一条下面部分
      // noPrizeDataStyle: '', //没有中奖记录
      // prizeLeftStyle: '',
      // prizeImgStyle: '',
      // prizeDetailStyle: '',
      // prizeNameStyle: '',
      // prizeDateStyle: '',
      // prizeRightStyle: '',
      // prizeStatusStyle: '',
      // prizeStatusStyle12: '',
      // prizeDaiStatusStyle12: '',
      // prizeExchangeStyle: '',
      // prizeStatus1Style: '',
      // prizeEditStyle: '',
      // prizeEdit1Style: '',
      // logisticsStateClass: '',
      // logisticsStatePClass: '',
      // logisticsStatePClassP1: '',
      // prizeEditGrayStyle: '',
      // logisticsStateStyle: '',
      jsonData: {},
      pop: {
        title: '我的奖品',
        titlepop: ''
      },
      needAddress: '',
      settlementStartTime:'',
      nowTime: '',
      opportunityType:0
    };
  },
  computed: {
    title() {
      const at = sessionStorage.getItem('activityType');
      const snapdragon = ['10011', '10012', '10013', '10014'].some(o => at === o);
      return snapdragon ? '获奖记录' : '我的奖品';
    }
  },
  created() {
    this.settlementStartTime = sessionStorage.getItem('settlementStartTime');
    this.opportunityType = sessionStorage.getItem('opportunityType');
    this.nowTime = new Date().getTime()
    
    this.needAddress = sessionStorage.getItem('needAddress');
    console.log(this.styleDataNew, 'this.styleDataNewaaaaaaaaa');
    // this.pop = this.styleDataNew;

    this.pop.titlepop = this.styleDataNew.titlepop
      ? this.styleDataNew.titlepop
      : { backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)' };
    this.pop.leftLineDiv = this.styleDataNew.leftLineDiv;
    this.pop.centerLineDiv = this.styleDataNew.centerLineDiv;
    this.pop.rightLineDiv = this.styleDataNew.rightLineDiv;

    console.log(this.pop, 'this.styleDataNewaaaaaaaaabbbbbbb');
    // console.log(this.pop.titlepop,"this.pop.titlepop");
    this.publicData.$on('cloasAddressPop', () => {

    });
    this.isEditAddress = this.datas.isEditAddress;
    this.isAlLookAddress = this.datas.isAlLookAddress;
    console.log(this.datas, '00000000');
  },

  mounted() {
    document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
    this.initData();
  },
  methods: {
    initData() {
      //去请求接口
      if (this.isTemplate == true) {
        //不请求接口 模板预览
      } else {
        console.log('12312312312');
        //去请求接口 TODO
        myprize(prizedata => {
          for (var i = 0; i < prizedata.data.length; i++) {
            prizedata.data[i].isEditAddress = true;
            if (prizedata.data[i].logisticsJson) {
              prizedata.data[i].logisticsState = JSON.parse(prizedata.data[i].logisticsJson).dealStatus;
              let a = JSON.parse(JSON.stringify(prizedata.data[i].createTime));
              //   // 3600000
              console.log(new Date().getTime() - a,'aaaaaaaaaaaaaa')
              if (new Date().getTime() - a < 3600000 * 2) {
                prizedata.data[i].isTimeout = true;
              }
              prizedata.data[i].logisticsObj = JSON.parse(prizedata.data[i].logisticsJson);
            }
            prizedata.data[i].createTime = dateUtils.dateChangeYYYY(prizedata.data[i].createTime, 1);
          }
          this.drawListData = prizedata.data;
          console.log(this.drawListData, '1233333333');
        });
      }
    },
    closeClick() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
    //立即购买商品
    goBuyClick(itemData) {
      console.log(itemData, 'itemData');
      let logisticsJson = JSON.parse(itemData.logisticsJson).skuInfos[0];
      storeGoodsPoint(5)
      newToSkuPage(logisticsJson);
    },
    //立即兑换
    exchangeClick() {
      exchangePrize();
    },
    //查看礼品卡
    giftCardExchange(index) {
      // this.submit()
      let jsonData = JSON.parse(this.drawListData[index].logisticsJson);
      this.jsonData = jsonData;
      document.querySelector('body').removeAttribute('style');
      GiftPopComService.create(this.jsonData, submit => {
        GiftPopComService.close();
      });
    },
    //点击领取奖品
    getPrizeClick(index, item) {
      console.log(item, '点击领取奖品----------------');
      this.closeClick();
      fillInInformationData.create(item, this.styleDataNew, submit => {
        fillInInformationData.close();
        if (submit) {
          itemDta.logisticsJson = JSON.stringify(submit);
        }
      });
    },

    prizeDetailOper(type, itemDta) {
      if (type == 1) {
        // console.log(itemDta,'编辑地址数据');
        sessionStorage.setItem('addressId', itemDta.addressId);
        sessionStorage.setItem('prizeGrantId', itemDta.prizeGrantId);
        sessionStorage.setItem('prizeInfoId', itemDta.prizeInfoId);
        let createTime = itemDta.createTime; //创建事件
        var logisticsStatus = itemDta.logisticsState;
        if (logisticsStatus == 1 || logisticsStatus == 9) {
          this.$toast('您的奖品已发货，无法修改地址啦~');
          return;
        }

        if (!this.isAlLookAddress) {
          if (new Date().getTime() - createTime > 7200000) {
            this.$toast('已超过2小时,无法修改地址');
            return;
          }
        }

        this.datas.isEditAddress = this.isEditAddress;
        this.datas.isAlLookAddress = this.isAlLookAddress;
        AddressPopComService.create(this.datas, this.styleDataNew, submit => {
          AddressPopComService.close();
          console.log(submit, '编辑地址');
          if (submit) {
            itemDta.logisticsJson = JSON.stringify(submit);
          }
        });
        this.doFrontBuryPoint({code: 'wdjp-xgdz',value: '',event: 'click'})
      } else if (type == 2) {
        LogisticsPopComService.create(submit => {
          LogisticsPopComService.close();
        });
      }
      // this.$emit('prizeRecordDetilClick', type, itemDta);
    },
    deliverFun(item){
      deliverResultPopComService.create(item, submit => {
        deliverResultPopComService.close();
      });
    },
    updateAddressFun(){
      var datas = {
        isEditAddress: true,
        isAlLookAddress: false,
      };
      AddressPopComService.create(datas,this.styleData, (submit) => {
        AddressPopComService.close();
      });
    },
    // submit(values) {
    //   console.log(values);
    // }
  }
};
</script>

<style lang="scss" scoped="scoped">

.prizePopMaskDiv {
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  position: fixed;
  top: 0;
  z-index: 201;
}
.prizePopMaskDiv1{
   width: 100%;
  height: 100%;
  // background: rgba($color: #000000, $alpha: 0.7);
  position: fixed;
  top: 0;
  z-index: 201;
}

.listDivStyle {
  position: relative;
  z-index: 300;
  margin-top: 0.32rem;
  margin-top: 0.32rem;
  height: 9.14rem;
  overflow-y: scroll;
  .itemDivStyle {
    background: #ffffff;
    margin: 0rem 0.28rem 0.1rem 0.28rem;
    padding-bottom: 0.24rem;
    border-radius: 0.16rem;
    .prizeTypeStyle {
      color: #999999;
      font-size: 0.2rem;
      text-align: left;
      margin-left: 0.22rem;
      margin-right: 0.22rem;
      padding-top: 0.16rem;
      padding-bottom: 0.16rem;
      border-bottom: 0.02rem dashed #eee;
      display: flex;
      justify-content: space-between;
    }
    .prizeBottomStyle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 0.24rem;
      margin-left: 0.22rem;
      margin-right: 0.22rem;
      .prizeLeftStyle {
        display: flex;
        align-items: center;
        .prizeImgStyle {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
        }

        .prizeDetailStyle {
          display: flex;
          flex-direction: column;
          text-align: left;
          margin-left: 0.28rem;
          .prizeNameStyle {
            font-size: 0.28rem;
            color: #ff3333;
          }
          .prizeDateStyle {
            color: #999999;
            font-size: 0.2rem;
            margin-top: 0.2rem;
          }
        }
      }
      .prizeRightStyle {
        .prizeStatusStyle {
          color: #6bce98;
          font-size: 0.24rem;
        }
        .prizeStatus1 {
          color: #ffb86b;
          font-size: 0.24rem;
        }
        .prizeDaiStatusStyle12 {
          color: #ff9000;
          font-size: 0.24rem;
        }
        .prizeStatusStyle12 {
          color: #0083ff;
          font-size: 0.24rem;
          margintop: 0.24rem;
        }
        .prizeEdit {
          color: #0083ff;
          font-size: 0.24rem;
          margin-top: 0.2rem;
        }
        .prizeEdit1 {
          color: #0060ff;
          font-size: 0.24rem;
          margin-top: 0.2rem;
        }
      }
    }
    .logisticsStateClass {
      font-size: 0.24rem;
    }
    .logisticsStateStyleP {
      font-size: 0.24rem;
      color: #ff9900;
      text-align: right;
    }
    .logisticsStateStyleP1 {
      font-size: 0.24rem;
      color: #00bb66;
      text-align: right;
    }
    .prizeEditGrayStyle {
      color: #0083ff;
      font-size: 0.24rem;
      margin-top: 0.2rem;
    }
    .logisticsStatePClassP1 {
      font-size: 0.24rem;
      color: #00bb66;
      text-align: right;
    }
    .logisticsStatePClass {
      font-size: 0.24rem;
      color: #ff9900;
      text-align: right;
    }
    .prizeEditStyle {
        color: #0083ff;
        font-size: 0.24rem;
        margin-top: 0.2rem;
    }
    .prizeExchangeStyle{
      color: #0083ff;
      font-size: 0.24rem;
    }
  }
}

.noPrizeDataStyle {
  height: 100%;
  font-size: 0.24rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8c8c8c;
}
.not-address-text{
  font-size: 0.24rem;
  color: red;
  margin-left: 1.28rem;
}
</style>

<!-- <style lang="scss">
.prizePopMaskDiv {
  .snapdragonDiv {
    .content-body {
      background: none !important;
      box-shadow: none !important;
      margin: 0 !important;

      .listDiv {
        margin: 0 !important;

        .itemDiv {
          margin: 0 0 0.21rem 0 !important;
          box-shadow: 0rem 0.05rem 0.16rem 0rem rgba(177, 177, 177, 0.18);

          .prizeType {
            display: none !important;
          }

          .prizeName {
            font-size: 0.26rem !important;
            color: #e34c4b !important;
          }
        }
      }
    }
  }
}
</style>
 -->
