<template>
	<view class="pet-page-container" :style="{width:buttonWidth}"  v-if="typeData === 'create'">
    <view class="pet-page-capsule-container row">
      <view class="pet-page-capsule col-4" v-for="(item,index) in petTypeList"
            :class="{active:(item.value === data.type)}" @click="selectPetType(item.value)">
        {{item.label}}
      </view>
    </view>
	</view>
  <view class="pet-page-group row" v-if="typeData === 'create'">
    <view class="order-item row">
      <view class="item-title">
        <text style="color: red;">*</text>宝贝姓名
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-input border="none" v-model="data.name" inputAlign="right" placeholder="请输入"></u-input>
        </view>
      </view>
    </view>

    <view class="order-item row">
      <view class="item-title">
        <text style="color: red;">*</text>宝贝品种
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-input border="none" v-model="data.type_name" inputAlign="right" placeholder="请输入"></u-input>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        <text style="color: red;">*</text> 宝贝体重(KG)
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <uv-number-box border="none" v-model="data.weight" :min="1" :max="1000"></uv-number-box>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝生日
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text
              suffix-icon="arrow-right"
              :text="data.birthday || '请选择'"
              size="28"
              color="#636363"
              icon-style="font-size:30"
              line-height="30"
              @click="$refs.birthdayPicker.open()"
          ></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝性别
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text
              suffix-icon="arrow-right"
              :text="data.sex_name || '请选择'"
              size="28"
              color="#636363"
              icon-style="font-size:30"
              line-height="30"
              @click="$refs.pickerSex.open()"
          ></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row" v-if="data.type === 2">
      <view class="item-title">
        最近狂犬疫苗时间
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text
              suffix-icon="arrow-right"
              :text="data.last_vaccine_time || '请选择'"
              size="28"
              color="#636363"
              icon-style="font-size:30"
              line-height="30"
              @click="$refs.vaccinePicker.open()"
          ></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        最近驱虫时间
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text
              suffix-icon="arrow-right"
              :text="data.last_insect_repellent_time || '请选择'"
              size="28"
              color="#636363"
              icon-style="font-size:30"
              line-height="30"
              @click="$refs.insectRepellentPicker.open()"
          ></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        是否有户口
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text
              suffix-icon="arrow-right"
              :text="data.is_home_name || '请选择'"
              size="28"
              color="#636363"
              icon-style="font-size:30"
              line-height="30"
              @click="$refs.pickerHome.open()"
          ></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        <text style="color: red;">*</text>健康状况
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text
              suffix-icon="arrow-right"
              :text="data.is_health_name || '请选择'"
              size="28"
              color="#636363"
              icon-style="font-size:30"
              line-height="30"
              @click="$refs.pickerHealth.open()"
          ></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title" style="padding-bottom:30rpx;">
        <text style="color: red;">*</text>过往病史 <text style="color: #999;font-size:26rpx;">(无请输入"无")</text>
      </view>
      <view class="item-content row">
        <view class="item-content-text row">
          <u-textarea
              placeholder="请输入"
              v-model="data.remarks"
              size="28"
              color="#636363"
              line-height="30"
              height="100"
              border="none"
          ></u-textarea>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title" style="padding-bottom:30rpx;">
        <text style="color: red;">*</text>攻击性行为 <text style="color: #999;font-size:26rpx;">(无请输入"无")</text>
      </view>
      <view class="item-content row">
        <view class="item-content-text row">
          <u-textarea
              placeholder="请输入"
              v-model="data.attack"
              size="28"
              color="#636363"
              line-height="30"
              height="100"
              border="none"
          ></u-textarea>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title" style="padding-bottom:30rpx;">
        其他
      </view>
      <view class="item-content row">
        <view class="item-content-text row">
          <u-textarea
              placeholder="请输入"
              v-model="data.other"
              size="28"
              color="#636363"
              line-height="30"
              height="100"
              border="none"
          ></u-textarea>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title" style="padding-bottom:30rpx;">
        宝贝头像
      </view>
      <view class="item-content row">
        <view class="item-content-text row">
          <uv-upload
              width="160rpx"
              height="160rpx"
              :fileList="avatarList"
              name="img"
              multiple
              :maxCount="1"
              :previewFullImage="true"
              uploadIcon="plus"
              @afterRead="afterAvatarRead"
              @delete="deleteAvatar"
          ></uv-upload>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title" style="padding-bottom:30rpx;">
        宝贝相册
      </view>
      <view class="item-content row">
        <view class="item-content-text row">
          <uv-upload
              width="160rpx"
              height="160rpx"
              :fileList="imagesList"
              name="img"
              multiple
              :maxCount="10"
              :previewFullImage="true"
              uploadIcon="plus"
              @afterRead="afterImgRead"
              @delete="deleteImg"
          ></uv-upload>
        </view>
      </view>
    </view>
<!--    <view class="order-item row">-->
<!--      <view class="item-title" style="padding-bottom:30rpx;">-->
<!--        宝贝背景图-->
<!--      </view>-->
<!--      <view class="item-content row">-->
<!--        <view class="item-content-text row">-->
<!--          <u-upload-->
<!--              width="160rpx"-->
<!--              height="160rpx"-->
<!--              :fileList="backgroundList"-->
<!--              name="img"-->
<!--              multiple-->
<!--              :maxCount="1"-->
<!--              :previewFullImage="true"-->
<!--              uploadIcon="plus"-->
<!--              @afterRead="afterBackgroundRead"-->
<!--              @delete="deleteBackground"-->
<!--          ></u-upload>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->

    <view class="order-item row">
      <view class="item-title" style="padding-bottom:30rpx;">
        宝贝视频
      </view>
      <view class="item-content row">
        <view class="item-content-text row">
          <uv-upload
              accept="video"
              width="160rpx"
              height="160rpx"
              :fileList="videoList"
              name="img"
              multiple
              :maxCount="1"
              :previewFullImage="true"
              uploadIcon="plus"
              @afterRead="afterVideoRead"
              @delete="deleteVideo"
          ></uv-upload>
        </view>
      </view>
    </view>
  </view>

  <view class="pet-list" v-if="typeData === 'lists'">
    <view class="order-screen-container row">
      <view class="order-list-container">
        <view class="order-list-item" v-for="(item,index) in petCheckList">
          <view
              @click="delPetCheck(index)"
              class="close-icon"
              style="position:absolute;right:0;top:0;z-index:2;background-color:#fff;border-radius: 50%;"
          >
            <u-image :src="staticImage.closeIcon" mode="widthFix" width="40" height="40"></u-image>
          </view>
          <view v-if="index!==0" 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="item.avatar" mode="aspectFill" />
                  </view>
                </view>
                <view class="order-card-right col row">
                  <view class="col">
                    <view class="name ">{{ item.name }}</view>
                    <view class="old">{{ item.age }}岁</view>
                  </view>
                  <view class="col">
                    <view class="type">{{ item.type_name }}</view>
                    <view class="weight">{{ item.weight }}kg</view>
                  </view>
                </view>

              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="pet-page-button row">
    <view class="col-6" style="justify-content: center;" v-if="typeData === 'lists'">
      <view class="" style="display: inline-block;">
        <MzButton
            title="选择萌宠"
            button-color="#FFFFFF"
            font-color="#262626"
            button-width="300rpx"
            class=""
            @click="openPet"
        >
        </MzButton>
      </view>
    </view>
    <view class="col-6" style="justify-content: center;" v-if="typeData === 'lists'">
      <view class="" style="display: inline-block;">
        <MzButton
            title="添加萌宠"
            button-color="#4DC3B8"
            font-color="#fff"
            button-width="300rpx"
            class=""
            @click="typeData = 'create'"
        >
        </MzButton>
      </view>
    </view>
    <view class="col-6" v-if="typeData === 'create' && showCancel">
      <MzButton
          title="取消"
          button-color="#FFFFFF"
          font-color="#262626"
          button-width="300rpx"
          class=""
          @click="typeData = 'lists'"
      >
      </MzButton>
    </view>
    <view class="col-6" v-if="typeData === 'create'">
      <MzButton
          title="保存"
          button-color="#4DC3B8"
          font-color="#fff"
          button-width="300rpx"
          class=""
          @click="submit"
      >
      </MzButton>
    </view>
  </view>
  <uv-datetime-picker
      :value="data.birthday"
      ref="birthdayPicker"
      mode="date"
      minDate="1970-01-01"
      @confirm="birthdayConfirm"
  ></uv-datetime-picker>
  <uv-datetime-picker
      :value="data.last_vaccine_time"
      ref="vaccinePicker"
      mode="year-month"
      minDate="2000-01-01"
      @confirm="vaccineConfirm"
  ></uv-datetime-picker>
  <uv-datetime-picker
      :value="data.last_insect_repellent_time"
      ref="insectRepellentPicker"
      mode="year-month"
      minDate="2000-01-01"
      @confirm="insectRepellentConfirm"
  ></uv-datetime-picker>
  <uv-picker :columns="[homeList]" ref="pickerHome" key-name="name" title="是否有户口" round="20rpx" @confirm="homeSelect"></uv-picker>
  <uv-picker :columns="[homeList]" ref="pickerHealth" key-name="name" title="是否健康" round="20rpx" @confirm="healthSelect"></uv-picker>
  <uv-picker :columns="[sexList]" ref="pickerSex" key-name="name" title="宝贝性别" round="20rpx" @confirm="sexSelect"></uv-picker>
  <uv-popup ref="popup" style="position: relative;" :is-mask-click="false" round="20" mode="bottom" closeable safe-area-inset-bottom safe-area-inset-top>
    <view class="pet-list" style="padding:30rpx;max-height:50vh;overflow: auto;">
      <view class="order-screen-container row">
        <view class="order-list-container">
          <view class="order-list-item" v-for="(item,index) in petList" @click="">
            <view v-show="index!==0" 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="item.avatar" mode="aspectFill" />
                    </view>
                  </view>
                  <view class="order-card-right col row">
                    <view class="col">
                      <view class="name ">{{ item.name }}</view>
                      <view class="old">{{ item.age }}岁</view>
                    </view>
                    <view class="col">
                      <view class="type">{{ item.type_name }}</view>
                      <view class="weight">{{ item.weight }}kg</view>
                    </view>
                  </view>

                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" fontSize="28"
                  color="#ACB4B6"
                  line
                  line-color="#ACB4B6"
                  marginBottom="30" marginTop="30" @loadmore="getMyPets()"/>

    </view>
    <view class="pop-service-container">
      <u-cell-group custom-style="max-height:700rpx;overflow:auto;">
        <u-cell
            size="large"
            :title="item.name"
            isLink
            right-icon=""
            v-for="(item,index) in addServiceList"
            @click="selectAddService(index)"
        >
          <template #value>
            <view class="">
              <view class="" style="display:flex;align-items: center">
                <view class="">
                  <u-text :text="parseFloat(item.price)+'元'" size="32" style="white-space: nowrap;" line-height="32"></u-text>
                </view>
                <view class="">
                  <u-checkbox-group>
                    <u-checkbox
                        :customStyle="{marginBottom: '0',marginTop: '0',marginLeft:'15rpx'}"
                        size="32"
                        :checked="item.checked"
                        activeColor="#4DC3B8"
                        iconSize="30"
                    >
                    </u-checkbox>
                  </u-checkbox-group>
                </view>
              </view>
            </view>
          </template>
        </u-cell>
      </u-cell-group>
      <view class="row" style="padding-top:30rpx;">
        <view class="col-6" style="padding:0 30rpx;">
          <MzButton title="取消" @click="$refs.popup.close()"></MzButton>
        </view>
        <view class="col-6" style="padding:0 30rpx;">
          <MzButton title="确认" @click="addServiceConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton>
        </view>
      </view>
    </view>
  </uv-popup>

  <uv-popup ref="petPopup" mode="bottom" round="20" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
    <view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
      <view class="value col" style="position: relative;text-align: center;">

        <!--        <u-text text="协议内容" size="38" color="#191919"></u-text>-->
        <view class="" style="position: relative;display:inline-block;">
          <view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">选择宠物</view>
          <view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
        </view>
      </view>
    </view>
    <view class="pop-service-container" style="min-height:500rpx;position:relative;">
      <view class="" style="width:100%;padding-bottom:114rpx;">
        <u-cell-group custom-style="max-height:700rpx;overflow:auto;" v-if="petList.length>0">
          <u-cell
              size="large"
              :title="item.name"
              isLink
              right-icon=""
              v-for="(item,index) in petList"
          >
            <template #value>
              <view class="" @click="selectPet(index)">
                <view class="" style="display:flex;align-items: center">
                  <view class="">
                    <u-text :text="parseFloat(item.weight)+'KG'" size="32" style="white-space: nowrap;" line-height="32"></u-text>
                  </view>
                  <view class="">
                    <u-checkbox-group @change="petCheckChange">
                      <u-checkbox
                          :name="index"
                          :customStyle="{marginBottom: '0',marginTop: '0',marginLeft:'15rpx'}"
                          size="32"
                          :checked="item.checked"
                          activeColor="#4DC3B8"
                          iconSize="30"
                      >
                      </u-checkbox>
                    </u-checkbox-group>
                  </view>
                </view>
              </view>
            </template>
            <template #title>
              <u-text size="32" :text="item.name" @click="selectPet(index)"></u-text>
            </template>
            <template #label>
              <u-text :text="item.type_name" size="28" @click="selectPet(index)"></u-text>
              <view style="display: inline-block;">
                <u-text text="编辑资料" size="28" color="#4DC3B8" suffix-icon="arrow-right" icon-style="font-size:28rpx;color:#4DC3B8;" @click="api.navTo('/pages/Pet/create?id='+item.id)"></u-text>
              </view>
            </template>
          </u-cell>
        </u-cell-group>
        <u-cell-group custom-style="max-height:700rpx;overflow:auto;" v-else>
          <u-cell
              size="large"
              title="暂无宠物"
          >
          </u-cell>
        </u-cell-group>
      </view>
      <view class="row" style="position:absolute;bottom:0;width:100%;padding-top:30rpx;" v-if="petList.length>0">
        <view class="col-6" style="padding:0 30rpx;'">
          <MzButton title="取消" @click="$refs.petPopup.close()"></MzButton>
        </view>
        <view class="col-6" style="padding:0 30rpx;">
          <MzButton title="确认" @click="addServiceConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton>
        </view>
      </view>
    </view>
  </uv-popup>
</template>

<script>
	import { imghost } from '@/config/host.js';
  import MzButton from "@/components/MzButton/Index.vue";
  import {editPet, getDetail, getMyPets} from "@/api/pet";
  import {getSTS} from "@/api/other";
  import api from "@/utils/functions";

  export default{
		name:'PetPage',
    computed: {
      api() {
        return api
      },
    },
		props:{
			title:{
				type:String,
				default:'确认'
			},
			buttonColor:{
				type:String,
				default:'#FFFFFF'
			},
			fontColor:{
				type:String,
				default:'#131313'
			},
			buttonWidth:{
				type:String,
				default:'100%'
			},
			isBackground:{
				type:Boolean,
				default:true
			},
			fontSize:{
				type:String,
				default:'30rpx',
			},
			paddingTb:{
				type:String,
				default:'15rpx',
			},
			btnStyle:{
				type:Object,
				default:{},
			},
			type:{
				type:String,
				default:'create',
			},
			showCancel:{
				type:Boolean,
				default:false,
			},
      autoBack:{
				type:Boolean,
				default:true,
			},
      petId:{
				type:Number,
				default:0,
			},
		},
    components:{
      MzButton
    },
		data() {
			return {
        typeData: this.type,
        petList:[],
        petCheckList:[],
        status:'loadmore',
				loading: true,
				buttonBackground:imghost+"/small-button-background.png",
				staticImage:{
          closeIcon:imghost + '/close-icon.png',
					buttonBackground:imghost+'/small-button-background.png'
				},
        homeList:[
          {name:'是',value:1},
          {name:'否',value:0},
        ],
        sexList:[
          {name:'未知',value:0},
          {name:'弟弟',value:1},
          {name:'妹妹',value:2},
          {name:'其他',value:9},
        ],
        petTypeList:[
          {
            label:'喵喵',
            value:1,
          },{
            label:'汪汪',
            value:2,
          },{
            label:'其他萌宠',
            value:3,
          },
        ],
        data:{
          type:1,
          remarks :'',
          weight:1,
          sex_name:'未知',
          sex:0,
          is_home:0,
          is_home_name:'否',
          is_health:0,
          is_health_name:'否',
          birthday:'',
          last_vaccine_time:'',
          last_insect_repellent_time:'',
          avatar:'',
          video:'',
          images:'',
          background_image:'',
          other:'',
          attack:'',
        },
        videoList:[],
        imagesList:[],
        backgroundList:[],
        avatarList:[],
			}
		},
    mounted() {
      this.data.birthday = uni.$u.timeFormat(null,'yyyy-mm-dd');
      // this.data.last_insect_repellent_time = this.data.last_vaccine_time = uni.$u.timeFormat(null,'yyyy-mm');
      if(this.petId!==0){
        this.getDetail(this.petId)
      }
      if(this.typeData === 'lists'){
        this.getMyPets()
      }
    },
		methods: {
      api() {
        return api
      },
      closePop(){
        this.$refs.petPopup.close();
      },
      openPet(){
        this.status = 'loadmore';
        this.getMyPets();
        this.$refs.petPopup.open()
      },
      petCheckChange(e){
        console.log(e)
        this.petList[e].checked = !this.petList[e].checked;
      },
      delPetCheck(index){
        this.petCheckList.splice(index,0);
        this.$emit('del',index)
      },
      selectPet(index){
        this.petList[index].checked = !this.petList[index].checked;
      },
      addServiceConfirm(){
        let list = [];
        this.petList.map(item => {
          if(item.checked){
            list.push(item);
          }
        })
        this.petCheckList = list;
        this.$refs.petPopup.close();
        this.$emit('change',this.petCheckList)
      },
      getMyPets(page = 1){
        if (this.status === 'nomore') {
          return;
        }
        this.status = 'loading';
        uni.showLoading('加载中');
        getMyPets(page).then(data => {
          if (page === 1){
            this.petList = data.data.map(item => {
              item.checked = false;
              return item;
            });
          }else{
            this.petList.push.apply(this.petList,data.data);
          }
          if (data.data.length < 10) {
            this.status = 'nomore';
          }
          uni.hideLoading();
        });
      },
      getDetail(id){
        getDetail(id).then(res => {
          this.data = res.data;
          this.data.birthday =  uni.$u.timeFormat(this.data.birthday,'yyyy-mm-dd');
          this.data.last_vaccine_time = this.data.last_vaccine_time ? uni.$u.timeFormat(this.data.last_vaccine_time,'yyyy-mm'):'';
          this.data.last_insect_repellent_time = this.data.last_insect_repellent_time?uni.$u.timeFormat(this.data.last_insect_repellent_time,'yyyy-mm'):'';
          this.sexList.forEach(res=>{
            if(res.value===this.data.sex){
              this.data.sex_name = res.name;
            }
          });
          this.homeList.forEach(res=>{
            if(res.value===this.data.is_home){
              this.data.is_home_name = res.name;
            }
            if(res.value===this.data.is_health){
              this.data.is_health_name = res.name;
            }
          });
          this.avatarList = res.data.avatar && res.data.avatar.split(',').map(item => {
            return {url:item};
          });

          if((res.data.images && res.data.images.length > 0)){
            this.imagesList =  res.data.images.map(item => {
              return {url:item};
            });
          }

          this.videoList = res.data.video && res.data.video.split(',').map(item => {
            return {url:item};
          });
          this.backgroundList = res.data.background_image && res.data.background_image.split(',').map(item => {
            return {url:item};
          });
        })
      },
      async afterImgRead  (event){
        let lists = [].concat(event.file);

        let fileListLen = this.imagesList.length;
        lists.map((item) => {
          this.imagesList.push({
            ...item,
            status: 'uploading',
            message: '上传中',
          });
        });
        for (let i = 0; i < lists.length; i++) {

          api.uploadOssFile(lists[i].url).then(res => {
            let item = this.imagesList[fileListLen];
            this.imagesList.splice(fileListLen, 1, {
              ...item,
              status: 'success',
              message: '',
              url: res.show_path,
              thumb: res.show_path,
            });
            fileListLen++;
          })
        }
      },
      async afterVideoRead  (event){
        let lists = [].concat(event.file);

        let fileListLen = this.videoList.length;
        lists.map((item) => {
          this.videoList.push({
            ...item,
            status: 'uploading',
            message: '上传中',
          });
        });
        for (let i = 0; i < lists.length; i++) {

          api.uploadOssFile(lists[i].url).then(res => {
            let item = this.videoList[fileListLen];
            this.videoList.splice(fileListLen, 1, {
              ...item,
              status: 'success',
              message: '',
              url: res.show_path,
              thumb: res.show_path,
            });
            fileListLen++;
          })
        }
      },
      async afterAvatarRead  (event){
        let lists = [].concat(event.file);

        let fileListLen = this.avatarList.length;
        lists.map((item) => {
          this.avatarList.push({
            ...item,
            status: 'uploading',
            message: '上传中',
          });
        });
        for (let i = 0; i < lists.length; i++) {

          api.uploadOssFile(lists[i].url).then(res => {
            let item = this.avatarList[fileListLen];
            this.avatarList.splice(fileListLen, 1, {
              ...item,
              status: 'success',
              message: '',
              url: res.show_path,
              thumb: res.show_path,
            });
            fileListLen++;
          })
        }
      },
      async afterBackgroundRead  (event){
        let lists = [].concat(event.file);

        let fileListLen = this.backgroundList.length;
        lists.map((item) => {
          this.backgroundList.push({
            ...item,
            status: 'uploading',
            message: '上传中',
          });
        });
        for (let i = 0; i < lists.length; i++) {

          api.uploadOssFile(lists[i].url).then(res => {
            let item = this.backgroundList[fileListLen];
            this.backgroundList.splice(fileListLen, 1, {
              ...item,
              status: 'success',
              message: '',
              url: res.show_path,
              thumb: res.show_path,
            });
            fileListLen++;
          })
        }
      },
      deleteImg(event){
        this.imagesList.splice(event.index, 1);
      },
      deleteVideo(event){
        this.videoList.splice(event.index, 1);
      },
      deleteAvatar(event){
        this.avatarList.splice(event.index, 1);
      },
      deleteBackground(event){
        this.backgroundList.splice(event.index, 1);
      },
      homeSelect(e){
        this.data.is_home_name = e.value[0].name;
        this.data.is_home = e.value[0].value;
      },
      healthSelect(e){
        this.data.is_health_name = e.value[0].name;
        this.data.is_health = e.value[0].value;
      },
      sexSelect(e){
        this.data.sex_name = e.value[0].name;
        this.data.sex = e.value[0].value;
      },
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        }
        if (type === 'month') {
          return `${value}月`
        }
        if (type === 'day') {
          return `${value}日`
        }
        return value
      },
      birthdayConfirm(e){
        this.data.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
      },
      vaccineConfirm(e){
        this.data.last_vaccine_time = uni.$u.timeFormat(e.value, 'yyyy-mm');
      },
      insectRepellentConfirm(e){
        this.data.last_insect_repellent_time = uni.$u.timeFormat(e.value, 'yyyy-mm');
      },
      selectPetType(value){
        this.data.type = value;
      },
      submit(){
        this.data.avatar = this.avatarList.map(item => {
          return item.url;
        }).join(',');
        this.data.video = this.videoList.map(item => {
          return item.url;
        }).join(',');
        this.data.background_image = this.backgroundList.map(item => {
          return item.url;
        }).join(',');
        this.data.images = this.imagesList.map(item => {
          return item.url;
        }).join(',');
        editPet(this.data).then(res => {
          api.success('添加成功');
          if(this.autoBack){
            uni.navigateBack();
          }else{
            this.typeData = 'lists';
            this.getMyPets();
          }
        })
      }
		}
	}
</script>

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