<template>
  <div class="flex flex-col bg-[#F5F5F5] px-[30rpx] pt-[30rpx]">
    <nut-form class="flex-1 min-h-0 add-paramedic-form">
      <div class="rounded-[20rpx] bg-white px-[30rpx] py-[44rpx]">
        <div class="flex items-center">
          <nut-form-item label-width="68px" class="flex-auto">
            <template #label>
              <span class="text-[32rpx] font-500 text-black">被护理人</span>
            </template>
            <nut-input v-model="formData.name" placeholder="请输入姓名" type="text" input-align="left" />
          </nut-form-item>
          <nut-form-item>
            <nut-radio-group v-model="formData.gender" direction="horizontal">
              <nut-radio :label="item.id" v-for="(item, index) in gender" :key="index">
                <template #icon>
                  <div class="w-[36rpx] h-[36rpx] rounded-full border-solid border-[#999] border-[2rpx] mr-[10rpx]"></div>
                  <span class="text-[#999] text-[32rpx] font-500">{{ item.name }}</span>
                </template>
                <template #checkedIcon>
                  <div class="w-[36rpx] h-[36rpx] rounded-full 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-radio>
            </nut-radio-group>
          </nut-form-item>
        </div>
        <nut-divider />
        <nut-form-item label-width="68px" class="w-full!">
          <template #label>
            <span class="text-[32rpx] font-500 text-black">身份证号</span>
          </template>
          <nut-input v-model="formData.identity" placeholder="请输入身份证号" type="text" input-align="left" />
        </nut-form-item>
      </div>

      <div class="rounded-[20rpx] bg-white px-[30rpx] py-[44rpx] mt-[30rpx]">
        <nut-form-item label-width="288px" class="w-full!" label-position="top" star-position="right">
          <template #label>
            <span class="text-[32rpx] font-500 text-black">健康档案</span>
            <p class="text-[28rpx] text-[#999AA3] mt-[10rpx]">(为了更好的服务您，请补充被护理人情况)</p>
          </template>
        </nut-form-item>
        <nut-divider class="my-[20rpx]" />
        <nut-form-item label-width="flex-auto" class="w-full! py-[34rpx]" v-for="item in fileCard" :key="item.key">
          <template #label>
            <span class="text-[32rpx] font-500 text-black">{{ item.name }}</span>
          </template>
          <nut-radio-group v-model="formData[item.key]" direction="horizontal" class="justify-end">
            <nut-radio :label="item.id" v-for="(item, index) in fileCardRadio" :key="index">
              <template #icon>
                <div class="w-[36rpx] h-[36rpx] rounded-full border-solid border-[#000] border-[2rpx] mr-[10rpx]"></div>
                <span class="text-[32rpx] font-500 text-[#000]">{{ item.name }}</span>
              </template>
              <template #checkedIcon>
                <div class="w-[36rpx] h-[36rpx] rounded-full bg-[#2bbfbc] flex items-center justify-center mr-[10rpx]">
                  <Check color="white" class="w-[32rpx] h-[32rpx]" stroke-width="3" />
                </div>
                <span class="text-[#28BEBB] text-[32rpx] font-500">{{ item.name }}</span>
              </template>
            </nut-radio>
          </nut-radio-group>
        </nut-form-item>
      </div>

      <div class="rounded-[20rpx] bg-white px-[30rpx] py-[30rpx] mt-[30rpx]">
        <nut-form-item label-width="128px" class="w-full!">
          <template #label>
            <div class="text-[32rpx] font-500 text-black flex items-center h-full">设为默认</div>
          </template>
          <div class="flex items-center justify-end">
            <nut-switch v-model="formData.isDefault" class="" active-color="#28BEBB"></nut-switch>
          </div>
        </nut-form-item>
      </div>

      <div class="flex flex-col mt-[120rpx]">
        <div class="rounded-[20rpx] bg-[#28BEBB] text-[44rpx] text-white font-600 flex items-center justify-center py-[28rpx]">保存</div>
        <div
          class="rounded-[20rpx] bg-white text-[44rpx] text-[#28BEBB] font-600 flex items-center justify-center py-[28rpx] border-[#28BEBB] border-[4rpx] border-solid mt-[38rpx]"
          @click="goBack">
          返回
        </div>
      </div>
    </nut-form>
  </div>
</template>

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

  const router = useRouter();
  const formData = reactive<Record<string, any>>({
    name: "",
    gender: 1,
    identity: "",
    isDefault: false,
    isDisabled: false,
    needAssistive: false,
    needLongTermMedicine: false,
    hasAllergy: false,
    hasChronicDisease: false,
  });

  const fileCard = [
    { name: "是否为失能患者", key: "isDisabled" },
    { name: "是否需要辅助器具", key: "needAssistive" },
    { name: "是否有长期服药需求", key: "needLongTermMedicine" },
    { name: "是否有过敏史", key: "hasAllergy" },
    { name: "是否患有慢性疾病", key: "hasChronicDisease" },
  ];

  const gender = [
    { id: 1, name: "先生" },
    { id: 2, name: "女士" },
  ];
  const fileCardRadio = [
    { id: 1, name: "是" },
    { id: 2, name: "否" },
  ];

  // const toMap = () => {
  //   router.push({ path: "/location/map" });
  // };

  const goBack = () => {
    router.back();
  };
</script>

<style lang="scss" scoped>
  .nut-radio-group .nut-radio {
    margin-bottom: 0;
    margin-right: 0;
    display: flex;
  }
  .nut-radio-group {
    display: flex;
  }
  :deep(.nut-cell-group__wrap) {
    margin: 0;
    display: contents;
  }

  .add-paramedic-form {
    --nut-cell-padding: 17px 0;
    --nut-divider-margin: 10px 0;
    --nut-divider-text-color: #f5f5f5;
    --nut-cell-after-border-bottom: 1px solid #f5f5f5;
    --nut-switch-height: 30px;
    --nut-switch-width: 54px;
    --nut-switch-inside-width: 26px;
    --nut-switch-inside-height: 26px;
    --nut-switch-inside-open-transform: translateX(100%);
    --nut-switch-inside-close-transform: translateX(10%);
    --nut-form-item-label-width: max-content;
  }
</style>
