<template>
  <view>
    <view v-if="orderType=='feed'" class="feed">
      <wd-cell title="请选择宠物数量"></wd-cell>
      <view class="tags w-full grid grid-cols-5"
            style="height: 100rpx; gap: 20rpx;padding: 20rpx;box-sizing: border-box">
        <wd-tag
          class="flex flex-center"
          style="border-radius: 20rpx;font-size: 30rpx;outline: 2rpx #f0f0f0 solid "
          v-for="item in 5"
          :bg-color="selectedPetNum == item ? '#FCCB30' : '#fff'"
          color="black"
          :key="item"
          @click="selectedPetNum = item"
        >{{ item }}只
        </wd-tag>
      </view>
      <wd-cell title="喂宠时间"></wd-cell>
      <view class="tags w-full grid grid-cols-5"
            style="height: 100rpx; gap: 20rpx;padding: 20rpx;box-sizing: border-box">
        <wd-tag
          class="flex flex-center"
          style="border-radius: 20rpx;font-size: 30rpx;outline: 2rpx #f0f0f0 solid "
          v-for="item in [30,60]"
          :bg-color="selectedFeedTime == item ? '#FCCB30' : '#fff'"
          color="black"
          :key="item"
          @click="selectedFeedTime = item"
        >{{ item }}分钟
        </wd-tag>
      </view>
      <wd-cell title="请选择服务时间"></wd-cell>
      <wd-datetime-picker style="border: 2rpx #f0f0f0 solid;margin: 20rpx;" v-model="serviceTime"/>
    </view>
    <!--    <view v-if="orderType=='boarding'">-->
    <view>

      <wd-cell title="请选择宠物"></wd-cell>
      <view class="flex gap-4" style="padding: 20rpx;">
        <view class="add flex-center"
              style="width: 120rpx;aspect-ratio: 1/1;background-color:#FCCB30;border-radius: 20rpx;">
          <uni-icons type="plusempty" size="30" color="#777"></uni-icons>
        </view>
        <view class="pet-card flex-center gap-2"
              style="border: 2rpx solid #e5e5e5;max-width: 300rpx;max-height: 120rpx;font-size: 25rpx;border-radius: 20rpx;padding: 25rpx"
              v-for="item in 2">
          <view class="avatar" style="height: 80rpx;width: 80rpx;">
            <image
              src="http://116.204.119.171:9000/linghe/static/home/cwpb.png"
              style="width: 100%;height: 100%;border-radius: 50%;" mode="scaleToFill"></image>
          </view>
          <view class="info flex-column flex">
            <text style="font-size: 28rpx;font-weight: bold;">宠物名称</text>
            <text style="font-size: 25rpx;color: #d1d1d1;">宠物品种</text>
          </view>
        </view>
      </view>
      <wd-cell title="选择寄养时间" value="共五天" is-link></wd-cell>
      <view class="flex justify-around">
        <view :style="{borderLeft:index  == 1 ? '2rpx solid #e5e5e5':'',width:'50%'}"
              v-for="(i,index) in [['2021-5-28','9:00'],['2021-6-2','9:00']]">
          <view style="text-align:center;">{{ i[0] }}</view>
          <view style="text-align:center;">{{ i[1] }}</view>
        </view>
      </view>
    </view>
    <wd-cell title="联系人"></wd-cell>
    <view style="margin: 20rpx;padding: 20rpx;border: 2rpx solid #f0f0f0;">
      <wd-input v-model="hostNickName" no-border placeholder="请输入联系人姓名"/>
    </view>
    <wd-cell title="联系电话"></wd-cell>
    <view style="margin: 20rpx;padding: 20rpx;border: 2rpx solid #f0f0f0;">
      <wd-input v-model="phoneNumber" no-border placeholder="请输入联系电话"/>
    </view>
    <wd-cell title="备注"></wd-cell>
    <view style="margin: 20rpx;padding: 20rpx;border: 2rpx solid #f0f0f0;">
      <wd-input v-model="remarks" no-border placeholder="请输入备注信息"/>
    </view>
    <view class="w-full flex justify-between" style="border-top: 2rpx solid #f0f0f0;padding: 20rpx">
      <view class="left">
        <text color="red" style="font-size: 20rpx">￥</text>
        <text color="red" style="font-size: 50rpx">
          {{ orderType == 'feed' ? 30 : 50 }}
        </text>
      </view>
      <view class="right"
            style="background-color:#FCCB30;padding: 20rpx 30rpx;border-radius: 30rpx;font-size: 20rpx;font-weight: bold;">
        <text>立即下单</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {imgUrl} from "@/utils/commUtils";

const orderType = ref("")
onLoad((options) => {
  orderType.value = options.type
})
const selectedPetNum = ref(1)
const selectedFeedTime = ref(30)
const serviceTime = ref("")
const hostNickName = ref("")
const phoneNumber = ref("")
const remarks = ref("")
</script>


<style scoped lang="scss">
view {
  box-sizing: border-box;
}
</style>
