<template>
  <nut-action-sheet v-model:visible="innerShow">
    <div class="flex flex-col bg-[#F5F5F5]">
      <div class="relative py-[32rpx] text-center bg-white">
        <div class="text-[36rpx] font-500">选择服务时长</div>
        <div class="w-[60rpx] h-[60rpx] bg-[#f5f5f5] rounded-full absolute top-[20rpx] right-[20rpx] flex items-center justify-center" @click="handleClose">
          <X class="text-[25rpx]" />
        </div>
      </div>

      <div class="px-[30rpx] py-[20rpx] min-h-0 flex-auto overflow-auto">
        <nut-radio-group v-model="chooseTime" class="flex time-radio-group" direction="horizontal">
          <nut-radio v-for="item in timeList" :key="item.value" :label="item.value" shape="button">{{ item.label }}</nut-radio>
        </nut-radio-group>

        <div class="text-[32rpx] text-[#999AA3] mt-[20rpx]">2小时适合面积≤50平米房屋</div>
      </div>

      <div class="px-[30rpx] py-[16rpx] bg-white">
        <div class="pb-safe">
          <div class="flex items-center justify-center bg-[#28BEBB] rounded-[20rpx] px-[80rpx] py-[28rpx]" @click="submit">
            <span class="text-white">确定</span>
          </div>
        </div>
      </div>
    </div>
  </nut-action-sheet>
</template>

<script lang="ts" setup>
  import { X } from "lucide-vue-next";

  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
  });
  const innerShow = computed({
    get() {
      return props.show;
    },
    set(value) {
      emit("update:show", value);
    },
  });
  const chooseTime = ref(2);

  const timeList = [
    {
      label: "2小时",
      value: 2,
    },
    {
      label: "3小时",
      value: 3,
    },
    {
      label: "4小时",
      value: 4,
    },
    {
      label: "5小时",
      value: 5,
    },
    {
      label: "6小时",
      value: 6,
    },
  ];


  const emit = defineEmits(["update:show",'onGetTime']);

  const submit = () => {
    handleClose();
    emit("onGetTime",chooseTime.value)
  };

  const handleClose = () => {
    emit("update:show", false);
  };
</script>

<style lang="scss" scoped>
  .active-address {
    outline: 2px solid #000000;
    position: relative;
    & ::before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      right: 0;
      bottom: 0;
      border: 15px solid;
      border-color: transparent #000 #000 transparent;

      border-bottom-right-radius: 10px;
    }
  }

  .time-radio-group {
    --nut-radio-button-padding: 13px 32px;
    --nut-radio-button-border-radius: 5px;
    --nut-radio-label-font-active-color:#0AB3B0;
    --nut-radio-label-button-border-color: #28BEBB;
    --nut-radio-label-button-background: #e9f8f8;
    --nut-radio-button-font-size:18px;

    :deep(.nut-radio__button){
        background-color: #fff;
    }
  }
</style>
