<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">
        <div
          v-for="(item, index) in recvAddrList"
          :key="index"
          class="items-center justify-between h-[210rpx] rounded-[24rpx] bg-white p-[30rpx] flex mt-[30rpx]"
          :class="{ 'active-address': item.isDefault }"
          @click="handleSelectAddress(item)">
          <div class="flex flex-col justify-evenly flex-1 h-full text-[32rpx] font-400 text-[#333]">
            <div class="flex items-center mt-[14rpx]">
              <div class="w-[72rpx] h-[38rpx] rounded-[10rpx] bg-[#e8f2ff] text-[26rpx] text-[#1D86FF] flex items-center justify-center mr-[10rpx]" v-if="item.isDefault">默认</div>
              <div class="mr-[20rpx]">{{ item.name }}</div>
            </div>
            <div>{{ item.phone }}</div>
          </div>

          <div class="h-[125rpx] py-[12rpx] mr-[30rpx]">
            <div class="border-r-[#CCCCCC] border-dashed border-r-[2rpx] h-full w-[1rpx]"></div>
          </div>

          <div class="flex flex-col items-center" @click="handleEditAddress(item)">
            <PencilLine class="w-[48rpx] h-[48rpx] text-[#29bebb]" />
            <div class="text-[#28BEBB] text-[32rpx] font-400 mt-[8rpx]">修改</div>
          </div>

          <Check class="text-[#fff] absolute bottom-[-10rpx] right-[-5rpx] font-700" v-if="item.isDefault" />
        </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="toAddAddressPage">
            <CirclePlus class="text-white mr-[16rpx] size-[54rpx]" fill="#fff" stroke="#29bebb" :stroke-width="2"/>
            <span class="text-white text-[44rpx]">新增被护理人</span>
          </div>
        </div>
      </div>
    </div>
  </nut-action-sheet>
</template>

<script lang="ts" setup>
  // import { useUserStore } from "@/store/user";
  import { X, PencilLine, CirclePlus, Check } 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 userStore = useUserStore();
  const recvAddrList = ref([
    { name: "王大力(女,67岁)", phone: "310108196005127765", isDefault: true },
    { name: "王小力(女,67岁)", phone: "310108196005127765", isDefault: false },
  ]);
  const router = useRouter();

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

  const handleEditAddress = (item: any) => {
    router.push({ path: "/mine/add/paramedic", query: { id: item.id } });
  };

  const toAddAddressPage = () => {
    router.push({ path: "/mine/add/paramedic" });
  };

  const handleSelectAddress = (item: any) => {
    
    recvAddrList.value = recvAddrList.value.map(item => {
      if (item.isDefault) {
        item.isDefault = false;
      }
      return item;
    });
    item.isDefault = true;
    // userStore.setDefaultAddress(item);
  };

  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;
    }
  }
</style>
