<template>
  <div>
    <cr-popup
      v-if="type === 'winning'"
      class="activity-modal"
      v-model="show"
      :closeable="true"
      get-container="body"
      close-icon="close"
      @close="onClose"
    >
      <div class="activity-winning">
        <div class="activity-winning-bg"></div>
        <div class="activity-winning-panel">
          <p class="Aw-panel-congratulate">恭喜您获得</p>
          <p class="Aw-panel-amount">5元</p>
          <p class="Aw-panel-packet">—可提现红包—</p>
          <cr-image
            class="Aw-panel-qrcode"
            width=""
            height=""
            fit="cover"
            src="@/assets/images/home/qrcode.jpg"
          />
          <p class="Aw-panel-account">快关注「芒果保险」公众号</p>
          <p class="Aw-panel-progress">查看红包进度</p>
        </div>
      </div>
    </cr-popup>
    <cr-popup
      v-if="type === 'guide'"
      class="activity-modal"
      v-model="show"
      :closeable="true"
      get-container="body"
      close-icon="close"
      @close="onClose"
    >
      <div class="activity-guide-panel">
        <div class="Ag-panel-insured">
          <span>还差一步</span>
          <p>您还未投保</p>
        </div>
        <p class="Ag-panel-amount">立即投保600万医疗保险</p>
        <div class="Ag-panel-strategy">
          <p class="Agp-strategy-title">红包策略</p>
          <div class="Agp-strategy-item">
            <i></i>
            <p>投保600万医疗保障（<span>首月1元</span>）</p>
          </div>
          <div class="Agp-strategy-item">
            <i></i>
            <p>完成投票 抽红包（<span>100%中奖</span>）</p>
          </div>
        </div>
        <p class="Ag-panel-button" @click="go">{{ `好的继续 (${time}s)` }}</p>
      </div>
    </cr-popup>
    <cr-popup
      v-if="type === 'vote'"
      class="activity-modal"
      v-model="show"
      :closeable="true"
      get-container="body"
      close-icon="close"
      @close="onClose"
    >
      <div class="activity-vote-panel">
        <div class="Av-panel-head">
          <p>完成投票，即可抽奖</p>
          <p>您会为家人购买百万医疗险吗？</p>
        </div>
        <div class="Av-pane-body">
          <p class="Avp-body-intro">【万家保·百万医疗险】</p>
          <p class="Avp-body-intro">
            可以100%报销责任内的医药费用，是医保的重要补充，是人人都应该购买的国民医疗保障。
          </p>
          <div class="Avp-body-opera">
            <div
              :class="[
                { 'Avpb-opera-left_selected': voteData.activeIdx === 0 },
                'Avpb-opera-item',
                'Avpb-opera-left'
              ]"
              @click="vote(0)"
            >
              <svg-icon class-name="Avpbo-item-svg" icon-class="understand" />
              <p class="Avpbo-item-text">了解</p>
            </div>
            <div
              :class="[
                { 'Avpb-opera-right_selected': voteData.activeIdx === 1 },
                'Avpb-opera-item',
                'Avpb-opera-right'
              ]"
              @click="vote(1)"
            >
              <svg-icon class-name="Avpbo-item-svg" icon-class="understand-not" />
              <p class="Avpbo-item-text">不了解</p>
            </div>
          </div>
          <div class="Avp-body-statistic">
            <p>
              了解 <span>{{ voteData.understandNum }}</span>
            </p>
            <p>
              不了解 <span>{{ voteData.notUnderstandNum }}</span>
            </p>
          </div>
          <cr-progress class="Avp-body-progress" :percentage="percentage" :show-pivot="false" />
        </div>
        <div class="Av-pane-footer">
          <cr-button class="Avp-body-button" @click="drawLottery">
            完成投票抽红包
          </cr-button>
          <p>最高<span>18888</span>元</p>
        </div>
      </div>
    </cr-popup>
    <cr-popup
      v-if="type === 'detail'"
      class="activity-modal"
      v-model="show"
      :closeable="true"
      get-container="body"
      close-icon="close"
      @close="onClose"
    >
      <div class="activity-detail-panel">
        <h4 class="Ad-panel-head">活动详情</h4>
        <div class="Ad-panel-body">
          <iframe
            class="activity-modal-detail"
            src="http://mangguo-contract.qthbx.com/huo-dong-xiang-qing/"
            frameborder="0"
            height="100%"
          ></iframe>
        </div>
        <div class="Ad-panel-footer"></div>
      </div>
    </cr-popup>
  </div>
</template>
<script>
const time = 6;
let timer = null;

export default {
  name: "Modal",
  props: {
    value: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: "winning"
    }
  },
  data() {
    return {
      show: this.value,
      time,
      voteData: {
        activeIdx: 0,
        understandNum: 15688,
        notUnderstandNum: 2566
      }
    };
  },
  computed: {
    percentage() {
      return (
        (this.voteData.understandNum /
          (this.voteData.understandNum + this.voteData.notUnderstandNum)) *
        100
      );
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.show = val;
        if (this.type === "guide" && val) {
          this.resetTime();
          this.countTime();
        }
      }
    }
  },
  methods: {
    onClose() {
      this.$emit("input", false);
    },
    go() {
      if (this.value) {
        this.$router.push({
          path: "/goods/detail",
          query: { id: "TKYLX001", type: "mi" }
        });
      }
    },
    resetTime() {
      this.time = time;
      if (timer) clearTimeout(timer);
    },
    countTime() {
      if (this.time === 0) {
        this.go();
        return;
      }
      this.time -= 1;
      timer = setTimeout(this.countTime, 1000);
    },
    vote(idx) {
      if (this.voteData.activeIdx === idx) return;
      this.voteData.activeIdx = idx;
      if (idx === 0) {
        this.voteData.notUnderstandNum--;
        this.voteData.understandNum++;
      } else if (idx === 1) {
        this.voteData.notUnderstandNum++;
        this.voteData.understandNum--;
      }
    },
    drawLottery() {
      this.$emit("input", false);
      this.$emit("game-start");
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";

.activity-modal {
  overflow: visible;
  background-color: transparent;

  @{deep} .cr-popup--close-top-right {
    top: -35px;
    right: 0px;
    color: #fff;
    font-size: 24px;
  }

  .activity-winning {
    &-bg {
      transform: rotate(90deg);
      width: 312px;
      height: 228px;
      top: -100px;
      position: absolute;
      z-index: -1;
      background: url("../../../assets/images/home/guangmang.png") no-repeat center / contain;
    }

    &-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 293px;
      height: 405px;
      background: url("../../../assets/images/home/winning@2x.png") no-repeat 0 0 / contain;

      .Aw-panel-congratulate {
        margin-top: 36px;
        font-size: 16px;
        color: #f94c4c;
        font-weight: 400;
        line-height: 22px;
      }

      .Aw-panel-amount {
        font-size: 56px;
        color: #f94c4c;
        font-weight: 600;
        line-height: 78px;
      }

      .Aw-panel-packet {
        font-size: 11px;
        color: #666666;
        font-weight: 400;
        line-height: 16px;
      }

      .Aw-panel-qrcode {
        margin: 8px 0 0 4px;
        width: 70px;
        height: 70px;
      }

      .Aw-panel-account {
        font-size: 11px;
        color: #f35422;
        font-weight: 400;
        line-height: 16px;
      }

      .Aw-panel-progress {
        font-size: 11px;
        color: #333333;
        font-weight: 600;
        line-height: 16px;
      }
    }
  }

  .activity-guide-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 293px;
    height: 405px;
    background: url("../../../assets/images/home/guide@2x.png") no-repeat 0 0 / contain;

    .Ag-panel-insured {
      display: flex;
      align-items: center;
      margin: 42px 0 3px;

      span {
        margin-right: 5px;
        font-size: 18px;
        color: #f94c4c;
        font-weight: 600;
        line-height: 25px;
      }

      p {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 16px;
        background: #ffeab7;
        border-radius: 8px 2px 8px 2px;
        font-size: 11px;
        color: #eaad1a;
        font-weight: 400;
        line-height: 16px;
      }
    }

    .Ag-panel-amount {
      font-size: 12px;
      color: #333333;
      font-weight: 400;
      line-height: 17px;
    }

    .Ag-panel-strategy {
      margin: 118px 0 32px;

      .Agp-strategy-title {
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        font-weight: 600;
        line-height: 20px;
      }

      .Agp-strategy-item {
        display: flex;
        align-items: center;
        font-size: 11px;
        color: #ffffff;
        font-weight: 400;
        line-height: 12px;

        i {
          position: relative;
          margin-right: 10px;
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
        }

        span {
          color: #ffc842;
        }

        &:nth-child(2) {
          margin: 14px 0 8px;

          i {
            background: #ffc842;

            &:after {
              position: absolute;
              top: 2px;
              left: 2.5px;
              display: block;
              border-left: 1px dashed #fff;
              height: 16px;
              content: "";
            }
          }
        }

        &:nth-child(3) {
          i {
            box-sizing: border-box;
            border: 1px solid #ffffff;
          }
        }
      }
    }

    .Ag-panel-button {
      display: flex;
      justify-content: center;
      padding-top: 9px;
      height: 55px;
      width: 232px;
      background: url("../../../assets/images/home/button.png") no-repeat 0 0 / contain;
      font-size: 20px;
      color: #b94a00;
      font-weight: 600;
      line-height: 28px;
    }
  }

  .activity-vote-panel {
    position: relative;
    box-sizing: border-box;
    padding: 24px 20px 32px;
    width: 300px;
    height: 477px;
    border-radius: 14px;
    background: #fff;
    &:after {
      position: absolute;
      top: 37px;
      right: 0;
      display: block;
      width: 34px;
      height: 25px;
      content: "";
      background: url("../../../assets/images/dialog-header-bg.png") no-repeat center/contain;
    }
    .Av-panel-head {
      margin-bottom: 22px;
      font-size: 18px;
      color: #333333;
      font-weight: 400;
      line-height: 25px;
      p:last-child {
        font-weight: 600;
      }
    }
    .Av-pane-body {
      margin-bottom: 44px;
      .Avp-body-intro {
        font-size: 12px;
        color: #666666;
        font-weight: 400;
        line-height: 20px;
      }
      .Avp-body-opera {
        display: flex;
        justify-content: space-between;
        margin: 22px 0 25px;
        .Avpb-opera-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 128px;
          height: 106px;

          .Avpbo-item-svg {
            margin-bottom: 10px;
            width: 40px;
            height: 40px;
          }
          .Avpbo-item-text {
            font-size: 12px;
            color: #ff6702;
            font-weight: 600;
            line-height: 17px;
          }
        }
        .Avpb-opera-left {
          background: url("../../../assets/images/home/understand@2x.png") no-repeat center/contain;
          &_selected {
            .Avpbo-item-text {
              color: #fff;
            }
            background: url("../../../assets/images/home/understand_selected@2x.png") no-repeat
              center/contain;
          }
        }
        .Avpb-opera-right {
          background: url("../../../assets/images/home/understand-not@2x.png") no-repeat
            center/contain;
          &_selected {
            .Avpbo-item-text {
              color: #fff;
            }
            background: url("../../../assets/images/home/understand-not_selected@2x.png") no-repeat
              center/contain;
          }
        }
      }
      .Avp-body-statistic {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 12px;
        color: #333333;
        font-weight: 600;
        line-height: 16px;
        span {
          color: #eaad1a;
        }
      }
      .Avp-body-progress {
        @{deep} .cr-progress__track {
          height: 12px;
          border-radius: 6px;
          background-color: #f4f4f4;
          .cr-progress__progress {
            background: linear-gradient(270deg, #ffe677 0%, #ffc842 100%);
            border-radius: 6px;
          }
        }
      }
    }
    .Av-pane-footer {
      position: relative;
      .Avp-body-button {
        width: 100%;
        height: 52px;
        background: #ffc842 !important;
        border-radius: 14px !important;
        font-size: 16px;
        color: #333333 !important;
        font-weight: 600;
        line-height: 22px;
      }
      p {
        position: absolute;
        top: -19px;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 20px;
        background: linear-gradient(180deg, #fd8484 0%, #f94c4c 100%);
        border-radius: 22px 22px 22px 4px;
        font-size: 11px;
        color: #ffffff;
        font-weight: 400;
        line-height: 16px;
        span {
          color: #ffc600;
        }
      }
    }
  }

  .activity-detail-panel {
    position: relative;
    overflow: hidden;
    padding: 24px 0px;
    width: 300px;
    height: 474px;
    background: #fff;
    border-radius: 14px;
    &:after {
      position: absolute;
      top: 30px;
      right: 0;
      width: 34px;
      height: 25px;
      content: "";
      background: url("../../../assets/images/dialog-header-bg.png") no-repeat center/contain;
    }
    .Ad-panel-head {
      margin: 0 20px 0;
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      line-height: 25px;
    }
    .Ad-panel-body {
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      padding: 9px 0 24px;
      width: 100%;
      height: 98%;
      border-radius: 14px;
    }
    .Ad-panel-footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 72px;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    }
  }
}
</style>
