<template>
  <!-- 充值免单 -->
  <view class="rechargeFree">
    <view class="rechargeFree_bg" @click="itemClick">
      <view class="left">
        <view class="icon">优惠</view>
        <view class="text">
          充值消费{{ freeDineConfig.rechargeTimes }}倍，本单立享免单！</view
        >
      </view>
	  <view @click.stop="()=>{}">
		<up-checkbox
        :disabled="!freeDineConfig.enable"
        @change="changeFree"
        shape="circle"
		activeColor="#E8AD7B" 
        usedAlone
        v-model:checked="changeFreeenable"
        icon-size="20"
        size="20"
      >
      </up-checkbox>
	  </view>

      <!-- <up-checkbox-group iconPlacement="right">
				<up-checkbox : v-model="changeFreeenable"
					:checked="freeDineConfig.enable" @change="change" activeColor="#E8AD7B" shape="circle"
					icon-size="16" size="16">
				</up-checkbox>
			</up-checkbox-group> -->
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";

// 定义接收的属性
const props = defineProps({
  freeDineConfig: {
    type: Object,
    default: {},
  },
  payAmount: {
    type: Number,
    default: 0,
  },
});
function itemClick(){
	changeFreeenable.value = !changeFreeenable.value;
	emits("changeFree", changeFreeenable.value);

}
const emits = defineEmits(["changeFree"]);

const changeFreeenable = ref(false);

/**
 * 监听是否免单
 */
const changeFree = (e) => {
  emits("changeFree", e);
};
</script>

<style lang="scss" scoped>
.rechargeFree {
  // padding: 0 20rpx;
  margin-top: 32rpx;

  .rechargeFree_bg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 24rpx;
    border-radius: 24rpx;
    background-color: #fff;

    .left {
      display: flex;
      align-items: center;

      .icon {
        width: 68rpx;
        height: 36rpx;
        text-align: center;
        line-height: 36rpx;
        background: linear-gradient(180deg, #fede81 0%, #feb263 100%);
        border-radius: 12rpx 0rpx 12rpx 0rpx;
        font-weight: 500;
        font-size: 20rpx;
        color: #ffffff;
        margin-right: 18rpx;
      }

      .text {
        font-weight: 700;
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}
</style>