<template>
  <HeaderNav title="萌宠详情" :is-back="true"></HeaderNav>
	<view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">

		<view class="order-screen-container row">
			<view class="order-list-container">
				<view class="order-list-item">
          <view v-show="false" class="pet-gun" :style="{
          backgroundImage:'url('+staticImage.petGun+')'
          }"></view>
					<view class="order-card-container row">
						<view class="order-card-container-background col-12"></view>
						<view class="order-card-container-background-main row">
							<view class="order-card-col row">
								<view class="order-card-left">
									<view class="left-background">
                    <image class="img" :src="pet.avatar" mode="aspectFill" />
                  </view>
								</view>
								<view class="order-card-right col row">
                  <view class="col">
                    <view class="name ">{{ pet.name }}</view>
                    <view class="old">{{ pet.age }}岁</view>
                  </view>
                  <view class="col">
                    <view class="type">{{ pet.type_name }}</view>
                    <view class="weight">{{ pet.weight }}kg</view>
                  </view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
    <view class="pet-detail-bottom-container">
      <view class="pet-detail-container">
        <view class="pet-detail-gun col">
          <image class="img" mode="heightFix" :src="staticImage.petGun"/>
        </view>
        <view class="pet-detail-content">
          <view class="content-item row">
            <view class="item-icon">
              <image class="img" mode="widthFix" :src="staticImage.petName"/>
            </view>
            <view class="item-title">
              宝贝名字：
            </view>
            <view class="item-content">
                {{ pet.name }}
            </view>
          </view>

          <view class="content-item row">
            <view class="item-icon">
              <image class="img" mode="widthFix" :src="staticImage.petType"/>
            </view>
            <view class="item-title">
              宝贝品种：
            </view>
            <view class="item-content">
                {{ pet.type_name }}
            </view>
          </view>

          <view class="content-item row">
            <view class="item-icon">
              <image class="img" mode="widthFix" :src="staticImage.petBirth"/>
            </view>
            <view class="item-title">
              出生日期：
            </view>
            <view class="item-content">
              {{ $u.timeFormat(pet.birthday, 'yyyy-mm-dd') }}
            </view>
          </view>

          <view class="content-item row">
            <view class="item-icon">
              <image class="img" mode="widthFix" :src="staticImage.petSex"/>
            </view>
            <view class="item-title">
              宝贝性别：
            </view>
            <view class="item-content">
                <span v-if="pet.sex === 1">弟弟</span>
                <span v-else-if="pet.sex === 2">妹妹</span>
                <span v-else>保密</span>
            </view>
          </view>

          <view class="content-item row" v-if="pet.type === 2">
            <view class="item-icon">
              <image class="img" mode="widthFix" :src="staticImage.petYm"/>
            </view>
            <view class="item-title">
              最近狂犬疫苗时间：
            </view>
            <view class="item-content">
                {{ $u.timeFormat(pet.last_vaccine_time, 'yyyy-mm') }}
            </view>
          </view>

          <view class="content-item row">
            <view class="item-icon">
              <image class="img" mode="widthFix" :src="staticImage.petQc"/>
            </view>
            <view class="item-title">
              最近驱虫时间
            </view>
            <view class="item-content">
              {{ $u.timeFormat(pet.last_insect_repellent_time, 'yyyy-mm') }}
            </view>
          </view>

          <view class="content-item row">
            <view class="item-icon">
              <image class="img" mode="widthFix" :src="staticImage.petHome"/>
            </view>
            <view class="item-title">
              宝贝户口（犬证）：
            </view>
            <view class="item-content">
              <span v-if="pet.is_home === 1">有</span>
              <span v-else>无</span>
            </view>
          </view>

          <view class="content-item row">
            <view class="item-icon">
              <image class="img" mode="widthFix" :src="staticImage.petBs"/>
            </view>
            <view class="item-title">
              过往病史：
            </view>
            <view class="item-content item-textarea">
                <span v-if="pet.remarks">{{ pet.remarks }}</span>
                <span v-else>无</span>
            </view>
          </view>

          <view class="content-item pet-detail-video-group">
            <view class="video-title">
              <image class="img" mode="heightFix" :src="staticImage.petVideoTitle"/>
            </view>
            <view class="video-content">
              <view class="video-content-container">
                  <video class="img" mode="aspectFill" :src="pet.video"></video>
              </view>
              <view class="video-content-background"></view>
            </view>
          </view>
          <view class="content-item pet-detail-photo-group" v-if="pet.images.length > 0">
            <view class="video-title">
              <image class="img" mode="heightFix" :src="staticImage.petPhotoTitle"/>
            </view>
            <view class="video-content row" >
              <view class="photo-item col-4" v-for="(item, index) in pet.images" >
                <view class="photo-item-container">
                  <view class="photo-content">
                    <image class="img" mode="widthFix" :src="item ? item : staticImage.wallpaperBgImage"/>
                  </view>
                  <view class="photo-background"></view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="pet-detail-background"></view>
      </view>
    </view>
	</view>
  <view class="footer-menu row">
    <view class="footer-button col-6">
      <MzButton
          title="删除"
          button-color="#ffffff"
          font-color="##262626"
          button-width="250rpx"
          @click="delPet()"
      >
      </MzButton>
    </view>
    <view class="footer-button col-6">
      <MzButton
          title="修改"
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="250rpx"
          @click="navTo('/pages/Pet/create?id='+id)"
      >
      </MzButton>
    </view>
  </view>
	<!-- <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 api from '@/utils/functions.js';
  import {delPet, getDetail} from "@/api/pet";
  import log from "@/utils/log";
  import functions from "@/utils/functions.js";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
				staticImage: {
					screenActiveImg: imghost + '/order-screen-active.png',
					orderCardBackground: imghost + '/order-card-background.png',
					wallpaperBgImage:imghost +'/background.png',
          petGun:imghost +'/pet_gun.png',
          petName:imghost +'/pet-detail-name.png',
          petType:imghost +'/pet-detail-type.png',
          petBirth:imghost +'/pet-detail-birthday.png',
          petSex:imghost +'/pet-detail-sex.png',
          petYm:imghost +'/pet-detail-ym.png',
          petQc:imghost +'/pet-detail-qc.png',
          petHome:imghost +'/pet-detail-home.png',
          petBs:imghost +'/pet-detail-bs.png',
          petVideoTitle:imghost +'/pet-detail-video-title.png',
          petPhotoTitle:imghost +'/pet-detail-photo-title.png',
				},
				indexBanner: [{
					image: imghost + '/banner.png',
					url: '',
				}],
				user: {
					avatar: imghost + '/banner.png',
					nickname: '清晨的风',
					coupons: 221,
					id: 88685
				},
				isTop: false,
				pagePadding: 100,
				petImage: imghost + '/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',
					},
				],
        pet:{},
        id:0,
			}
		},
		onLoad(option) {
        log(option);
        this.id = option.id;
        this.getDetail(option.id);
		},
		methods: {
      delPet(){
        functions.confirm("确认删除该宠物吗？").then(() => {
          delPet(this.id).then((res) => {
            functions.success('删除成功').then(() => uni.navigateBack())
          })
        })
      },
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
      getDetail(id){
        getDetail(id).then(data => {
            this.pet = data.data;
            log(data);
        })
      }
		},
		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))
		}
	}
</script>

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