<template>
  <div class="flex flex-col">
    <div class="flex flex-col flex-auto bg-[#f5f5f5] p-[30rpx]">
      <div class="rounded-[20rpx] bg-white flex flex-col pt-[16rpx] px-[20rpx] pb-[20rpx]" v-for="(item, index) in shoppingCartList" :key="index">
        <div class="flex">
          <img :src="item.cover" alt="" class="w-[192rpx] h-[192rpx] rounded-[20rpx]" />
          <div class="ml-[16rpx] flex-auto flex justify-between flex-col">
            <h1 class="text-[44rpx] font-500">{{ item.name }}</h1>
            <div
              class="text-[#1D86FF] text-[26rpx] font-400 rounded-[8rpx] bg-[#edf6ff] border-solid border-[#1D86FF] border-[2rpx] px-[10rpx] py-[6rpx] w-max">
              {{ 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>

      <div class="pay-form-wrapper mt-[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="timeShow = true">
              <nut-input v-model="formData.time" placeholder="请选择" type="text" input-align="right" readonly />
              <ChevronRight />
            </div>
          </nut-form-item>
        </nut-form>
      </div>
    </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>

    <ChooseLocation v-model:show="deliveryAddressShow" />
    <chooseTime v-model:show="timeShow" @on-get-time="handleGetTime"/>
  </div>
</template>

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


  const router = useRouter()
  const shoppingCartStore = useShoppingCartStore();
  const shoppingCartList = ref(shoppingCartStore.getShoppingCartByHousekeeping);

  const userStore = useUserStore();

  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.Housekeeping } });
  };

  const formData = reactive({
    address: computed(() => {
      const defaultAddress = userStore.recvAddrList.filter((item) => item.isDefault)[0];
      return defaultAddress ? defaultAddress.fullAddress : "";
    }),
    time: "",
  });

  const deliveryAddressShow = ref(false);

  const timeShow = ref(false)

  const handleGetTime = (val:string) => {
    formData.time = `${val}小时`
  }
</script>

<style lang="scss" scoped>
  .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;
    }
  }
</style>
