<template>
    <div class="flex flex-col bg-[#F5F5F5]">
        <div class="p-[30rpx]">
            <div class="rounded-[20rpx] bg-white h-[1004rpx] px-[30rpx] pb-[28rpx]">
              <nut-form class="situation-form">
                <nut-form-item v-for="item in checkboxList" :key="item.key">
                  <nut-checkbox v-model="formData[item.key]">
                    <template #icon>
                  <div class="w-[36rpx] h-[36rpx] rounded-[10rpx] border-solid border-[#000] border-[2rpx] mr-[10rpx]"></div>
                  <span class="text-[#000] text-[32rpx] font-500">{{ item.name }}</span>
                </template>
                <template #checkedIcon>
                  <div class="w-[36rpx] h-[36rpx] rounded-[10rpx] bg-[#2bbfbc] flex items-center justify-center mr-[10rpx]">
                    <Check color="white" class="w-[32rpx] h-[32rpx]" />
                  </div>
                  <span class="text-[#28BEBB] text-[32rpx] font-500">{{ item.name }}</span>
                </template>
                  </nut-checkbox>
                </nut-form-item>
                <nut-form-item label="" class="mt-[25rpx]! p-0!">
                  <nut-textarea v-model="formData.specialRequest" placeholder="选填，可以告诉我们您的特殊需求" type="text" style="--nut-white: #f5f5f5; padding: 15px !important;" class="h-[306rpx] rounded-[20rpx] text-[32rpx]"/>
                </nut-form-item>
              </nut-form>
            </div>
        </div>
        <div class="px-[30rpx] py-[16rpx] bg-white mt-auto">
            <nut-button class="w-full! submit-btn rounded-[20rpx]!" shape="square" @click="handleSubmit">提交</nut-button>
        </div>
    </div>
</template>

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

const router = useRouter();

const formData = reactive<Record<string, any>>({
  psychosis: false,
  alzheimer: false,
  surgery: false,
  wheelchair: false,
  catheter: false,
  specialRequest: ''
});

const checkboxList = [{name:'精神病史',key:'psychosis'},{name:'阿尔兹海默症',key:'alzheimer'},{name:'术后病人（术后一周以内）',key:'surgery'},{name:'患者不能行走需使用轮椅或平车',key:'wheelchair'},{name:'患者有导管（导尿管、胃管等）',key:'catheter'}]

const handleSubmit = () => {
    router.back();
}

</script>

<style lang="scss" scoped>
.situation-form{
    --nut-cell-border-radius:0;
    --nut-cell-box-shadow:none;
    --nut-cell-padding: 21px 0;

    --nut-input-font-size:16px;

    --nut-textarea-font: 16px;

    :deep(.nut-cell-group__wrap){
        margin: 0;
    }
}

.submit-btn{
    --nut-button-default-font-size: 22px;
    --nut-button-default-padding: 13px 0;
    --nut-button-default-bg-color:#28BEBB;
    --nut-button-default-color: #fff;
    --nut-button-default-height:auto;
}
</style>