<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-05-28 17:51:23
 * @FilePath: /meihuaApp/src/pages/index/index.vue
 * @Description: 首页
-->
<template>
  <view class="index-page">
    <scroll-view :style="scrollStyle" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="onScroll" @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower">
      <view class="index-cover">
        <view style="position: absolute; left: 2rem; top: 1.5rem;">
          <image mode="aspectFill" src="http://cdn.ipadbiz.cn/meihua/logo1.png" style="width: 4.2rem; height: 6rem;" />
        </view>
        <view style="position: absolute; right: 2rem; top: 1.5rem; display: flex;">
          <view @tap="onShowNotice(3)" style="">
            <image mode="aspectFill" src="http://cdn.ipadbiz.cn/meihua/%E8%AE%BE%E6%96%BD3.png" style="width: 1.55rem; height: 5.2rem;" />
          </view>
          <view @tap="onShowNotice(2)" style="margin: 0 1.25rem;">
            <image mode="aspectFill" src="http://cdn.ipadbiz.cn/meihua/%E5%85%A5%E4%BD%8F3.png" style="width: 1.6rem; height: 5.2rem;" />
          </view>
          <view @tap="onShowNotice(1)" style="">
            <image mode="aspectFill" src="http://cdn.ipadbiz.cn/meihua/%E6%8E%A0%E5%BD%B13.png" style="width: 1.55rem; height: 5.2rem;" />
          </view>
        </view>
        <image :style="coverStyle" mode="aspectFill" :src="banner_url" />
        <view @tap="onArrowDown" class="cover-arrow">
          <IconFont color="#f9f9f9" size="30" name="joy-smile" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
        </view>
      </view>
      <view class="index-title">热门推荐</view>
      <view class="index-list">
        <room-card v-for="(item, index) in room_list" :key="index" :data="item" type="index" />
      </view>
    </scroll-view>
    <view style="height: 6rem;"></view>
    <nav-bar activated="index" />
    <nut-overlay
      v-model:visible="show_notice"
      :lock-scroll="false"
      :close-on-click-overlay="false"
    >
    <div class="overlay-body">
      <div class="overlay-content">
        <view class="notice-wrapper">
          <view class="notice-content">
            <view v-if="notice_type === 1">
              <view class="title">本味掠影</view>
              <view v-html="html1"></view>
              <view class="content mb-1">4、静心服务：健身气功八段锦，湖景茶室、咖啡室，可参与甘露别院静心茶会、别院巡礼等活动（该项看时间因缘）。</view>
            </view>
            <view v-if="notice_type === 2">
              <view class="title">入住须知</view>
              <view v-html="html2"></view>
              <view class="content mb-1">此须知为入住本味山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view>
            </view>
            <view v-if="notice_type === 3">
              <view class="title">配套设施</view>
              <view class="content">1、24小时热水供应，部分房间有空调、吊扇，部分区域Wi-Fi。</view>
              <view class="content">2、独栋配有茶室、客厅、书房，部分独栋配有独立厨房、餐厅和院子。</view>
              <view class="content">3、独栋二楼配有景观天窗。</view>
              <view class="content">4、设有公共洗衣房（部分独栋配独立洗衣房）。</view>
              <view class="content">5、公共区域有湖景餐厅、湖景咖啡屋。</view>
              <view class="content">6、房内配有烧水壶、茶具、台灯、吹风机、衣架、拖鞋、洗发水、沐浴露。</view>
              <view class="content mb-1">7、岛上环保需要，牙膏、牙刷、毛巾、浴巾等私人用品请自带。</view>
            </view>
          </view>

          <nut-button @tap="onCloseNotice" color="#6a4925" block type="primary" style="margin-top: 1rem;">关闭</nut-button>
          <view style="height: 1rem;"></view>
        </view>
      </div>
    </div>
    </nut-overlay>
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref } from 'vue';
import roomCard from '@/components/roomCard.vue'
// import arrowDownImg from '@/assets/images/arrow-down.png'
import navBar from '@/components/navBar.vue'
import { useDidShow } from '@tarojs/taro'
import { getListAPI } from '@/api/index'

// TAG: 模拟onShow事件
useDidShow(() => {
  // console.warn('index onShow')
})

// 分享功能
wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})
</script>

<script>
import "./index.less";
// import { activityHomeAPI } from '@/api/Host/index'
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { sysParamAPI } from '@/api/index'

export default {
  name: "indexPage",
  mixins: [mixin.init],
  onReady() {
    if (!Taro.canIUse("getUpdateManager")) {
      Taro.showModal({
        title: "提示",
        content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试",
        showCancel: false,
      });
      return;
    }

    // https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html
    const updateManager = Taro.getUpdateManager();

    updateManager.onCheckForUpdate((res) => {
      // 请求完新版本信息的回调
      if (res.hasUpdate) {
        updateManager.onUpdateReady(function () {
          Taro.showModal({
            title: "更新提示",
            content: "新版本已经准备好，是否重启应用？",
            success: function (res) {
              if (res.confirm) {
                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate();
              }
            },
          });
        });

        updateManager.onUpdateFailed(function () {
          // 新版本下载失败
          Taro.showModal({
            title: "更新提示",
            content: "新版本已上线，请删除当前小程序，重新搜索打开",
          });
        });
      }
    });
  },
  async onShow () {
    // Taro.showLoading({ mask: true, title: "加载中..." })
    // 获取活动和轮播信息
    const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
    if (code) {
      this.room_list = data;
      this.page = this.page + 1;
      // Taro.hideLoading()
    }
  },
  onHide () { // 离开当前页面
    this.page = 1;
    this.flag = true;
  },
  computed: {
    scrollStyle() {
      return {
        height: this.indexCoverHeight + 'px',
      };
    },
    coverStyle () {
      return {
        width: '100%',
        height: this.indexCoverHeight + 'px',
      };
    },
  },
  async mounted () {
    // 设置首页封面高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    setTimeout(async () => {
      const navHeight = await $('#navbar-page').height();
      this.indexCoverHeight = windowHeight - navHeight;
    }, 500);
    // 获取系统参数
    const { code, data } = await sysParamAPI();
    if (code) {
      this.banner_url = data.home_banner ? data.home_banner : 'https://cdn.ipadbiz.cn/meihua/banner1@2x.png';
    }
  },
  data() {
    return {
      banner_url: '',
      indexCoverHeight: 0,
      scrollTop: 0,
      room_list: [],
      flag: true,
      page: 1,
      limit: 10,
      show_notice: false,
      notice_type: 1,
      html1: '',
      html2: '',
    };
  },
  methods: {
    onScroll(event) {
    },
    async onScrollToUpper (event) {
      this.scrollTop = 0; // 重置scrollTop，让按钮能再往下滚动
    },
    onScrollToLower () {
      if(!this.flag){
        return
      }
      this.flag = false;
      this.getList();
    },
    async getList () {
      // 获取列表
      const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
      if (code) {
        if (data.length) {
          this.room_list = this.room_list.concat(data);
          this.page = this.page + 1;
          this.flag = true;
        } else {
          // Taro.showToast({
          //   title: '没有更多了',
          //   icon: 'none'
          // });
        }
      }
    },
    onArrowDown () {
      this.scrollTop = this.indexCoverHeight; // 调整滚动控件高度
    },
    async onShowNotice (type) { // 显示须知
      this.show_notice = true;
      this.notice_type = type;
      // 处理须知滚动，无法处理问题
      const html1 = `
        <view class="content" style="text-indent: 2rem;">外象多变，本心至简。人生百味，归本味。</view>
        <view class="content" style="text-indent: 2rem;">梅花岛本味山居，位于福建省三明市泰宁世界地质公园、世界自然遗产地核心景区大金湖中心。2022年动工，将岛上23幢夯土、砖彻或全木结构的旧民居进行适当修复，成为中国旧乡村改造为禅意民宿的优秀样板。山中景色四时不同，十里平湖美丽如画，空气清新，泉水清洌，可以感受大自然的静谧祥和，享受水天相接、与天地融为一体的自在惬意，完全地放松、放空、放下。</view>
        <view class="content" style="text-indent: 2rem;">聆听安静，安顿身心，静候您。</view>
        <view class="content" style="text-indent: 2rem; font-weight: bold;">特色：</view>
        <view class="content">1、提供三餐天然纯净素食（不含五辛）。</view>
        <view class="content">2、古早作息方式，日出而作，日落而息。</view>
        <view class="content">3、正念、静心、慢生活。</view>
      `;
      const html2 = `
        <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
        <view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
        <view class="content">3、本味山居周边有野生动物出没，为了安全，禁止进入山居经营范围外的区域。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
        <view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
        <view class="content">5、山居统一安排渡船上岛，为保证湖内通行安全，禁止私自雇船进出岛。如有违反，视为当天取消预订，山居不予办理入住。</view>
        <view class="content">6、岛内自然生态茂盛，蚊虫较多，尽量穿着长衣长裤、平底鞋。房间内备有风油精，如果出现过敏等严重症状，请及时和工作人员联系。</view>
        <view class="content">7、客服回复时间：8:00-10:50；14:30-17:00。</view>
        <view class="content">上岛渡船班次：上午：8:00；9:30；10:20；下午：14:30；16:30。</view>
        <view class="content">8、入住人员需年满18周岁。</view>
        <view class="content">9、取消或变更请及时联系我们。</view>
        <view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
        <view class="content">若入住当天取消，扣除100%费用。</view>
      `;
      this.html1 = html1;
      this.html2 = html2;
    },
    onCloseNotice () { // 关闭须知
      this.show_notice = false;
      this.html1 = '';
      this.html2 = '';
    }
  },
  onPageScroll ({ scrollTop }) {
  },
  onShareAppMessage(options) {
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
      title: "梅花岛订房小程序",    // 默认是小程序的名称(可以写slogan等)
      path: 'pages/index/index',    // 默认是当前页面，必须是以‘/'开头的完整路径
      imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
          //
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
        }
      },
      complete: function () {
        // 转发结束之后的回调（转发成不成功都会执行）
      }
    }
    // 来自页面内的按钮的转发
    // if (options.from == 'button') {
    //   var eData = options.target.dataset;
    //   // 此处可以修改 shareObj 中的内容
    //   shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
    // }
    // 返回shareObj
    return shareObj;
  }
};
</script>