<template>
  <div class="van-popup van-popup--bottom" style="background: rgba(0,0,0,0.7); z-index: 100;height: 100vh;" v-if="show" @click='clickEmpty()'>
    <div id="sum" :class="{ height: getChanceOptionCurIndex == 1, height2: getChanceOptionCurIndex == 0 }" class="get-chance-dialog" @click='stopClickEmpty'>
      <div class="get-chance-optionContent">
        <div class="get-chance-option" v-for="(item, index) in getChanceOptions" :class="{ active: getChanceOptionCurIndex == index }" @click="getChanceOption(index)">
          {{ item.name }}
        </div>
      </div>
      <div class="get-chance-content" v-show="getChanceOptionCurIndex == 0" style="margin-top:.3rem;">
        <div v-if="dayTaskData.length > 0">
          <div v-for="it in dayTaskData" style="margin-top:.15rem;">
            <div v-if="it.taskType == 3" class="task" :class="{ 'day-share': it.taskType == 15 }">
              <div style="display: flex;justify-content: flex-start;align-items: center">
                <div class="task-image">
                  <img src="https://img10.360buyimg.com/imgzone/jfs/t1/128983/24/6695/4835/5f0524bfEc441c15a/1245aef179edac52.png" alt="" style="width:1rem;height:1rem;" />
                </div>
                <div style="display: flex;flex-direction: column;margin-left:.1rem">
                  <div style="font-size:.24rem;color:#333333;">浏览商品（{{ it.completeCount }}/{{ it.maxNum }}）</div>
                  <div style="font-size:.2rem;color:#999999;">每浏览{{ it.finishNum }}件商品，获得{{ it.sendNum }}次机会</div>
                </div>
              </div>
              <div class="btn" @click="openDialog(2)">去浏览</div>
            </div>
            <div v-if="it.taskType == 7" class="task" :class="{ 'day-share': it.taskType == 15 }">
              <div style="display: flex;justify-content: flex-start;align-items: center">
                <div class="task-image">
                  <img src="https://img10.360buyimg.com/imgzone/jfs/t1/121626/9/6539/4971/5f0524bfEe4f39f42/8fd456eac96421a3.png" alt="" style="width:1rem;height:1rem;" />
                </div>
                <div style="display: flex;flex-direction: column;margin-left:.1rem">
                  <div style="font-size:.24rem;color:#333333;">加购商品（{{ it.completeCount }}/{{ it.maxNum }}）</div>
                  <div style="font-size:.2rem;color:#999999;">每加购{{ it.finishNum }}件商品，获得{{ it.sendNum }}次机会</div>
                </div>
              </div>
              <div class="btn" @click="openDialog(3)">去加购</div>
            </div>
            <div v-if="it.taskType == 15" class="task" :class="{ 'day-share': it.taskType == 15 }">
              <div style="display: flex;justify-content: space-between;align-items: center;width:100%;">
                <div style="display: flex;justify-content: flex-start;align-items: center;">
                  <div class="task-image">
                    <img src="https://img10.360buyimg.com/imgzone/jfs/t1/139279/11/2504/4979/5f0524bfEcc60b8e8/5ecbc56991716d0c.png" alt="" style="width:1rem;height:1rem;" />
                  </div>
                  <div style="display: flex;flex-direction: column;margin-left:.1rem">
                    <div style="font-size:.24rem;color:#333333;">分享好友（{{ helpCompleteCount }}/{{ it.maxNum }}）</div>
                    <div style="font-size:.2rem;color:#999999;">每邀请{{ it.finishNum }}位好友，获得{{ it.sendNum }}次机会</div>
                  </div>
                </div>
                <div class="btn" v-lz-click="'2'" @click="shareActivity()">去分享</div>
              </div>
              <div style="width:100%;height:.71rem;overflow-x: scroll;position: relative">
                <div style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;width: auto">
                  <div class="share-friend" v-for="(it, index) in shareFriendList" v-lz-click="'2'" @click="shareActivity()">
                    <img :src="it.userImg" alt="" style="width:100%;height:100%;border-radius: 100%" />
                  </div>
                </div>
                <img
                  class="down-arrow"
                  v-if="shareFriendList.length > 7"
                  src="https://img10.360buyimg.com/imgzone/jfs/t1/115097/28/11692/615/5f0532dbE68a848ff/7a0738964040cdfb.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div v-else style="width:100%;height:100%;display: flex;justify-content: center;align-items: center;font-size: .3rem;color:#ccc">暂无任务</div>
      </div>

      <div class="get-chance-content" v-show="getChanceOptionCurIndex == 1" style="margin-top:.3rem;height:3.25rem;">
        <div v-if="activityTaskData.length > 0">
          <div v-for="it in activityTaskData" style="margin-top:.15rem;">
            <div v-if="it.taskType == 4" class="task">
              <div style="display: flex;justify-content: flex-start;align-items: center">
                <div class="task-image">
                  <img src="https://img10.360buyimg.com/imgzone/jfs/t1/149112/27/2320/10464/5f0535f6E62ab5575/30f77b69faad7b62.png" alt="" style="width:1rem;height:1rem;" />
                </div>
                <div style="display: flex;flex-direction: column;margin-left:.1rem">
                  <div style="font-size:.24rem;color:#333333;">逛会场</div>
                  <div style="font-size:.2rem;color:#999999;">逛活动会场，获得{{ it.sendNum }}次机会</div>
                </div>
              </div>
              <div class="btn" v-lz-click="'6'" @click="doTask()">逛会场</div>
            </div>
            <div v-if="it.taskType == 5" class="task">
              <div style="display: flex;justify-content: flex-start;align-items: center">
                <div class="task-image">
                  <img src="https://img10.360buyimg.com/imgzone/jfs/t1/120277/30/6586/10971/5f0535f6Eecc9c65d/aa9ed6971264041b.png" alt="" style="width:1rem;height:1rem;" />
                </div>
                <div style="display: flex;flex-direction: column;margin-left:.1rem">
                  <div style="font-size:.24rem;color:#333333;">关注商品（{{ it.completeCount }}/{{ it.maxNum }}）</div>
                  <div style="font-size:.2rem;color:#999999;">每关注{{ it.finishNum }}件商品，获得{{ it.sendNum }}次机会</div>
                </div>
              </div>
              <div class="btn" @click="openDialog(1)">去关注</div>
            </div>
          </div>
        </div>
        <div v-else style="width:100%;height:100%;display: flex;justify-content: center;align-items: center;font-size: .3rem;color:#ccc">暂无任务</div>
      </div>
      <div class="close-btn-more" @click="closeClick()" style="top:.1rem;right:.3rem"></div>
    </div>
  </div>
</template>

<script>
import apis1 from '../../../util/apis1.js';
import { goToShopPage, goToActive } from '../../../util/tools.js';
import { addSkuDialogService } from '../../../util/comCreate.js';
import { allShare } from '../../../js/share.js';

let { drawPrize, startDraw, pinshousuTaskRequest, bargainFriends } = apis1;
import store from '../../../store/store';

export default {
  props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData'],

  name: 'moreDialog',
  data() {
    return {
      getChanceOptionCurIndex: 0, //每日任务、活动任务高度控制
      getChanceOptions: [
        {
          name: '每日任务'
        },
        {
          name: '活动任务'
        }
      ],
      taskData: [],
      activityTaskData: [],
      dayTaskData: [],
      sendNum: 0,
      url: '',
      helpCompleteCount: 0,
      activityUserLimit: false,
      shareFriendList: [
        { userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/140035/11/2422/1195/5f05284fEf311a12c/932851fedc6ea0fc.png' },
        { userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/140035/11/2422/1195/5f05284fEf311a12c/932851fedc6ea0fc.png' },
        { userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/140035/11/2422/1195/5f05284fEf311a12c/932851fedc6ea0fc.png' },
        { userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/140035/11/2422/1195/5f05284fEf311a12c/932851fedc6ea0fc.png' },
        { userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/140035/11/2422/1195/5f05284fEf311a12c/932851fedc6ea0fc.png' },
        { userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/140035/11/2422/1195/5f05284fEf311a12c/932851fedc6ea0fc.png' },
        { userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/140035/11/2422/1195/5f05284fEf311a12c/932851fedc6ea0fc.png' }
      ]
    };
  },
  created() {
    document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
    this.publicData.$on('pinshousuTaskData', taskData => {
      this.taskData = taskData.taskActivityInfoVO.taskList;
      for (var i = 0; i < this.taskData.length; i++) {
        if (this.taskData[i].taskType == 3 || this.taskData[i].taskType == 7 || this.taskData[i].taskType == 15) {
          this.dayTaskData.push(this.taskData[i]);
        } else if (this.taskData[i].taskType == 4 || this.taskData[i].taskType == 5) {
          this.activityTaskData.push(this.taskData[i]);
        }
      }
      this.initData();
    });
  },
  methods: {
    async initData() {
      this.downClick();

      this.helpCompleteCount = this.type;
      this.activityUserLimit = this.activityUserLimit;
      for (var i = 0; i < this.taskData.length; i++) {
        if (this.taskData[i].taskType == 15) {
          bargainFriends(data => {
            if (data.data.friends.length > 0) {
              for (let i = 0; i < data.data.friends.length; i++) {
                if (i > 7) {
                  this.shareFriendList.push({ userImg: data.data.friends[i].userImg });
                } else {
                  this.shareFriendList[i].userImg = data.data.friends[i].userImg;
                }
              }
            }
          });
        }
      }
    },
    getChanceOption(index) {
      if (index == 1) {
        // 活动任务
        this.getChanceOptionCurIndex = 1;
      } else {
        this.downClick();
      }
    },
    downClick() {
      this.getChanceOptionCurIndex = 0;
    },
    checkActivityStatus() {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      let actStatus = sessionStorage.getItem('actStatus');

      if (actStatus == 2) {
        // Toast
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动尚未开始');
        // Toast('活动尚未开始');
        return;
      }
    },
    //关注商品，浏览商品，加购商品
    openDialog(type) {
      this.checkActivityStatus();
      this.checkTaskType(type);
    },
    //分享活动
    shareActivity() {
      this.checkActivityStatus();
      this.checkTaskType(4);
    },
    //逛会场/直播
    doTask() {
      this.checkActivityStatus();
      this.checkTaskType(5);
    },
    closeClick() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
    //点击空白处关闭弹框
    clickEmpty(){
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
    //阻止冒泡
    stopClickEmpty(event){
      event.stopPropagation();
    },
    checkTaskType(type) {
      //type 1、关注商品 2、浏览商品 3、加购商品 4、分享活动 5、逛会场/直播
      for (var i = 0; i < this.taskData.length; i++) {
        //关注商品
        if (this.taskData[i].taskType == 5 && type == 1) {
          var index = i;
          if (this.taskData[i].completeCount < this.taskData[i].maxNum) {
            this.closeClick();
            var maxCount = this.taskData[i].maxNum;
            addSkuDialogService.create(this.taskData[i], 3, count => {
              addSkuDialogService.close();
              if (count > maxCount) {
                this.taskData[index].completeCount = maxCount;
              } else {
                this.taskData[index].completeCount = count;
              }
            });
          } else {
            this.$toast('活动期间该任务完成次数已达上限！');
          }

          //浏览商品
        } else if (this.taskData[i].taskType == 3 && type == 2) {
          if (this.taskData[i].completeCount < this.taskData[i].maxNum) {
            this.closeClick();
            addSkuDialogService.create(this.taskData[i], 2, prizeRecordDetilClick => {
              addSkuDialogService.close();
            });
          } else {
            this.$toast('今天已完成该任务，请明天再来！');
          }

          //加购商品
        } else if (this.taskData[i].taskType == 7 && type == 3) {
          if (this.taskData[i].completeCount < this.taskData[i].maxNum) {
            var index = i;
            var maxCount = this.taskData[i].maxNum;
            this.closeClick();
            addSkuDialogService.create(this.taskData[i], 1, count => {
              addSkuDialogService.close();
              if (count > maxCount) {
                this.taskData[index].completeCount = maxCount;
              } else {
                this.taskData[index].completeCount = count;
              }
            });
          } else {
            this.$toast('今天已完成该任务，请明天再来！');
          }

          //邀请好友
        } else if (this.taskData[i].taskType == 15 && type == 4) {
          if (this.activityUserLimit == true) {
            this.$toast('活动期间您已完成该任务！');
            return;
          } else {
            if (this.helpCompleteCount < this.taskData[i].maxNum) {
              var index = i;
              pinshousuTaskRequest(this.taskData[i].taskId, '', data => {
                if (data.data == true) {
                  this.sendNum = this.taskData[index].sendNum;
                  bargainFriends(data => {
                    if (data.data.friends.length > 0) {
                      for (let i = 0; i < data.friends.length; i++) {
                        if (i > 7) {
                          this.shareFriendList.push({ userImg: data.friends[i].userImg });
                        } else {
                          this.shareFriendList[i].userImg = data.friends[i].userImg;
                        }
                      }
                    }
                  });
                  this.publicData.$emit('readSeconds', this.sendNum);
                }
                allShare(false, this, callBackData => {
                  console.log(callBackData, 'callBackData');
                });
              });
            } else {
              this.$toast('今天已完成该任务，请明天再来！');
              return;
            }
          }
          //逛会场/直播
        } else if (this.taskData[i].taskType == 4 && type == 5) {
          if (this.taskData[i].completeCount < this.taskData[i].maxNum) {
            var index = i;
            this.sendNum = this.taskData[i].sendNum;
            this.url = this.taskData[i].meetUrl;
            pinshousuTaskRequest(this.taskData[i].taskId, '', data => {
              this.taskData[index].completeCount = this.taskData[index].completeCount + 1;
              this.goToActiveTask(this.url);
              this.publicData.$emit('readSeconds', this.sendNum);
            });
          } else {
            this.$toast('您已完成该任务');
          }
        }
      }
    },
    //跳转会场
    goToActiveTask(url) {
      goToActive(url);
    }
  }
};
</script>
<style scoped>
.height {
  height: 6.45rem;
}

.height2 {
  height: 9.2rem;
}

.get-chance-dialog {
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/134869/2/3919/25643/5f044e20E7c0809be/456d03f91b575f26.png') no-repeat;
  background-size: 100%;
  height: 9.2rem;
  padding-top: 1.4rem;
  box-sizing: border-box;
  transition: height 0.5s ease-out;
  position: fixed;
  bottom: 0;
  max-height: 10.57rem;
  width: 100%;
  z-index: 201;
}

.get-chance-optionContent {
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/113964/16/12195/18102/5f044efbE94241188/500ad50ed2f37e96.png') no-repeat;
  background-size: 100%;
  width: 6.9rem;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.3rem;
  color: #ffeee5;
  margin: 0 auto;
}

.get-chance-option.active {
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/146722/35/2379/10994/5f044efbEd70c7171/770d700ab45ccb08.png') no-repeat;
  background-size: 100%;
  width: 3.83rem;
  height: 0.85rem;
  font-size: 0.36rem;
  color: #ffffff;
}

.get-chance-option {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}

.get-chance-content {
  width: 6.9rem;
  height: 6rem;
  margin: 0 auto;
  overflow: hidden;
}

.get-chance-content .task {
  width: 100%;
  height: 1.5rem;
  border-radius: 10px;
  background: #fff3df;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.get-chance-content .task:nth-child(n + 2) {
  margin-top: 0.26rem;
}

.get-chance-content .task .task-image {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0 2px 40px #fde1b4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.get-chance-content .task .btn {
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/143462/26/2354/4296/5f044a5fE48af56e0/39d40b22134779e5.png') no-repeat;
  background-size: 100%;
  width: 1.53rem;
  height: 0.57rem;
  font-size: 0.24rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.day-share {
  height: 2.51rem !important;
  align-items: flex-start !important;
  justify-content: space-around !important;
  flex-direction: column;
}

.share-friend {
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/140035/11/2422/1195/5f05284fEf311a12c/932851fedc6ea0fc.png') no-repeat;
  background-size: 100%;
  width: 0.71rem;
  height: 0.71rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-friend:nth-child(n + 2) {
  margin-left: 0.2rem;
}

.share-friend:nth-child(7n + 1) {
  margin-left: 0rem;
}

.share-friend:nth-child(n + 8) {
  margin-top: 0.1rem;
}

.down-arrow {
  width: 0.27rem;
  height: 0.14rem;
  position: absolute;
  right: -0.05rem;
  bottom: 0.3rem;
}

.close-btn-more {
  width: 0.45rem;
  height: 0.45rem;
  position: absolute;
  right: 0.23rem;
  top: 0.2rem;
}

.van-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: rgb(211, 31, 70);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-overflow-scrolling: touch;
}

/* .van-popup  */
.van-popup--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
