<template>
  <!-- 统一认证组件 -->
  <div class="tongTog">
    <div class="buyBoxTog" v-if="
        pageData.remarks.isBuy === '1' && isBuy !== '已订购' && pageData.remarks.attestation ===0
      ">
      <div class="btn" v-if="indexNum===0" @click="$emit('btnClick')" :style="{
          'background-color': pageData.mainProduct.themeColor[0],
          'border-color': pageData.mainProduct.themeColor[1],
        }">
        {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
      </div>

      <div class="btn" v-else @click="$emit('btnClick')" :style="{
          'background-color': pageData.mainProduct.themeColor[0],
          'border-color': pageData.mainProduct.themeColor[1],
        }">
        {{ pageData.remarks.btnTextAss ? pageData.remarks.btnTextAss : "点我领取" }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pageData: Object,
    isBuy: String,
    indexNum: Number
  },
}
</script>

<style lang="scss">
.tongTog {
  // 产品配图样式
  .matchBanner {
    margin: 0 auto;
    margin-top: -8px;
    width: 690px;
    padding: 70px 35px 90px 35px;
    box-sizing: border-box;
    border-radius: 20px;
    border-width: 1px;
    border-style: solid;

    .matchImage {
      width: 100%;
      height: 134px;
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .textBox {
      // width: 750px;
      // padding: 0 50px;
      box-sizing: border-box;

      .input {
        width: 100%;
        height: 80px;
        background: #ffffff;
        border-radius: 10px;
        margin-top: 25px;
        opacity: 0.5;
        display: flex;
        flex-direction: row;
        padding: 0 15px;
        box-sizing: border-box;
        position: relative;

        input {
          margin: 0;
          padding: 0;
          border: none;
          outline: none;
          width: 70%;
          height: 100%;
          line-height: 80px;
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000;
        }

        .getcode {
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #0d0d0d;
          position: absolute;
          right: 20px;
          bottom: 24px;
        }
      }
    }
  }

  @keyframes scale {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(0.8);
    }
  }

  .buyBoxTog {
    position: fixed;
    bottom: 30px;
    left: 25px;
    z-index: 1;

    .btn {
      width: 700px;
      height: 100px;
      border-radius: 50px;
      line-height: 100px;
      font-size: 40px;
      border: 4px solid;
      font-weight: bold;
      text-align: center;
      color: #ffffff;
      animation-name: scale;
      animation-duration: 0.6s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }
  }
}
</style>