<template>
  <div class="flex flex-col bg-[#f5f5f5]">
    <ul class="px-[30rpx] bg-[#f5f5f5] w-full pb-[30rpx]">
      <li class="p-[20rpx] rounded-[20rpx] bg-white w-full mt-[30rpx]" v-for="(item, index) in shoppingCartList" :key="index">
        <div class="flex">
          <img :src="item.cover" alt="cover" class="w-[192rpx] h-[192rpx] rounded-[20rpx]" />
          <div class="flex flex-col ml-[16rpx] justify-between">
            <div class="text-[40rpx] font-500">{{ item.name }}</div>
            <div class="text-[30rpx] text-[#666] font-400 mt-[10rpx]">{{ item.desc }}</div>
          </div>
        </div>
        <div class="flex justify-between items-center mt-[30rpx]">
          <div class="text-[32rpx] text-[#333] font-400">产品单价</div>
          <nut-price :price="item.price" size="normal" class="text-[36rpx] font-500" />
        </div>
        <div class="flex justify-between items-center mt-[22rpx]">
          <div class="text-[32rpx] text-[#333] font-400">购买数量</div>
          <nut-input-number v-model="item.count" readonly :min="0" @overlimit="(event, type) => handleOverLimit(event, type, item)" />
        </div>
      </li>
    </ul>

    <div class="pay-form-wrapper px-[30rpx]">
      <nut-form>
        <nut-form-item label="服务地址">
          <div class="flex items-center" @click="deliveryAddressShow = true">
            <nut-input v-model="formData.address" placeholder="" type="text" input-align="right" readonly class="text-[62rpx]" />
            <ChevronRight />
          </div>
        </nut-form-item>
        <nut-form-item label="服务日期">
          <div class="flex items-center" @click="calendarShow = true">
            <nut-input v-model="formData.date" placeholder="请选择" type="text" input-align="right" readonly />
            <ChevronRight />
          </div>
        </nut-form-item>
        <nut-form-item label="被护理人">
          <div class="flex items-center" @click="peopleShow = true">
            <nut-input v-model="formData.people" placeholder="" type="text" input-align="right" readonly />
            <ChevronRight />
          </div>
        </nut-form-item>
        <nut-form-item label="情况描述">
          <div class="flex items-center" @click="toPatientSituation">
            <nut-input v-model="formData.desc" placeholder="" type="text" input-align="right" readonly />
            <ChevronRight />
          </div>
        </nut-form-item>
      </nut-form>
    </div>

    <div class="pay-form-wrapper px-[30rpx] mt-[30rpx]">
      <nut-form>
        <nut-form-item label="服务人员性别" label-width="110">
          <div class="flex flex-center justify-end">
            <nut-radio-group v-model="formData.waiterFemale" direction="horizontal">
              <nut-radio v-for="item in gender" :label="item.id">
                <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]" stroke-width="3" />
                  </div>
                  <span class="text-[#28BEBB] text-[32rpx] font-500">{{ item.name }}</span>
                </template>
              </nut-radio>
            </nut-radio-group>
          </div>
        </nut-form-item>
      </nut-form>
    </div>

    <div class="mx-[30rpx] mt-auto" style="--nut-checkbox-label-margin-left: 5px">
      <nut-checkbox v-model="agreementFlag">
        <div class="text-[32rpx] font-400">
          已读并同意
          <span class="text-[#3568F6]">《平台服务协议》</span>
        </div>
      </nut-checkbox>
    </div>
    <div class="flex pl-[24rpx] py-[16rpx] pr-[30rpx] items-center justify-between mt-[10rpx] bg-white">
      <nut-price :price="totalPrice" size="large" class="font-500" />
      <div class="w-[416rpx] h-[100rpx] rounded-[20rpx] bg-[#28BEBB] text-white text-[44rpx] font-600 flex items-center justify-center" @click="toPayment">
        立即支付
      </div>
    </div>

    <nut-calendar
      ref="calendarRef"
      class="calendar-wrapper"
      v-model:visible="calendarShow"
      type="one"
      confirm-text="提交"
      :show-today="false"
      @close="calendarShow = false">
      <template #day="props">
        <div @click="handleCalendarChoose(props.date)">{{ props.date.day == new Date().getDate() ? "今" : props.date.day }}</div>
      </template>

      <template #footer-info>
        <div class="px-[30rpx] w-full">
            <div class="pb-safe">
                <div @click="calendarShow = false" class="w-full flex items-center justify-center text-[44rpx] font-500 text-white bg-[#28BEBB] rounded-[20rpx] my-[16rpx] py-[26rpx]">确定</div>
            </div>
        </div>
      </template>
    </nut-calendar>
    <ChooseLocation v-model:show="deliveryAddressShow"  />
    <ChoosePeople v-model:show="peopleShow"  />
  </div>
</template>

<script lang="ts" setup>
  import { useShoppingCartStore } from "@/store/shoppingCart";
  import { useRouter } from "vue-router";
  import { ChevronRight, Check } from "lucide-vue-next";
  import { useUserStore } from "@/store/user";
  import ChooseLocation from "@/components/checkout/chooseLocation.vue";
  import ChoosePeople from "@/components/checkout/choosePeople.vue";
import { CartTypeEnum } from "@/types/cart";

  const userStore = useUserStore();

  const router = useRouter();

  const shoppingCartStore = useShoppingCartStore();
  const shoppingCartList = ref(shoppingCartStore.getShoppingCartByHealthCare);

  const totalPrice = computed(() => {
    return shoppingCartList.value.reduce((acc, item) => acc + item.price * item.count, 0);
  });

  const toPayment = () => {
    router.push({ path: "/checkout/payment", query: { type: CartTypeEnum.HealthCare } });
  };
  const handleOverLimit = (_event: any, type: string, item: any) => {
    if (type === "reduce") {
      shoppingCartStore.removeShoppingCart(item.id);
    }
  };

  const formData = ref({
    address: computed(() => {
        const defaultAddress = userStore.recvAddrList.filter(item => item.isDefault)[0];
        return defaultAddress ? defaultAddress.fullAddress : "";
    }),
    date: "",
    tel: "",
    people: "王大力(女,67岁)",
    desc: "阿尔兹海默症,术后一周修复",
    waiterFemale: "0",
  });

  const gender = [
    { id: "0", name: "不限" },
    { id: "1", name: "男" },
    { id: "2", name: "女" },
  ];

  const agreementFlag = ref(false);

  const calendarShow = ref(false);

  const handleCalendarChoose = (value: any) => {
    formData.value.date = `${value.year}-${value.month}-${value.day}`;
  };

  const deliveryAddressShow = ref(false);

  const peopleShow = ref(false);

  const toPatientSituation = () => {
    router.push({ path: "/jinze/patient-situation" });
  };
</script>

<style lang="scss" scoped>
  :deep(.nut-input-number) {
    --nut-inputnumber-height: 32px;
    --nut-inputnumber-input-margin: 0 2px;
    --nut-inputnumber-input-border-radius: 0;

    & .nut-input-number__icon {
      height: 32px;
      width: 32px;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    & :nth-child(1) {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    & :nth-child(3) {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }

  .pay-form-wrapper {
    --nut-cell-box-shadow: 0px #fff;
    --nut-cell-border-radius: 10px;

    --nut-form-item-label-font-size: 16px;
    --nut-input-font-size: 16px;
    :deep(.nut-cell-group__wrap) {
      margin: 0;
    }

    :deep(.nut-form-item__label) {
      color: #333;
    }
  }
  :deep(.nut-calendar .nut-calendar__footer){
    height: unset;
  }
</style>

<style>
  :root {
    --nut-calendar-primary-color: #1d86ff;
    --nut-calendar-day-active-border-radius: 4px;
  }
</style>
