<template>
  <section class="carve-up-wrap"  @touchmove.prevent @click.prevent>
    <div class="inter-content carve-container" v-if="isFirstCarve">
      <img
        class="main-bg"
        src="~/assets/carve-up/main-bg.png"
        v-bp="{ component_tag: '363#360013'}"
        @click="openBag"
      >
      <img
        class="cancel"
        src="~/assets/icon-dialog-cancel.png"
        @click="knowFn"
        v-bp="{ component_tag: '363#360015'}"
      >
    </div>
    <div class="success-content carve-container" v-if="!isFirstCarve && hasQualification ">
      <div class="success-bg">
        <p class="title">
          <span class="line1"></span>
          <span class="text">恭喜您瓜分</span>
          <span class="line2"></span>
        </p>
        <p class="awards-num">{{beanCarveCount}}<span>云鹊豆</span></p>
        <p class="tips">所获云鹊豆将在1分钟内到账</p>
        <div class="btn-content">
          <div
            class="btn btn1"
            @click="goToBeanCenter"
            v-bp="{ component_tag: '363#360014'}"
          >
            去兑换
          </div>
          <div class="btn btn2" @click="knowFn">查看排名</div>
        </div>
      </div>
      <img
        class="cancel"
        src="~/assets/icon-dialog-cancel.png"
        @click="knowFn"
        v-bp="{ component_tag: '363#360015'}"
      >
    </div>
    <div class="defeat-content carve-container" v-if="!isFirstCarve && !hasQualification" >
      <div class="defeat-bg">
        <div class="content content2" v-show="unableReason == 4">
          <p class="title">您未参加本次活动</p>
        </div>
        <div class="content content1" v-show="unableReason == 3">
          <p class="title">很遗憾</p>
          <p class="text">您的勤奋分小于100不能瓜分云鹊豆</p>
        </div>
        <div
          class="know-btn"
          @click="knowFn"
          v-bp="{ component_tag: '363#360016'}"
        >
          我知道了
        </div>
      </div>
      <img
        class="cancel"
        src="~/assets/icon-dialog-cancel.png"
        @click="knowFn"
        v-bp="{ component_tag: '363#360015'}"
      >
    </div>
  </section>
</template>

<script>
  import {ENV_CONFIG} from '../../utils/enumerate'
  const { NUXT_ENV_APP } = process.env;
  export default {
    name: "index",
    props: {
      isFirstCarve: { //红包是否是未拆状态
        type: Boolean,
        default() {
          return true;
        }
      },
      hasQualification: { //是否可瓜分云鹊豆
        type: Boolean,
        default() {
          return true
        }
      },
      beanCarveCount: { //可瓜分云鹊豆数量
        type: Number,
        default() {
          return 0
        }
      },
      unableReason: { //3分数不够，4未参加
        type: Number,
        default() {
          return 0
        }
      },
    },
    data() {
      return {
        joinStatus: 2
      }
    },
    methods: {
      knowFn() {
        window.location.replace('https://phome.yunqueyi.com/template_v2/?id=636')
      },
      goToBeanCenter() { //跳转至云鹊豆中心
        this.$rocNative.dispatchEventByModuleCode({
          modeCode: 'M300',
          jsonString: [
            {
              "key":"pageUrl",
              "value": ENV_CONFIG[NUXT_ENV_APP].beanCenterUrl
            }
          ]
        });
      },
      openBag() {
        this.$emit('openBag')
      }
    }
  }
</script>

<style lang="less" scoped>
.carve-up-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background:rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  .carve-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    img.cancel {
      width: 30px;
      height: 30px;
    }
  }
  .inter-content {
    img.main-bg {
      width: 295.5px;
      height: 318.5px;
    }
    img.cancel {
      margin-top: 10px;
    }
  }
  .success-content {
    .success-bg {
      display: flex;
      flex-flow: column;
      align-items: center;
      width: 300px;
      height: 320px;
      background: url("../../assets/carve-up/success-bg.png") no-repeat;
      background-size: cover;
      .title {
        display: flex;
        align-items: center;
        margin-top: 44.5px;
        .line1,.line2 {
          display: inline-block;
          width: 20px;height: 1px;
          border-radius: .5px;
        }
        .line1 {
          background:linear-gradient(135deg,rgba(233,210,206,0) 0%,rgba(199,136,140,1) 100%);
        }
        .line2 {
          background:linear-gradient(270deg,rgba(233,210,206,0) 0%,rgba(199,136,140,1) 100%);
        }
        .text {
          color: #7B1A20;
          font-size: 13px;
          line-height: 13px;
          font-weight: 700;
          margin: 0 4px;
        }
      }
      .awards-num {
        color: #BC1C34;
        font-weight: 700;
        font-size: 40px;
        line-height: 40px;
        margin-top: 8px;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          height: 14px;
          line-height: 14px;
          align-self: flex-end;
          margin-bottom: 5.5px;
          margin-left: 3px;
        }
      }
      .tips {
        color: #fff;
        font-size: 13px;
        line-height: 13px;
        margin-top: 62px;
      }
      .btn-content {
        width: 200px;
        margin-top: auto;
        margin-bottom: 20px;
        .btn {
          width: 100%;
          height: 44px;
          margin: 0 auto;
          border-radius: 25.5px;
          text-align: center;
          font-size: 18px;
          line-height: 44px;
          font-weight: 700;
        }
        .btn1 {
          color: #7B1A20;
          background:linear-gradient(360deg,rgba(245,189,94,1) 0%,rgba(255,224,181,1) 100%);
          box-shadow:0px 2px 10px 0px rgba(159,23,35,1);
        }
        .btn2 {
          color: #fff;
          position: relative;
          margin-top: 10px;
        }
        .btn2:after {
          position: absolute;
          content: " ";
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          width: 200%;
          height:200%;
          border: 1PX solid #FFFFFF;
          border-radius: 51px;
          color: #FFFFFF;
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
          -webkit-transform: scale(.5, .5);
          transform: scale(.5, .5);
        }
      }
    }
    img.cancel {
      margin-top: 20px;
    }
  }
  .defeat-content {
    .defeat-bg {
      width: 250px;
      height: 275px;
      background: url("../../assets/carve-up/defeat-bg.png") no-repeat;
      background-size: cover;
      display: flex;
      flex-flow: column;
      align-items: center;
      .content {
        p {
          text-align: center;
        }
        .title {
          color: #373839;
          font-size: 18px;
          line-height: 18px;
          font-weight: 700;
        }
        .text {
          color: #666666;
          font-size: 14px;
          line-height: 19px;
          margin-top: 8px;
        }
      }
      .content1 {
        margin-top: 137px;
      }
      .content2 {
        margin-top: 143px;
      }
      .know-btn {
        width: 200px;
        height: 44px;
        background: linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
        border-radius: 25.5px;
        font-size: 18px;
        font-weight: 700;
        line-height: 44px;
        text-align: center;
        color: #fff;
        margin-top: auto;
        margin-bottom: 30px;
      }
    }
    img.cancel {
      margin-top: 20px;
    }
  }
}
</style>