<template>
  <div :class="activityType == '10081'?'prizePopMaskDiv1':'prizePopMaskDiv'" v-show="show">
    <!-- <div class="prizePopBox" :style="styleDataNew.myPrizeContent">
      <div :style="styleDataNew.myPrizeTitle"></div>
      <div class="listDivStyle" v-if="drawListData.length > 0" :style="styleDataNew.listDivStyle">
        <div class="itemDivStyle" :style="styleDataNew.itemDivStyle" v-for="(item, index) in drawListData" :key="index">
          <div class="itemDivStyleLeft" :style="styleDataNew.prizeDetailStyle">
            <div :style="styleDataNew.prizeDetailStyle">
              <ul v-if="item[keyData.prizeName]" :style="styleDataNew.prizeNameStyle">
                {{
                    item[keyData.prizeName]
                  }}
              </ul>
              <ul v-if="item.createTime" :style="styleDataNew.prizeDateStyle">
                {{ item.createTime }}
              </ul>
            </div>
          </div>
          <div class="itemDivStyleRight" :style="styleDataNew.itemDivStyleRight">
            <div
              v-if="item[keyData.prizeType] != '9' && item[keyData.prizeType] != '10' && item[keyData.prizeType] != '5'">
              <div
                v-if="(item[keyData.prizeType] != '3' && item[keyData.prizeType] != '12') || (item[keyData.prizeType] == '12' && item.sendResult === 1)">
                已发放
              </div>

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

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

              <div v-if="item[keyData.prizeType] == '3' && needAddress == '1'">
                <div v-if="item.logisticsState == 0">
                  <div @click="deliverFun(item)">待发货</div>
                  <div v-if="item.isTimeout" :style="styleDataNew.timeoutStyle">
                    <div @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址>' : '查看地址' }}</div>
                  </div>
                  <div v-else :style="styleDataNew.notTimeoutStyle" @click="prizeDetailOper(1, item)">
                    {{ isEditAddress ? '修改地址>' : '查看地址' }}</div>
                </div>
                <div v-if="item.logisticsState == 1">
                  <div @click="deliverFun(item)">查看快递单号</div>
                  <div v-if="item.isTimeout" :style="styleDataNew.timeoutStyle">
                    <div @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址>' : '查看地址' }}</div>
                  </div>
                  <div v-else :style="styleDataNew.notTimeoutStyle" @click="prizeDetailOper(1, item)">
                    {{ isEditAddress ? '修改地址>' : '查看地址' }}</div>
                </div>
                <div v-if="item.logisticsState == 9">
                  <div @click="deliverFun(item)">查看快递单号</div>
                  <div v-if="item.isTimeout" :style="styleDataNew.timeoutStyle">
                    <div @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址>' : '查看地址' }}</div>
                  </div>
                  <div v-else :style="styleDataNew.notTimeoutStyle" @click="prizeDetailOper(1, item)">
                    {{ isEditAddress ? '修改地址>' : '查看地址' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="listDivStyleNoData" :style="styleDataNew.NoDataList" v-else>
        暂无获得奖品记录哦~
      </div>
      <div class="close-btn" :style="styleDataNew.closeBtn" @click="closeClick()"></div>
    </div> -->
  </div>
</template>

<script>
import { LogisticsPopComService, GiftPopComService, OrderAddressPop10098Service } from '../../../util/comCreate.js';
// import { fillInInformationData, AddressPopComService10998,deliverResultPopComService } from '../../../util/hdzxtcomCreate.js';
import Vue from 'vue';
import apis1 from '../../../util/apis1.js';
import { Notify, Toast } from 'vant';
import store from "../../../store/store";
import { exchangePrize, goToSkuPage, goToShopPage } from '../../../util/tools.js';
import dateUtils from '../../../util/dateUtil.js';
Vue.use(Toast, Notify);
let { myprize, storeGoodsPoint } = apis1;
export default {
  props: [],
  components: {
  },
  data() {
    return {
      // title: '我的奖品',
      activityType: sessionStorage.getItem('activityType'),
      drawListData: [],
      jsonData: {},
      pop: {
        title: '我的奖品',
        titlepop: ''
      },
      acRulePopComData: {
        styleData: {},
        datas: {},
        keyData: {}
      },
      needAddress: ''
    };
  },
  computed: {
    title() {
      const at = sessionStorage.getItem('activityType');
      const snapdragon = ['10011', '10012', '10013', '10014'].some(o => at === o);
      return snapdragon ? '获奖记录' : '我的奖品';
    }
  },
  created() {
    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.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(a,'aaaaaaaaaaaaaa')
              if (new Date().getTime() - a > 10) {
                prizedata.data[i].isTimeout = true;
              }
            }
            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)
      goToSkuPage(logisticsJson.skuId);
    },
    //立即兑换
    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);
        }
      });
    },
    buttonClick() {
      //查看
      let shopId = store.state.shopId;
      goToShopPage(shopId);
    },
    prizeDetailOper(type, itemDta) {
      if (type == 1) {
        // console.log(itemDta,'编辑地址数据');
        sessionStorage.setItem('addressId', itemDta.addressId);
        sessionStorage.setItem('prizeGrantId', itemDta.prizeGrantId);
        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;
        this.submit();
        if (this.parentData.grantType == '1') {
          OrderAddressPop10098Service.create(this.styleDataNew, submit => {
            OrderAddressPop10098Service.close();
            console.log(submit, '编辑地址');
            if (submit) {
              itemDta.logisticsJson = JSON.stringify(submit);
            }
          });
        } else {
          AddressPopComService10998.create(this.datas, this.styleDataNew, submit => {
            AddressPopComService10998.close();
            console.log(submit, '编辑地址');
            if (submit) {
              itemDta.logisticsJson = JSON.stringify(submit);
            }
          });
        }

      } else if (type == 2) {
        LogisticsPopComService.create(submit => {
          LogisticsPopComService.close();
        });
      }
    },
    deliverFun(item){
      deliverResultPopComService.create(item, submit => {
        deliverResultPopComService.close();
      });
    }
  }
};
</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;
  height: 3.5rem;
  overflow-y: scroll;
  .itemDivStyle {
    .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;
      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.15rem;
          .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;
    }
  }
}
.prizePopBox {
  position: absolute;
  top: 2.71rem;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 1.25rem;
}
.close-btn {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/183690/31/37249/1097/64e2d8dcFb8273014/2bd869caeaf31168.png")
    no-repeat;
  background-size: 100% 100%;
}
.noPrizeDataStyleBtn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.btnLeftClass {
  width: 1.88rem;
  height: 0.51rem;
  color: #111010;
  font-size: 0.31rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/218123/25/33455/942/64e416a9F9fb3138b/d13e7558b242a409.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.15rem;
}
.btnRight12Class {
  width: 1.88rem;
  height: 0.51rem;
  color: #543708;
  font-size: 0.31rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/66529/12/22821/1888/64e416a9F0686daf3/04565dad26693a8a.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.15rem;
}
</style>


