// pages/home/home.js
//获取应用实例
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title: 'header',
    userInfo: '',
    content: '我是父组件的content',
    footContent: "bottomContent",
    headBackground: [
      { class: 'header-swiper-one', content: '数据分析' ,articleId:32},
      { class: 'header-swiper-two', content: '前端开发' ,articleId:33},
      { class: 'header-swiper-three', content: '全栈开发',articleId:34 }
    ],
    swiperConfig: {
      indicatorDots: true,
      headerContent: 'swiper',
      vertical: false,
      autoplay: false,
      interval: 5000,
      duration: 1000,
      indicatorColor: "#2e86de",
      indicatorActiveColor: "#dff9fb",
    },
    menuIsShow: false,
    bottomBtn: 'front',
    titleObj: [],
    baseUrl: 'https://yongma16.xyz/api/',
    path: 'article/index/',
    currentArticleId: 0,
    currentArticleTitle: ''
  },
  // 监听
  watch: {
    bottomBtn: function (newVal, oldVal) {
      console.log('监听', newVal, oldVal)
    }
  },
  /**
   * 获取文章
   */
  clickBlogTitleBtn(e) {
    const {id,title}=e.currentTarget.dataset
    this.setData({
      currentArticleId:id,
      currentArticleTitle:title
    })
    this.getRemoteArticleById(id)
  },
  initHomeComponent(){
    const articleObjId=this.data.headBackground[0].articleId
    this.updateHomeContent(articleObjId)
  },
  updateHomeContent(articleObjId){
    this.triggerHomeContent(articleObjId)
  },
  /**
   * 卡片变动修改内容
   * @param {*} e 
   */
  swiperChange(e){
    const index=e.detail.current
    const articleObjId=this.data.headBackground[index].articleId
    this.updateHomeContent(articleObjId)
  },
  /**
   * 触发子组件跟新id
   */
  triggerHomeContent(id){
    const homeComponent = this.selectComponent('#home-content-id')
    homeComponent.getRemoteArticle(id)
  },

  /**
   * 获取文章
   * @param {*} id
   */
  getRemoteArticleById() {
    const paramId=this.data.currentArticleId;
    const blogComponent = this.selectComponent('#blog-id')
    blogComponent.setLoading(true)
    const baseUrl = this.data.baseUrl
    const path = this.data.path
    const that=this
    const headers = { 'Content-Type': 'application/json;charset=UTF-8' }
    const params = {
      value: paramId
    }
    wx.request({
      url: baseUrl + path,
      headers: headers,
      data: params,
      method: 'POST',
      success: (res) => {
        const data = res.data
        const articleStr = data && data.article[0]
        const title=that.data.currentArticleTitle
        blogComponent.setArticleNode(articleStr,title)
      }
    });
  },
  /**
   * 更新菜单
   * @param {Element} e
   */
  updateArticleMenu(e) {
    this.setData({
      titleObj: e.detail
    })
  },

  // 自定义函数
  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },



  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  },

  // 关闭菜单
  menuClose() {
    this.data.menuIsShow && this.setData({
      menuIsShow: !this.data.menuIsShow
    })
  },
  menuSwitch() {
    this.setData({
      menuIsShow: !this.data.menuIsShow
    })
  },
  // 导航的按钮
  clickBottomBtn(e) {
    const label = e.currentTarget.dataset.label || this.data.bottomBtn
    this.setData({
      bottomBtn: label
    })
  },

  getRemoteData() {
    this.getRemoteArticleById()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.initHomeComponent();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})