<template>
  <HeaderNav title="付款权益卡" :is-back="true"></HeaderNav>
  <view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
  <view class="app-wallpaper">
    <view class="detail-box-container">
      <view class="detail-box-top">
        <view class="card-padding">
          <view class="card-container row" :style="{backgroundImage:'url('+staticImage.cardDetailCard+')'}">
            <view class="card-container-background col-12"></view>
            <view class="card-container-background-main row">
              <view class="card-col row">

                <view class="card-right">
                  <view class="card-title">{{ cardDetail.title }}</view>
                  <view class="card-desc-container">
                    <view class="card-desc">
                      <view class="card-desc-text">{{ cardDetail.profile }}</view>
                      <view class="card-desc-background"></view>
                    </view>
                  </view>
                  <view class="card-content-container row">
                    <view class="card-avatar">
                      <image class="img" mode="aspectFit" :src="staticImage.dogImage"/>
                    </view>
                    <view class="card-content">
                      <view class="card-content-top">
                        {{ cardDetail.illustrate }}
                      </view>
                      <view class="card-content-bottom">
                        {{ cardDetail.que_illustrate }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="top-shadow">

        </view>
      </view>
      <view class="detail-box-bottom">
        <view class="coupons-list">
          <view class="coupons-item-container" :style="{
					backgroundImage:'url('+(staticImage.couponsBackground)+')'
					}">
            <view class="coupons-item row">
              <view class="coupons-left ">
                <view class="coupons-big-title-group row">
                  <view class="coupons-big-title">{{ cardDetail.deduction }}</view>
                  <view class="coupons-big-desc">元</view>
                </view>
                <view class="coupons-cause">
                  {{ cardDetail.min_price }}
                </view>
              </view>
              <view class="coupons-right col row">
                <view class=" row">
                  <view class="coupons-title-group col-12 row">
                    <view class="coupons-title">
                      {{ cardDetail.coupons_title }}
                    </view>
                    <view class="coupons-btn">
                      {{ cardDetail.coupons_number }}张
                    </view>
                  </view>
                  <view class="coupons-desc col-12">满{{ cardDetail.min_price }}元使用仅限线上预约下单使用</view>
                </view>
                <view class="coupons-gq ">
                  <image class="img" :src="staticImage.couponsGQ" mode="aspectFill"/>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="footer-menu row">
    <view class="foot-menu-checkbox-group row col">
      <view class="foot-menu-checkbox">
        <u-checkbox
            shape="circle"
            size="28"
            custom-style="margin-top:0;margin-bottom:0;"
            icon-size="24"
            active-color="#4DC3B8"
            :checked="readInfo"
            @change="readInfo = !readInfo"
        ></u-checkbox>
      </view>
      <view class="foot-menu-title">
        <text @click="readInfo = !readInfo">我已阅读并同意</text>
        <text class="foot-menu-url" @click="showAgreement">《付费权益卡协议》</text>
      </view>
    </view>
    <view>
      <MzButton
          title="立即购买"
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="200rpx"
          @click="readInfo ? $refs.confirmPOP.open() :$u.toast('请先同意协议')"
      >
      </MzButton>
    </view>
  </view>
  <uv-popup ref="agreement" mode="bottom" round="20rpx" 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 style="padding:30rpx;max-height:700rpx;overflow: auto;">
      <u-parse :content="PayCardPolicy"></u-parse>
    </view>
  </uv-popup>
  <uv-popup ref="confirmPOP" mode="bottom" round="20rpx" 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 style="max-height:750rpx;overflow: auto;">
      <!--      <u-parse :content="PayCardPolicy"></u-parse>-->
      <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">
                <u-image mode="widthFix" width="85" height="85" class="img" :src="staticImage.addrAvatar"></u-image>
              </view>
              <view class="main-content">
                <u-image mode="heightFix" class="img" :src="staticImage.addrFw" height="35rpx"></u-image>
                <view class="main-content-text" style="max-width:300rpx;">
                  <u-text :text="address.info || '请选择地址'" color="#131313" size="30"></u-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">
                    <u-image mode="widthFix" class="img" :src="staticImage.addrBook" width="45" height="45"
                             custom-style="margin:auto;"></u-image>
                  </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="coupons-list">
        <view class="coupons-item-container" :style="{
					backgroundImage:'url('+(staticImage.couponsBackground)+')'
					}">
          <view class="coupons-item row">
            <view class="coupons-left ">
              <view class="coupons-big-title-group row">
                <view class="coupons-big-title">{{ cardDetail.deduction }}</view>
                <view class="coupons-big-desc">元</view>
              </view>
              <view class="coupons-cause">
                {{ cardDetail.min_price }}
              </view>
            </view>
            <view class="coupons-right col row">
              <view class=" row">
                <view class="coupons-title-group col-12 row">
                  <view class="coupons-title">
                    {{ cardDetail.coupons_title }}
                  </view>
                  <view class="coupons-btn">
                    {{ cardDetail.coupons_number }}张
                  </view>
                </view>
                <view class="coupons-desc col-12">满{{ cardDetail.min_price }}元使用仅限线上预约下单使用</view>
              </view>
              <view class="coupons-gq ">
                <image class="img" :src="staticImage.couponsGQ" mode="aspectFill"/>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="" style="padding: 0 50rpx 50rpx;">
        <PetPage class="pet-page" :showCancel="true" type="lists" @change="selectPet" @del="delPet"></PetPage>
      </view>
      <view class="" style="padding:30rpx;">
        <MzButton
            @click="cardPay()"
            title="立即购买"
            button-color="#4DC3B8"
            font-color="#fff"
            button-width="100%"
            class=""></MzButton>
      </view>
    </view>
  </uv-popup>
  <!-- <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 {cardDetail} from "../../api/card";
import {cardOrder} from "@/api/order";
import {getConfig} from "@/api/other";
import image from "@/config/image";
import PetPage from "@/components/PetPage/Index.vue";
import {getAddressList} from "@/api/address";
import log from "@/utils/log";

export default {
  components: {
    PetPage,
    HeaderNav,
    FooterNav,
    RightNav,
    MzButton
  },
  data() {
    return {
      id: '',
      title: 'Hello',
      loading: true,
      readInfo: false,
      staticImage: {
        screenActiveImg: imghost + '/screen-active.png',
        cardBackground: imghost + '/order-card-background.png',
        wallpaperBgImage: imghost + '/card-detail-background.png',
        dogImage: imghost + '/index-user-title-dog.png',
        cardDetailCard: imghost + '/card-detail-card.png',
        couponsBackground: imghost + '/card-detail-coupons.png',
        ...image.OrderPage
      },
      indexBanner: [{
        image: imghost + '/banner.png',
        url: '',
      }],
      user: {
        avatar: imghost + '/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685
      },
      isTop: false,

      petImage: imghost + '/pet_avatar1.jpeg',
      cardDetail: {},
      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,
      }],
      PayCardPolicy: '',
      address: {},
      petChecked: [],
    }
  },
  onLoad(options) {
    this.id = options.id;
    this.getCardDetail();
    // this.$refs.address.open();
  },
  methods: {
    selectPet(petList) {
      this.petChecked = petList;
    },
    delPet(index) {
      this.petChecked.splice(index, 1);
    },
    showAgreement() {
      getConfig('PayCardPolicy').then(res => {
        this.PayCardPolicy = res.data.PayCardPolicy;
      })
      this.$refs.agreement.open();
    },
    cardPay() {
      if (!this.address.id) {
        api.error('请选择地址');
        return;
      }
      if(this.petChecked.length === 0){
        api.error('请选择宠物');
        return;
      }
      let petIds = this.petChecked.map((item) => {
        return item.id;
      }).join(',');
      log(this.petChecked)
      cardOrder({
        address_id:this.address.id,
        card_id:this.id,
        pet_ids:petIds,
        // order_type:this.cardDetail.type
      }).then(data => {
        api.payment(data.data).then(res => {
          // api.success('支付成功');
          uni.redirectTo({url: '/pages/Order/done?type=card'});
        }).catch(err => {
          api.error('支付失败')
        })
      });
    },
    getCardDetail() {
      cardDetail({
        id: this.id
      }).then((res) => {
        this.cardDetail = res.data
      })
    },
    navTo(url){
      uni.navigateTo({
        url:url
      })
    },
    getDefaultAddress() {
      let cacheAddress = uni.getStorageSync('address');
      if (cacheAddress) {
        this.address = cacheAddress;
      } else {
        getAddressList(this.pages).then(res => {
          res.data.forEach(item => {
            if (item.is_default === 1) {
              this.address = item;
            }
          });
        })
      }
    },
  },
  onShow() {
    this.getDefaultAddress();
  },
  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>