<template>
  <view class="buy-btns">
    <template v-if="isLogin && !userInfo.phone">
      <button
        v-for="item in buyBtns"
        :key="item.num"
        :class="[
          'btn',
          {
            'btn-level-2': item.num > 3,
            'btn-level-3': item.num > 5,
            'btn-noprice': !item.price,
          },
        ]"
        open-type="getPhoneNumber"
        @getphonenumber="handlePhoneNumber($event, item)"
      >
        <text v-if="item.pop" class="btn-pop">{{ item.pop }}</text>
        <text class="btn-buy">{{ item.title }}</text>
        <template v-if="item.price"
          ><text class="small">&yen;</text> {{ item.price }}</template
        >
      </button>
    </template>
    <template v-else>
      <button
        v-for="item in buyBtns"
        :key="item.num"
        :class="[
          'btn',
          {
            'btn-level-2': item.num > 3,
            'btn-level-3': item.num > 5 || item.num === 0,
            'btn-noprice': !item.price,
          },
        ]"
        @click="handleClick(item)"
      >
        <text v-if="item.pop" class="btn-pop">{{ item.pop }}</text>
        <text class="btn-buy">{{ item.title }}</text>
        <template v-if="item.price"
          ><text class="small">&yen;</text> {{ item.price }}</template
        >
      </button>
    </template>
  </view>
</template>

<script>
import login from "@/lib/utils/login";

export default {
  props: {
    userInfo: {
      type: Object,
      default: null,
    },
    buyBtns: {
      type: Array,
      default: () => [], // {'num', 'pop', 'title', 'price'}
    },
  },
  data() {
    return {};
  },
  computed: {
    isLogin() {
      return !!this.userInfo && !!this.userInfo.session;
    },
  },
  methods: {
    // 获取联系方式
    handlePhoneNumber(e, item) {
      if (e.detail.code) {
        login.setPhoneData({
          phone_code: e.detail.code,
          session: this.userInfo.session,
          callback: (data) => {
            this.$emit("login", data);
            if (data.phone) {
              uni.showToast({
                icon: "none",
                title: "绑定手机号码成功",
                duration: 2e3,
              });
            }

            this.$emit("click", item, true);
          },
          fail: () => {
            this.$emit("click", item);
          },
        });
      } else {
        this.$emit("click", item);
      }
    },
    handleClick(item) {
      if (this.isLogin) {
        return this.$emit("click", item);
      }

      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      login.wxLogin((userInfo) => {
        uni.hideLoading();
        this.$emit("login", userInfo);
        const msg =
          userInfo.coupons && userInfo.coupons.is_bind_coupon === 1
            ? userInfo.coupons.is_bind_info
            : "";

        if (!userInfo.phone || msg) {
          uni.showToast({
            icon: "none",
            title: msg || "登录成功~",
            duration: 2e3,
          });
          if (!userInfo.phone) return;
        }

        this.$emit("click", item, true);
      });
    },
  },
};
</script>

<style lang="scss">
.buy-btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  .btn {
    box-sizing: border-box;
    width: 170rpx;
    height: 88rpx;
    border: 0;
    border-radius: 0;
    background: url(@/assets/detail/btn-buy.png) no-repeat;
    background-size: contain;
    font-size: 24rpx;
    line-height: 1;
    font-weight: 500;
    color: #000000;
    padding: 24rpx 0 0;
    font-family: unidreamledregular, Helvetica Neue, Helvetica, Arial,
      Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei,
      WenQuanYi Micro Hei, sans-serif;
    overflow: visible;

    .btn-pop {
      position: absolute;
      top: -20rpx;
      left: 12rpx;
      width: 100rpx;
      height: 32rpx;
      background: url(@/assets/detail/btn-buy-pop-2.png) no-repeat center top;
      background-size: contain;
      text-align: center;
      font-size: 16rpx;
      font-weight: 500;
      color: #ff69a8;
      line-height: 28rpx;
    }
    &.btn-level-2 {
      background-image: url(@/assets/detail/btn-buy-2.png);
    }
    &.btn-level-3 {
      background-image: url(@/assets/detail/btn-buy-3.png);
      .btn-pop {
        background-image: url(@/assets/detail/btn-buy-pop-3.png);
        color: #ffcd2f;
      }
    }
    .small {
      font-size: 16rpx;
      margin-right: 4rpx;
    }
    .btn-buy {
      font-family: ysbth, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB,
        Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei,
        WenQuanYi Micro Hei, sans-serif;
      font-size: 34rpx;
      color: #000000;
      line-height: 1;
      display: block;
    }
    &::after {
      display: none;
    }
    &.btn-noprice {
      padding-top: 32rpx;
      .btn-buy {
        font-size: 40rpx;
      }
    }
  }
}
</style>
