<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" :style="itemDivStyle" v-for="(item, index) in drawListData" :key="index">
          <div class="prizeType" :style="prizeTypeStyle">
            <span v-if="item[keyData.prizeType]">
              <span v-if="item[keyData.prizeType] == '1'">京豆</span>
              <span v-else-if="item[keyData.prizeType] == '2'">优惠券</span>
              <span v-else-if="item[keyData.prizeType] == '3'">实物</span>
              <span v-else-if="item[keyData.prizeType] == '4'">积分</span>
              <span v-else-if="item[keyData.prizeType] == '5'">专享价</span>
              <span v-else-if="item[keyData.prizeType] == '6'">红包</span>
              <span v-else-if="item[keyData.prizeType] == '7'">礼品卡</span>
              <span v-else-if="item[keyData.prizeType] == '8'">京东E卡</span>
              <span v-else-if="item[keyData.prizeType] == '9'">京东plus会员卡</span>
              <span v-else-if="item[keyData.prizeType] == '10'">爱奇艺会员卡</span>
              <span v-else-if="item[keyData.prizeType] == '11'">积分</span>
            </span>
            <span v-if="item.createTime" class="prizeDateOrder" style="color: #999999;font-size: 0.2rem">
              领取时间：{{item.createTime }}
            </span>
          </div>
          <div class="prizeBottom" :style="prizeBottomStyle">
            <div class="prizeLeft" :style="prizeLeftStyle">
              <div v-if="item[keyData.prizeUrl]"><img :style="prizeImgStyle" :src="item[keyData.prizeUrl]" /></div>
              <div class="prizeDetail" :style="prizeDetailStyle">
                <ul v-if="item[keyData.prizeName]" class="prizeName" :style="prizeNameStyle">
                  {{item[keyData.prizeName] }}
                </ul>
              </div>
            </div>
            <div v-if="item[keyData.prizeType] != '9' && item[keyData.prizeType] != '10' && item[keyData.prizeType] != '5'" class="prizeRight" style="text-align: right;">
              <div class="prizeStatus" :style="prizeStatusStyle" v-if="item[keyData.prizeType] != '3' && item.status == 1">已发放</div>
              <div class="prizeStatus" :style="prizeStatus1Style" v-if="item[keyData.prizeType] != '3' && item.status == 0">待发放</div>
              <div class="prizeStatus prizeStatus2Style" v-if="item[keyData.prizeType] != '3' && item.status == 3">已失效</div>
              <div class="orderOpenClass" v-if="item.openFlag == false && item[keyData.prizeType] != '3'" style="color: #0083ff;font-size: 0.2rem;margin-top: 0.2rem;" @click="item.openFlag = true">关联订单</div>
              <div class="orderOpenClass" v-if="item.openFlag == true && item[keyData.prizeType] != '3'" style="color: #0083ff;font-size: 0.2rem;margin-top: 0.2rem;" @click="item.openFlag = false">收起订单</div>

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

              <div class="logisticsStateClass" :style="logisticsStateStyle" v-if="item[keyData.prizeType] == '3'">

                <div v-if="item.status == 0">
                  <div :style="logisticsStatePClass">待发放</div>
                  <div v-if="item.isTimeout">
                    <div class="prizeEdit" :style="prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址' : '查看地址' }}</div>
                  </div>
                  <div v-else class="prizeEdit" :style="prizeEditStyle" @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址' : '查看地址' }}</div>
                </div>

                <div v-if="item.status == 3">
                  <div class="logisticsStatePClass2">已失效</div>
                </div>

                <div v-if="item.status == 1 && item.logisticsState == 0">
                  <div :style="logisticsStatePClass">待发货</div>
                  <div v-if="item.isTimeout">
                    <div class="prizeEdit" :style="prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址' : '查看地址' }}</div>
                  </div>
                  <div v-else class="prizeEdit" :style="prizeEditStyle" @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址' : '查看地址' }}</div>
                </div>

                <div v-if="item.status == 1 && item.logisticsState == 1">
                  <div :style="logisticsStatePClassP1">已发货</div>
                  <div v-if="item.isTimeout">
                    <div class="prizeEdit" :style="prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址' : '查看地址' }}</div>
                  </div>
                  <div v-else class="prizeEdit" :style="prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址' : '查看地址' }}</div>
                </div>
                <div v-if="item.status == 1 && item.logisticsState == 9">
                  <div :style="logisticsStatePClassP1">已发货</div>
                  <div v-if="item.isTimeout">
                    <div class="prizeEdit" :style="prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址' : '查看地址' }}</div>
                  </div>
                  <div v-else class="prizeEdit" :style="prizeEditGrayStyle" @click="prizeDetailOper(1, item)">{{ isEditAddress ? '修改地址' : '查看地址' }}</div>
                </div>
                <div class="orderOpenClass" v-if="item.openFlag == false" style="color: #0083ff;font-size: 0.2rem;margin-top: 0.2rem;" @click="item.openFlag = true">关联订单</div>
                <div class="orderOpenClass" v-if="item.openFlag == true" style="color: #0083ff;font-size: 0.2rem;margin-top: 0.2rem;" @click="item.openFlag = false">收起订单</div>
              </div>
            </div>

            <div v-else-if="item[keyData.prizeType] == '9' || item[keyData.prizeType] == '10'" class="prizeRight" :style="prizeRightStyle">
              <div @click="exchangeClick()" class="prizeStatus" :style="prizeExchangeStyle">立即兑换</div>
              <div class="orderOpenClass" v-if="item.openFlag == false" style="color: #0083ff;font-size: 0.2rem;margin-top: 0.2rem;" @click="item.openFlag = true">关联订单</div>
              <div class="orderOpenClass" v-if="item.openFlag == true" style="color: #0083ff;font-size: 0.2rem;margin-top: 0.2rem;" @click="item.openFlag = false">收起订单</div>
            </div>

            <div v-else-if="item[keyData.prizeType] == '5'" class="prizeRight" :style="prizeRightStyle">
              <div @click="goBuyClick(item)" class="prizeStatus" :style="prizeExchangeStyle">立即购买</div>
              <div class="orderOpenClass" v-if="item.openFlag == false" style="color: #0083ff;font-size: 0.2rem;margin-top: 0.2rem;" @click="item.openFlag = true">关联订单</div>
              <div class="orderOpenClass" v-if="item.openFlag == true" style="color: #0083ff;font-size: 0.2rem;margin-top: 0.2rem;" @click="item.openFlag = false">收起订单</div>
            </div>
          </div>
          <div v-if="item.openFlag == true">
            <div class="orderPrizeBottom"
                 style="font-size: 0.2rem;color:rgb(153, 153, 153);display: flex;justify-content: space-between;align-items: center;padding-top: 0.2rem;margin-top: 0.1rem; margin-left: 0.22rem;margin-right: 0.22rem;border-top: 0.02rem dashed rgb(238, 238, 238);"
                 v-for="(item,index) in drawListData[index].taskGetOrderGiftDTO">
              <div>订单号：{{ item.orderId }}</div>
              <div>订单状态：{{ item.status }}</div>
              <div>订单金额：￥{{ item.orderPrice }}</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 {
  OrderAddressPopService,
  LogisticsPopComService,
  GiftPopComService,
  AddressPopComService
} from '../../../util/comCreate.js';

import Vue from 'vue';
import apis1 from '../../../util/apis1.js';
import { Notify, Toast } from 'vant';
import { exchangePrize, goToSkuPage } from '../../../util/tools.js';
import dateUtils from '../../../util/dateUtil.js';
Vue.use(Toast, Notify);
let { myprize , orderPrizeList} = 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: '',
      jsonData: {},
      openFlag:false,
      taskGetOrderGiftDTO:[],
    };
  },
  computed: {
    title() {
      const at = sessionStorage.getItem('activityType');
      const snapdragon = ['10011', '10012', '10013', '10014'].some(o => at === o);
      return snapdragon ? '获奖记录' : '我的奖品';
    }
  },
  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
        orderPrizeList(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));

              if (new Date().getTime() - a > 10) {
                prizedata.data[i].isTimeout = true;
              }
            }
            prizedata.data[i].createTime = dateUtils.dateChangeYYYY(prizedata.data[i].createTime, 1);
            prizedata.data[i].openFlag = false;
          }
          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);

      goToSkuPage(logisticsJson.skuId);
    },
    //立即兑换
    exchangeClick() {
      exchangePrize();
    },
    //查看礼品卡
    giftCardExchange(index) {
      let jsonData = JSON.parse(this.drawListData[index].logisticsJson);
      this.jsonData = jsonData;
      document.querySelector('body').removeAttribute('style');
      GiftPopComService.create(this.jsonData, submit => {
        GiftPopComService.close();
      });
    },

    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;

        if (itemDta.status == 1) {
          AddressPopComService.create(this.datas, submit => {
            AddressPopComService.close();
            console.log(submit, '编辑地址');
            if (submit) {
              itemDta.logisticsJson = JSON.stringify(submit);
            }
          });
        }else {
          OrderAddressPopService.create(submit => {
            OrderAddressPopService.close();
            console.log(submit, '编辑地址');
            if (submit) {
              itemDta.logisticsJson = JSON.stringify(submit);
            }
          });
        }
      } else if (type == 2) {
        LogisticsPopComService.create(submit => {
          LogisticsPopComService.close();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.listDiv {
  position: relative;
  z-index: 300;
  margin-top: 0.32rem;
  height: 9.14rem;
  overflow-y: scroll;
}
</style>

<style lang="scss">
.prizePopMaskDiv {
  .prizeStatus2Style{
    color: #999999;
    font-size: 0.24rem
  }
  .logisticsStatePClass2{
    color: #999999;
    font-size: 0.24rem
  }
  .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;
          }
          .logisticsStateStyleP2 {
            font-size: 0.24rem;
            color: #00bb66;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
