<template>
  <view class="butttonGroup" :class="{ bg: isShow }">
    <view class="onlineBox">
      <view class="title">{{ selectPayMode }}</view>
      <image
        v-show="!isShow"
        src="@/static/image/home/down-icon.png"
        mode="scaleToFill"
        class="img"
        @click="showPay('up')"
      />
      <image
        v-show="isShow"
        src="@/static/image/home/up-icon.png"
        mode="scaleToFill"
        class="img"
        @click="showPay('down')"
      />
    </view>
    <view class="mode" v-show="isShow">
      <view v-for="(item, index) in modeList" :key="item.id" class="pay">
        <view
          :class="['name', currect === index ? 'active' : '']"
          @click="checkPay(item, index)"
          >{{ item.name }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      modeList: [
        // { id: "1", name: "线上支付" },// 暂时去除线上支付
        { id: "2", name: "线下支付" },
      ],
      isShow: false,
      currect: 0,
      selectPayMode: "线下支付", // 暂时去除线上支付
    };
  },
  methods: {
    showPay(type) {
      if (type === "up") {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    checkPay(item, index) {
      this.currect = index;
      if (this.selectPayMode === item.name) {
        return this.selectPayMode;
      }
      this.selectPayMode = item.name;
      this.$emit("payModeHandel", this.selectPayMode);
      this.isShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  background: #f5f5f5;
}
.butttonGroup {
  width: 198rpx;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;
  border: 0;
  .onlineBox {
    width: 198rpx;
    display: flex;
    align-items: center;
    height: 60rpx;
    background-color: #e4e4e4;
    border-radius: 30rpx;
    color: #434343;
    font-size: 20rpx;
    border: 0;
    justify-content: space-around;

    .title {
      // margin-left: 40rpx;
      // margin-right: 30rpx;
    }

    .img {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .mode {
    position: absolute;
    width: 100%;
    height: 150rpx;
    height: 80rpx; // 暂时去除线上支付
    border-radius: 0 0 30rpx 30rpx;
    z-index: 1;
    color: #434343;
    font-size: 20rpx;
    background: #f5f5f5;
    top: 57rpx;
    .pay {
      padding: 0 20rpx;
      .name {
        height: 42rpx;
        padding: 8rpx 0;
        margin-top: 14rpx;
        line-height: 42rpx;
        text-align: center;
      }
      .active {
        background: rgba(157, 208, 164, 0.2);
        border-radius: 30rpx;
      }
    }
  }
}
</style>
