<template>
  <div class="container index-page">
    <div class="header">
      <img class="logo" src="/static/img/logo.png" alt="">
      <div class="header-ads">
        养出色，爱生活
      </div>
    </div>
    <view>
      <Swiper :banners="banner" />
    </view>
    <!-- 热门活动 -->
    <div class="meal-title"><div><span></span>热门活动</div></div>
    <ul class="meal-panel">
      <li class="meal-items" v-for="item in items" :key="item.id" @click="toDetail(item)">
        <div class="item-left">
          <div class="item-title">
            <span>{{item.name}}</span><span class="tag" v-if="item.tag && item.tag.length > 0">{{item.tag}}</span>
          </div>
        </div>
        <img class="item-right-img" :src="item.icon" alt="">
      </li>
    </ul>
    <!-- 我的订单 -->
    <div class="meal-title"><div><span></span>我的订单</div><div class="mores" @click="toViewOrder">查看更多<van-icon name="arrow" /></div></div>
    <scroll-view scroll-y v-if="isLogin" class="content">
      <order-card v-for="item in orderList" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
      <no-data :options="orderList" name="暂无订单"/>
    </scroll-view>
    <div class="noLogin" v-else>
      <div>请登录后查看您的订单</div>
      <div>
        <span @click="toLogin">立即登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getIndexData, getRollAd } from '@/api/api';
import { customerBundleList } from '@/api/bundle';
import { checkLogin } from '@/api/login';
import NoData from '@/components/NoData';
import OrderCard from '@/components/OrderCard';
import Swiper from '@/components/swiper';
import RollAD from '@/components/RollAD';
import storage from '@/utils/storage.js'

export default {
  components: { Swiper, 'roll-ad': RollAD , 'order-card': OrderCard, 'no-data': NoData},
  name: 'indexPage',
  data() {
    return {
      ad: {},
      items: [],
      banner: [],
      orderList: [],
      isLogin: false
    };
  },
  methods: {
    getOrderList() {
      const _this = this;
      customerBundleList({}).then(res => {
        if (res.status === '200') {
          _this.orderList = []
          res.data.map((item, index) => {
            if(index < 5){
              _this.orderList.push(item)
            }
          })
        } else {
          wx.showToast({
            title: res.message,
            icon: 'none',
            duration: 2500
          });
        }
        wx.hideLoading();
      });
    },
    toDetail(item) {
      console.log(item)
      let url = item.redirectPath + '?title=' + item.name
      let type = item.redirectType
      if(!item.redirectPath){
        return false
      }
      if (type === 'tab_bar') {
        // 小程序 tab 页
        wx.reLaunch({ url });
      } else if( type == 'bund_page' || type == 'tpl_page' || type == 'inner_page'){
        console.log(getCurrentPages(),'getCurrentPages()')
        // 小程序内页
        wx.navigateTo({ url });
      }else if(type == 'web_view'){
        // webview
        wx.navigateTo({
          url: '/pages/h5Page/main?src='+url
        })
      }
    },
    // 版本检测
    checekAppUpdate(){
    	const updateManager = wx.getUpdateManager();
    	updateManager.onCheckForUpdate(function (res) {
    	  // 请求完新版本信息的回调
    	  console.log(res.hasUpdate);
    	});
    	updateManager.onUpdateReady(function (res) {
    	  wx.showModal({
    	    title: '更新提示',
    	    content: '新版本已经准备好，是否重启应用？',
    	    success(res) {
    	      if (res.confirm) {
    	        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
    	        updateManager.applyUpdate();
              // 清空缓存
              storage.clear();
    	      }
    	    }
    	  });

    	});
    	updateManager.onUpdateFailed(function (res) {
    	  // 新的版本下载失败
    	});
    },
    setIndexData(data){
      this.banner = data.filter(item => item.type.toLocaleUpperCase() === 'BANNER');
      this.items = data.filter(item => item.type.toLocaleUpperCase() === 'LIST');
      wx.hideLoading();
    },
    getHd(){
      wx.showLoading({
        mask: true,
        title: '加载中'
      });
       getIndexData().then(res => {
         console.log(res,'---')
         if (res.status === '200') {
           // 设置首页数据
           this.setIndexData(res.data)
         }
       });
    },
    checkLogin(){
      checkLogin().then(res => {
        if (res.status === '200') {
          this.getOrderList()
          this.isLogin = true
        } else {
          this.isLogin = false
        }
      });
    },
    toLogin(){
      wx.navigateTo({
        url: '/pages/login/main'
      });
    },
    toViewOrder(){
      wx.navigateTo({
        url: '/pages/order/main'
      });
    }
  },
  onLoad() {
    this.checekAppUpdate()
  },
  onShow() {
    this.checkLogin()
    this.getHd()
    wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
    });
  },
  onShareAppMessage(res) {
    console.log(res)
  },
  onShareTimeline(res) {
    console.log(res)
  }
};
</script>

<style lang="stylus" scoped>
.container {
}

.index-page {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;

  .header {
    padding: 20rpx;
    display: flex;
    align-items : center;
  }

  .header-ads {
    font-size: 26rpx;
    padding : 0 20rpx;
  }

  .logo {
    height: 90rpx;
    width: 90rpx;
  }
  .meal-title{
    padding: 15rpx 30rpx 15rpx 20rpx;
    background : #f8f8f8;
    margin-top : 20rpx;
    font-size : 34rpx;
    display: flex;
    align-items: center;
    justify-content : space-between;
    > div{
      &:first-child{
        display: flex;
        align-items: center;
        span{
          border-left : 3px solid #ff8811;
          height : 1em;
          display : block;
          padding-left : 10rpx;
        }
      }
    }
    .mores{
      font-size : 24rpx;
      color : #00aaff;
      display : flex;
      align-items : center;
    }
  }
  .meal-panel {
    padding: 0 30rpx;
    font-size: 32rpx;
  }

  .meal-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
  }

  .meal-items + .meal-items {
    border-top: 1px solid #f8f8f8;
  }

  .item-title {
    display: flex;
    align-items: center;
    font-size: 34rpx;
  }

  .item-title .tag {
    display: inline-block;
    margin-left: 5px;
    background-color: #ff8811;
    border-radius: 30px;
    font-size: 20rpx;
    color: #fff;
    padding: 0 5px 2px 5px;
  }

  .item-right-img {
    border: 1px solid #e9eaec;
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
  }

  .noLogin{
    font-size : 28rpx;
    text-align : center;
    padding: 30rpx;
    > div{
      padding : 10rpx 0;
    }
    span{
      width : 40%;
      padding : 15rpx;
      border: 1px solid #eee;
      border-radius : 6rpx;
      display : inline-block;
    }
  }
}
</style>
