<template>
  <div class="prizePopMaskDiv" v-show="show">
    <basicPop :title="title" @closeClick="closeClick">
      <div class="listDiv" :style="listDivStyle" v-if="drawListData.length > 0">
        <div class="itemDiv" v-for="(item, index) in drawListData" :key="index">
          <div class="item">
            <div class="top-box">
              <span class="type">实物商品</span>
              <span class="apply-time">申请时间：{{item.applyDatetime}}</span>
            </div>
            <div class="bottom-box">
              <div class="image">
                <img :src="item.showImg">
              </div>
              <div class="sku-name">{{item.skuName}}</div>
              <div class="btn-box">
                <div class="type">{{item.status}}</div>
                <div class="address" v-lz-click="'23'" @click="viewAddress(item)">查看地址</div>
                <!-- <div v-if="item.status == '未被选中'" class="address gray">查看地址</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="listDiv" :style="listDivStyle" v-else><div :style="noPrizeDataStyle">暂无申请记录</div></div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from './basicPop.vue';
import dataJson from '../../../../src/data.json';
import { AddressPopComService, LogisticsPopComService,ApplyAddressPopComService } from '../../../util/comCreate.js';
import Vue from 'vue';
import apis1 from '../../../util/apis1.js';
import { Notify, Toast } from 'vant';
import { exchangePrize } from '../../../util/tools.js';
import dateUtils from '../../../util/dateUtil.js';
let {applyTrialGood} = apis1;
Vue.use(Toast, Notify);
let { applyRecord } = apis1;
export default {
  props: [],
  components: {
    basicPop
  },
  data() {
    return {
      title: '申请记录',
      drawListData: [],
      listDivStyle: '', //奖品列表样式
      itemDivStyle: '', //列表每一条数据样式
      prizeTypeStyle: '', //奖品类型
      prizeBottomStyle: '', //奖品泪飙每一条下面部分
      noPrizeDataStyle: '', //没有中奖记录
      prizeLeftStyle: '',
      prizeImgStyle: '',
      prizeDetailStyle: '',
      prizeNameStyle: '',
      prizeDateStyle: '',
      prizeRightStyle: '',
      prizeStatusStyle: '',
      prizeExchangeStyle: '',
      prizeStatus1Style: '',
      prizeEditStyle: '',
      prizeEdit1Style: '',
      logisticsStateClass: '',
      logisticsStatePClass: '',
      logisticsStatePClassP1: '',
      prizeEditGrayStyle: '',
      logisticsStateStyle: ''
    };
  },
  created() {
    this.publicData.$on('cloasAddressPop', () => {
      // console.log('aaaaaaaaaaa')
      // console.log(dataJson.prizePopDiv.listDivStyle.height.substr(0,dataJson.prizePopDiv.listDivStyle.height.length-3))
      var a = dataJson.prizePopDiv.listDivStyle.height.substr(0, dataJson.prizePopDiv.listDivStyle.height.length - 3);
      dataJson.prizePopDiv.listDivStyle.height = parseFloat(a) + 0.001 + 'rem';
      this.listDivStyle = dataJson.prizePopDiv.listDivStyle;
      this.itemDivStyle = dataJson.prizePopDiv.itemDivStyle;
      this.prizeTypeStyle = dataJson.prizePopDiv.prizeTypeStyle;
      this.prizeBottomStyle = dataJson.prizePopDiv.prizeBottomStyle;
      this.prizeLeftStyle = dataJson.prizePopDiv.prizeLeftStyle;
      this.prizeImgStyle = dataJson.prizePopDiv.prizeImgStyle;
      this.prizeDetailStyle = dataJson.prizePopDiv.prizeDetailStyle;
      this.prizeNameStyle = dataJson.prizePopDiv.prizeNameStyle;
      this.prizeDateStyle = dataJson.prizePopDiv.prizeDateStyle;
      this.prizeStatusStyle = dataJson.prizePopDiv.prizeStatusStyle;
      this.prizeExchangeStyle = dataJson.prizePopDiv.prizeExchangeStyle;
      this.prizeStatus1Style = dataJson.prizePopDiv.prizeStatus1Style;
      this.prizeEditStyle = dataJson.prizePopDiv.prizeEditStyle;
      this.prizeEdit1Style = dataJson.prizePopDiv.prizeEdit1Style;
      this.noPrizeDataStyle = dataJson.prizePopDiv.noPrizeDataStyle;
      this.logisticsStateClass = dataJson.prizePopDiv.logisticsStateStyle;
      this.logisticsStatePClass = dataJson.prizePopDiv.logisticsStateStyleP;
      this.logisticsStatePClassP1 = dataJson.prizePopDiv.logisticsStateStyleP1;
      this.prizeEditGrayStyle = dataJson.prizePopDiv.prizeEditGrayStyle;
    });
    this.isEditAddress = this.datas.isEditAddress;
    this.isAlLookAddress = this.datas.isAlLookAddress;
  },

  mounted() {
    document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
    this.listDivStyle = dataJson.prizePopDiv.listDivStyle + 'rem';
    this.itemDivStyle = dataJson.prizePopDiv.itemDivStyle;
    this.prizeTypeStyle = dataJson.prizePopDiv.prizeTypeStyle;
    this.prizeBottomStyle = dataJson.prizePopDiv.prizeBottomStyle;
    this.prizeLeftStyle = dataJson.prizePopDiv.prizeLeftStyle;
    this.prizeImgStyle = dataJson.prizePopDiv.prizeImgStyle;
    this.prizeDetailStyle = dataJson.prizePopDiv.prizeDetailStyle;
    this.prizeNameStyle = dataJson.prizePopDiv.prizeNameStyle;
    this.prizeDateStyle = dataJson.prizePopDiv.prizeDateStyle;
    this.prizeStatusStyle = dataJson.prizePopDiv.prizeStatusStyle;
    this.prizeExchangeStyle = dataJson.prizePopDiv.prizeExchangeStyle;
    this.prizeStatus1Style = dataJson.prizePopDiv.prizeStatus1Style;
    this.prizeEditStyle = dataJson.prizePopDiv.prizeEditStyle;
    this.prizeEdit1Style = dataJson.prizePopDiv.prizeEdit1Style;
    this.noPrizeDataStyle = dataJson.prizePopDiv.noPrizeDataStyle;
    this.logisticsStateClass = dataJson.prizePopDiv.logisticsStateStyle;
    this.logisticsStatePClass = dataJson.prizePopDiv.logisticsStateStyleP;
    this.logisticsStatePClassP1 = dataJson.prizePopDiv.logisticsStateStyleP1;
    this.prizeEditGrayStyle = dataJson.prizePopDiv.prizeEditGrayStyle;

    this.initData();
  },
  methods: {
    initData() {
      //去请求接口
      if (this.isTemplate == true) {
        //不请求接口 模板预览
      } else {
        //去请求接口 TODO
        applyRecord(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].applyDatetime))
              if (new Date().getTime() - a > 10) {
                prizedata.data[i].isTimeout = true;
              }
            }
            prizedata.data[i].applyDatetime = dateUtils.dateChangeYYYY(prizedata.data[i].applyDatetime, 1);
          }
          this.drawListData = prizedata.data;
        });
      }
    },
    viewAddress(data){
      var datas = {
          isEditAddress: false,
          isAlLookAddress: false,
          item:data
      };
      ApplyAddressPopComService.create(datas,index, (submit) => {
        ApplyAddressPopComService.close();
      });
    },
    closeClick() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
    //立即兑换
    exchangeClick(){
      exchangePrize();
    },
    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) {
          return;
        }

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

        this.datas.isEditAddress = this.isEditAddress;
        this.datas.isAlLookAddress = this.isAlLookAddress;
        AddressPopComService.create(this.datas, submit => {
          AddressPopComService.close();
          console.log(submit, '编辑地址');
          if (submit) {
            itemDta.logisticsJson = JSON.stringify(submit);
          }
        });
      } else if (type == 2) {
        LogisticsPopComService.create(submit => {
          LogisticsPopComService.close();
        });
      }
      // this.$emit('prizeRecordDetilClick', type, itemDta);
    }
    // submit(values) {
    //   console.log(values);
    // }
  }
};
</script>

<style lang="scss" scoped="scoped">
.listDiv {
  position: relative;
  z-index: 300;
  margin-top: 0.32rem;
  height: 9.14rem;
  overflow-y: scroll;
}
.prizePopMaskDiv{
  .item{
      width: 6.9rem;
      height: 1.8rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/210227/39/11847/1595/61b0ad5fEcd7d84d0/a64a1386f9021521.png);
      border-radius: 5px;
      background-size:100% 100%;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      margin:0rem 0.28rem 0.14rem;
      .top-box{
        line-height: 0.5rem;
        font-size: 0.2rem;
        color: #999999;
        .type{
          float: left;
        }
        .apply-time{
          float: right;
        }
      }
      .bottom-box{
        clear: both;
        padding-top: 0.26rem;
        .image{
          width: 0.8rem;
          height: 0.8rem;
          background: #FFFFFF;
          border: 1px solid #FFF5D6;
          border-radius: 50%;
          float: left;
          margin-right: 0.32rem;
          overflow: hidden;
          display: flex;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .sku-name{
          width: calc(100% - 3rem);
          height: 0.5rem;
          font-size: 0.3rem;
          font-family: PingFangSCRegular;
          font-weight: 400;
          color: #FF3333;
          line-height: 0.5rem;
          margin-top: 0.2rem;
          float: left;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .btn-box{
          float: right;
          text-align: right;
          .type{
            font-size: 0.28rem;
            font-family: PingFangSCRegular;
            font-weight: 400;
            color: #FF6969;
            line-height: 0.5rem;
          }
          .address{
            font-size: 0.24rem;
            font-family: PingFangSCRegular;
            font-weight: 400;
            color: #0083FF;
          }
          .gray{
            color: #ccc!important;
          }
        }
      }
  }
}
</style>
