<template>
  <HeaderNav title="喂养档案" :is-back="true"></HeaderNav>
	<view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">
    <view class="feed-top">
      <view class="feed-container">
        <view class="feed-content">
          <view class="top-img">
            <image class="img" mode="widthFix" :src="staticImage.banner"/>
          </view>
          <view class="top-content row">
            <view class="content-item col-6 row">
              <view class="item-title">爱称：</view>
              <view class="item-content">靓仔</view>
            </view>
            <view class="content-item  col-6 row">
              <view class="item-title">性别：</view>
              <view class="item-content">弟弟</view>
            </view>
            <view class="content-item  col-6 row">
              <view class="item-title">体重：</view>
              <view class="item-content">5kg</view>
            </view>
            <view class="content-item  col-6 row">
              <view class="item-title">种类：</view>
              <view class="item-content">柯基</view>
            </view>
          </view>
        </view>
        <view class="feed-background">
          <view class="feed-background-content"></view>
        </view>
      </view>
    </view>
    <view class="feed-bottom">
      <view class="feed-container">
        <view class="feed-gun">
          <image class="img" mode="heightFix" :src="staticImage.feedGun" />
        </view>
        <view class="feed-content">
          <u-collapse>
            <u-collapse-item
                title="水碗饭碗"
            >
              <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
              <u-upload
                  name="1"
                  multiple
                  :maxCount="10"
              >
                <image :src="staticImage.feedUpload"
                       mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="主食情况"
            >
              <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
              <u-upload
                  name="1"
                  multiple
                  :maxCount="10"
              >
                <image :src="staticImage.feedUpload"
                       mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="零食小吃"
            >
              <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
              <u-upload
                  name="1"
                  multiple
                  :maxCount="10"
              >
                <image :src="staticImage.feedUpload"
                       mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="喂药擦药"
            >
              <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
              <u-upload
                  name="1"
                  multiple
                  :maxCount="10"
              >
                <image :src="staticImage.feedUpload"
                       mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="需要注意"
            >
              <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
              <u-upload
                  name="1"
                  multiple
                  :maxCount="10"
              >
                <image :src="staticImage.feedUpload"
                       mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="用品位置"
            >
              <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
              <u-upload
                  name="1"
                  multiple
                  :maxCount="10"
              >
                <image :src="staticImage.feedUpload"
                       mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="外出路线"
            >
              <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
              <u-upload
                  name="1"
                  multiple
                  :maxCount="10"
              >
                <image :src="staticImage.feedUpload"
                       mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="其它事项"
            >
              <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
              <u-upload
                  name="1"
                  multiple
                  :maxCount="10"
              >
                <image :src="staticImage.feedUpload"
                       mode="widthFix" style="width: 130rpx;height: 130rpx;"></image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
        </view>
        <view class="feed-background">
          <view class="feed-background-content"></view>
        </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"
      >
      </MzButton>
    </view>
    <view class="footer-button col-6">
      <MzButton
          title="修改"
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="250rpx"
      >
      </MzButton>
    </view>
  </view>
</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 {feedLog} from "@/api/pet";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
				staticImage: {
					screenActiveImg: imghost + '/static/image/order-screen-active.png',
					orderCardBackground: imghost + '/static/image/order-card-background.png',
					wallpaperBgImage:imghost +'/static/image/background.png',
          petGun:imghost +'/static/image/pet_gun.png',
          feedGun:imghost +'/static/image/feed-gun.png',
          addPet:imghost +'/static/image/add-pet.png',
          banner:imghost +'/static/image/banner.png',
          feedUpload:imghost +'/static/image/feed-upload.png',
            detail:{},
				},
			}
		},
		onLoad(options) {
      this.feedLog(options.pet_id)
		},
		methods: {
      navTo(url){
        wx.navigateTo({
          url:url
        })
      },
        feedLog(pet_id){
            feedLog(pet_id).then(data => {
                this.detail = data.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>