<template>
  <div class="toggleTypeBlock">
    <div class="toggleType active">我的奖品</div>
    <div class="showBlock myPrize noPrize">
      <div class="listDiv" 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.prizeType">
              {{
                item.prizeType == "1"
                  ? "京豆"
                  : item.prizeType == "2"
                  ? "优惠券"
                  : item.prizeType == "3"
                  ? "实物"
                  : "积分"
              }}
            </span>

            <div
              v-if="
                item.prizeType == 3 && item.logisticsJson
              "
            >
              <span v-if="JSON.parse(item.logisticsJson).realName"
                >收货人：{{ JSON.parse(item.logisticsJson).realName }}</span
              >
            </div>
          </div>
          <div class="prizeBottom" :style="prizeBottomStyle">
            <div class="prizeLeft" :style="prizeLeftStyle">
              <div v-if="item.showImg">
                <img :style="prizeImgStyle" :src="item.showImg" />
              </div>
              <div class="prizeDetail" :style="prizeDetailStyle">
                <ul
                  v-if="item.prizeName"
                  class="prizeName"
                  :style="prizeNameStyle"
                >
                  {{
                    item.prizeName
                  }}
                </ul>
                <ul
                  v-if="item.dayTime"
                  class="prizeDate"
                  :style="prizeDateStyle"
                >
                  获奖时间：{{
                    item.dayTime
                  }}
                </ul>
              </div>
            </div>
            <div class="prizeRight" :style="prizeRightStyle">
              <div
                class="prizeStatus"
                :style="prizeStatusStyle"
                v-if="item.prizeType != '3'"
              >
                已发放
              </div>

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

                  <div
                    v-else
                    class="prizeEdit"
                    :style="prizeEditStyle"
                    @click="prizeDetailOper(1, item)"
                    v-lz-click="'23'"
                  >
                    {{ item.isEditAddress ? "修改地址" : "查看地址" }}
                  </div>
                </div>
                <div v-if="item.logisticsState == 1">
                  <div :style="logisticsStatePClassP1" @click="deliverFun(item)">查看快递单号</div>
                  <div v-if="item.isTimeout">
                    <div
                      class="prizeEdit"
                      :style="prizeEditGrayStyle"
                      v-lz-click="'23'"
                      @click="prizeDetailOper(1, item)"
                    >
                      {{ item.isEditAddress ? "修改地址" : "查看地址" }}
                    </div>
                  </div>
                  <div
                    v-else
                    class="prizeEdit"
                    :style="prizeEditGrayStyle"
                    v-lz-click="'23'"
                    @click="prizeDetailOper(1, item)"
                  >
                    {{ item.isEditAddress ? "修改地址" : "查看地址" }}
                  </div>
                </div>
                <div v-if="item.logisticsState == 9">
                  <div :style="logisticsStatePClassP1" @click="deliverFun(item)">查看快递单号</div>
                  <div v-if="item.isTimeout">
                    <div
                      class="prizeEdit"
                      :style="prizeEditGrayStyle"
                      v-lz-click="'23'"
                      @click="prizeDetailOper(1, item)"
                    >
                      {{ item.isEditAddress ? "修改地址" : "查看地址" }}
                    </div>
                  </div>
                  <div
                    v-else
                    class="prizeEdit"
                    :style="prizeEditGrayStyle"
                    @click="prizeDetailOper(1, item)"
                  >
                    {{ item.isEditAddress ? "修改地址" : "查看地址" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div :style="noPrizeDataStyle"><span>暂无中奖记录</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import dataJson from "../../../../src/data.json";
import {
  AddressPopComService,
  LogisticsPopComService,
} from "../../../util/comCreate.js";
import { deliverResultPopComService } from '../../../util/hdzxtcomCreate.js';
import Vue from "vue";
import apis1 from "../../../util/apis1.js";
import { Notify, Toast } from "vant";

Vue.use(Toast, Notify);
let { myprize } = apis1;

export default {
  name: "myPrizes",
  props: ["isTemplate", "datas", "styleData", "keyData", "templateData"],
  components: {},
  data() {
    return {
      // title: '我的奖品',
      drawListData: [],
      listDivStyle: "", //奖品列表样式
      itemDivStyle: "", //列表每一条数据样式
      prizeTypeStyle: "", //奖品类型
      prizeBottomStyle: "", //奖品泪飙每一条下面部分
      noPrizeDataStyle: "", //没有中奖记录
      prizeLeftStyle: "",
      prizeImgStyle: "",
      prizeDetailStyle: "",
      prizeNameStyle: "",
      prizeDateStyle: "",
      prizeRightStyle: "",
      prizeStatusStyle: "",
      prizeStatus1Style: "",
      prizeEditStyle: "",
      prizeEdit1Style: "",
      logisticsStateClass: "",
      logisticsStatePClass: "",
      logisticsStatePClassP1: "",
      prizeEditGrayStyle: "",
      logisticsStateStyle: "",
    };
  },
  computed: {},
  created() {
    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.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;
    this.publicData.$on("isNotyFiceWinnerReorrd", () => {
      this.initData();
    });
  },

  mounted() {
    this.initData();
  },
  beforeDestroy() {
    this.publicData.$off("isNotyFiceWinnerReorrd");
  },
  methods: {
    initData() {
      //去请求接口
      if (this.isTemplate == true) {
        //不请求接口 模板预览
      } else {
        console.log("12312312312");
        //去请求接口 TODO
        myprize((prizedata) => {
          console.log(prizedata.data);
          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;
              if (
                new Date().getTime() - prizedata.data[i].createTime >
                3600000
              ) {
                prizedata.data[i].isEditAddress = false;
                prizedata.data[i].isTimeout = true;
              }
            }
          }

          this.drawListData = prizedata.data;
        });
      }
    },

    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;
        }
        console.log(this.isAlLookAddress);
        if (!this.isAlLookAddress) {  
            if (new Date().getTime() - createTime > 7200000) {
              this.$toast("已超过2小时,无法修改地址");
              return;
            }
        }
        this.datas.isEditAddress = itemDta.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);
    },
    deliverFun(item){
      deliverResultPopComService.create(item, submit => {
        deliverResultPopComService.close();
      });
    }
    // submit(values) {
    //   console.log(values);
    // }
  },
};
</script>

<style lang="scss" scoped="scoped">
.listDiv {
  position: relative;
  z-index: 1;
  margin-top: 0.32rem;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}
.noPrize {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}

.showBlock {
  width: 6.5rem;
  height: 7.46rem;
  border: 0.1rem solid #ff3333;
  background: #fff;
  margin: -0.1rem auto 0;
  border-radius: 8px;
  overflow-y: scroll;
  position: relative;
  padding: 0.3rem;
  box-shadow: 0 15px #9e1509;
}
.toggleType:nth-child(2) {
  margin-left: 0.1rem;
}

.toggleTypeBlock .active {
  color: #fff100;
  width: 3rem;
  height: 0.65rem;
  background: #ff3333;
  line-height: 0.65rem;
}
.toggleType {
  width: 2.52rem;
  height: 0.52rem;
  background: #970000;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  color: #ff3333;
  text-align: center;
  margin-left: 1.8rem;
  line-height: 0.52rem;
}
.toggleTypeBlock {
  width: 6.5rem;
  height: 8.46rem;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  overflow-y: initial;
  z-index: 100;
  position: absolute;
  top: 14.5rem;
}
</style>
