<template>
  <view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
	<HeaderNav title="预约服务" :is-back="true"></HeaderNav>
	<view class="app-wallpaper">
    <view class="addr-container">
      <view class="addr-content-container">
        <view class="addr-content">
          <view class="addr-content-main row" :style="{
          backgroundImage:'url('+staticImage.addrBg+')'
          }" @click="navTo('/pages/Addr/index?type=select')">
            <view class="main-img">
              <image mode="widthFix" class="img" :src="staticImage.addrAvatar"/>
            </view>
            <view class="main-content">
              <image mode="heightFix" class="img" :src="staticImage.addrFw"/>
              <view class="main-content-text">
                请输入具体地址
              </view>
            </view>
            <view class="main-select-btn ">
              <view class="main-select-btn-gun"></view>
              <view class="main-select-btn-content row">
                <view class="content-img col-12">
                  <image mode="widthFix" class="img" :src="staticImage.addrBook"/>
                </view>
                <view class="content-text col-12">
                  选择地址
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="addr-background-container">
        <view class="addr-background-content"></view>
      </view>
    </view>
    <view class="order-container">
      <view class="order-content-container">
        <view class="order-content">
          <view class="order-content-main row">
            <view class="order-item row">
              <view class="item-title">
                服务日期
              </view>
              <view class="item-content row col">
                <view class="item-content-tag">
                  <view class="tag-text">
                    2023/5/25
                  </view>
                  <view class="tag-close">
                    <image mode="heightFix" class="img" :src="staticImage.tagClose"/>
                  </view>
                </view>
                <view class="item-content-tag">
                  <view class="tag-text">
                    2023/5/25
                  </view>
                  <view class="tag-close">
                    <image mode="heightFix" class="img" :src="staticImage.tagClose"/>
                  </view>
                </view>
              </view>
              <view class="item-icon" @click="showCalendar">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <view class="order-item row">
              <view class="item-title">
                增值服务
              </view>
              <view class="item-content row col">
                <view class="item-content-tag">
                  <view class="tag-text">
                    洗澡
                  </view>
                  <view class="tag-close">
                    <image mode="heightFix" class="img" :src="staticImage.tagClose"/>
                  </view>
                </view>
                <view class="item-content-tag">
                  <view class="tag-text">
                    剪指甲
                  </view>
                  <view class="tag-close">
                    <image mode="heightFix" class="img" :src="staticImage.tagClose"/>
                  </view>
                </view>
              </view>
              <view class="item-icon">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <view class="order-item row">
              <view class="item-title">
                选择优惠
              </view>
              <view class="item-content row col">
                <view class="item-content-text">
                  58元优惠券
                </view>
              </view>
              <view class="item-icon">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="order-background-container">
        <view class="order-background-content"></view>
      </view>
    </view>
    <view class="order-container">
      <view class="order-content-container">
        <view class="order-content">
          <view class="order-content-main row">
            <view class="order-content-main-title-img">
              <image mode="heightFix" class="img" :src="staticImage.selectPet"/>
            </view>
            <view class="order-item pet-page-item row">
              <PetPage class="pet-page"></PetPage>
            </view>


          </view>
        </view>
      </view>
      <view class="order-background-container">
        <view class="order-background-content"></view>
      </view>
    </view>
    <view class="order-container">
      <view class="order-content-container">
        <view class="order-content">
          <view class="order-content-main row">
            <view class="order-content-main-title-img col-12">
              <image mode="heightFix" class="img" :src="staticImage.selectService"/>
            </view>
            <u-radio-group
              v-model="radioValue1"
              placement="row"
              @change="groupChange"
              :size="30"
              :icon-size="30"
              icon-color="#4DC3B8"
              active-color="#ffffff"
          >
            <view class="order-item pet-page-item row">
              <view class="order-item-container row" >

                <view class="order-item-col col-4" v-for="(item,index) in [1,2,3]">
                  <view class="order-item-content-group">
                    <view class="count-group-content">
                      <image mode="heightFix" class="img" :src="staticImage.groupImg"/>
                      <view class="group-title">专业服务</view>
                      <view class="group-desc">标准</view>
                      <view class="group-checkbox">
                        <u-radio
                            :customStyle="{marginBottom: '8px'}"
                            :key="index"
                            :name="item"
                            @change="radioChange"
                        >
                        </u-radio>
                      </view>
                    </view>
                    <view class="count-group-background">
                      <view class="count-background"></view>
                    </view>
                  </view>
                </view>

              </view>
            </view>
        </u-radio-group>

          </view>
        </view>
      </view>
      <view class="order-background-container">
        <view class="order-background-content"></view>
      </view>
    </view>
	</view>
  <view class="footer-menu row">
    <view class="row col">
      <view class="foot-menu-main-title row">
        <view class="main-title">费用共计</view>
        <view class="main-price">￥58.8</view>
        <view class="main-title">元</view>
      </view>
      <view class="foot-menu-checkbox-group row col">
        <view class="foot-menu-checkbox"></view>
        <view class="foot-menu-title">
          <text>阅读并同意</text><text class="foot-menu-url">《上门喂养协议》</text>
        </view>
      </view>
    </view>
   <view class="">
     <MzButton
         title="立即下单"
         button-color="#4DC3B8"
         font-color="#FFFFFF"
         button-width="200rpx"
     >
     </MzButton>
   </view>
  </view>
  <uv-calendar ref="calendar" mode="multiple" title="选择服务日期" @confirm="confirm" color="#4DC3B8" round="40rpx"></uv-calendar>
	<!-- <RightNav></RightNav> -->
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '../../components/MzButton/Index.vue';
	import PetPage from '../../components/PetPage/Index.vue';
	import api from '@/utils/functions.js';
  import {cardDetail} from "../../api/card";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton,
      PetPage
		},
		data() {
			return {
        radioValue1:[],
        list: ['未付款', '待评价', '已付款'],
        curNow: 0,
        id:'',
				title: 'Hello',
				loading: true,
				staticImage: {
					screenActiveImg: imghost + '/static/image/screen-active.png',
					cardBackground: imghost + '/static/image/order-card-background.png',
					wallpaperBgImage:imghost +'/static/image/background.png',
					dogImage:imghost+'/static/image/index-user-title-dog.png',
          cardDetailCard:imghost+'/static/image/card-detail-card.png',
          couponsBackground:imghost+'/static/image/card-detail-coupons.png',
          addrBg:imghost+'/static/image/order-create-addr-bg.png',
          addrAvatar:imghost+'/static/image/order-create-addr-avatar.png',
          addrFw:imghost+'/static/image/order-create-addr-fw.png',
          addrBook:imghost+'/static/image/order-create-addr-book.png',
          tagClose:imghost+'/static/image/order-create-tag-close.png',
          selectPet:imghost+'/static/image/order-create-select-pet.png',
          selectService:imghost+'/static/image/order-create-select-service.png',
          groupImg:imghost+'/static/image/order-create-group-1.png',
				},
				indexBanner: [{
					image: imghost + '/static/image/banner.png',
					url: '',
				}],
				user: {
					avatar: imghost + '/static/image/banner.png',
					nickname: '清晨的风',
					coupons: 221,
					id: 88685
				},
				isTop: false,
				pagePadding: 100,
				petImage: imghost + '/static/image/pet_avatar1.jpeg',
				orderCardList:[
					{
						title:'成都市武侯区丰德国际4栋...',
						tags:['刷毛','洗澡'],
						do_time:'2023/05/03 15—17时',
						create_time:'2023/03/03 15:23:22',
					},
					{
						title:'成都市武侯区丰德国际4栋...',
						tags:['刷毛','洗澡'],
						do_time:'2023/05/03 15—17时',
						create_time:'2023/03/03 15:23:22',
					},
				],
        couponsList: [{
          price: '57',
          title: '57元抵扣券',
          cause: '满0.01使用',
          coupons_number:10,
          time: '满0.01元使用仅限线上预约下单使用',
          is_timeout: false,
        }]
			}
		},
		onLoad(options) {
      this.id = options.id;
      this.getCardDetail();
		},
		methods: {
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
      getCardDetail(){
        cardDetail({
          id:this.id
        }).then((res) => {
          console.log(res)
        })
      },
      sectionChange(index) {
        this.curNow = index;
      },
      radioChange(n) {
        console.log('radioChange', n);
      },
      groupChange(n) {
        console.log('radioChange', n);
      },
      confirm(){},
      showCalendar(){
        this.$refs.calendar.open();
      },

		},
		onPageScroll(res) {
			if(res.scrollTop <= 20){
				uni.$emit('isTop', true);
			}else{
				uni.$emit('isTop', false);
			}
		},
		created() {
			this.pagePadding = (api.navHeight().navPaddingTop +
				api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		},
    mounted() {

    },
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>