// pages/quest/quest.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navItem: [{
      id: 0,
      name: '全部状态',
      is: false
    }, {
      id: 1,
      name: '全部标签',
      is: false
    }, {
      id: 2,
      name: '全部日期',
      is: false
    }, {
      id: 3,
      name: '全部车型',
      is: false
    }],
    selectItem: [{
      id: 0,
      rank: [{
        name: '全部状态',
        is: true
      }, {
        name: '待领取',
        is: false
      }, {
        name: '进行中',
        is: false
      }, {
        name: '已完成',
        is: false
      }]
    }, {
      id: 1,
      rank: [{
        name: '全部标签',
        is: true
      }, {
        name: '媒体测评',
        is: false
      }, {
        name: '产品宣传',
        is: false
      }, {
        name: '用户活动',
        is: false
      }, {
        name: '趣味互动',
        is: false
      }]
    }, {
      id: 2,
      rank: [{
        name: '全部日期',
        is: true
      }, {
        name: '一个月内',
        is: false
      }, {
        name: '三个月内',
        is: false
      }, {
        name: '半年内',
        is: false
      }, {
        name: '一年内',
        is: false
      }]
    }, {
      id: 3,
      rank: [{
        name: '全部车型',
        is: true
      }, {
        name: '星途追风ET-I',
        is: false
      }, {
        name: '星途追风',
        is: false
      }, {
        name: '星途TX',
        is: false
      }, {
        name: '星途凌云',
        is: false
      }, {
        name: '星途凌云S',
        is: false
      }, {
        name: '星途揽月',
        is: false
      }, {
        name: '揽月探享版至尊享受',
        is: false
      }]
    }],
    // 下拉选项，被选中那组的数据，由下面的js控制赋值
    selectedItem: [],
    // 记录菜单栏第几项被点开，方便对样式的绑定
    listNum: -1,
    // 下拉选项的隐藏和显示，默认隐藏
    showOrHide: false,
    questes: [
      {
        time: '2022-3-18～2022-5-18',
        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
        url: 'https://www.oa00.com/#/attendance/index',
        type: 1,
        num: '258w',
        duration: '02:32',
      },{
        time: '2022-3-18～2022-5-18',
        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
        url: 'https://www.oa00.com/#/attendance/index',
        type: 1,
        num: '258w',
        duration: '02:32',
      },{
        time: '2022-3-18～2022-5-18',
        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
        url: 'https://www.oa00.com/#/attendance/index',
        type: 1,
        num: '258w',
        duration: '02:32',
      },{
        time: '2022-3-18～2022-5-18',
        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
        url: 'https://www.oa00.com/#/attendance/index',
        type: 1,
        num: '258w',
        duration: '02:32',
      },{
        time: '2022-3-18～2022-5-18',
        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
        url: 'https://www.oa00.com/#/attendance/index',
        type: 1,
        num: '258w',
        duration: '02:32',
      },{
        time: '2022-3-18～2022-5-18',
        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
        url: 'https://www.oa00.com/#/attendance/index',
        type: 1,
        num: '258w',
        duration: '02:32',
      },{
        time: '2022-3-18～2022-5-18',
        title: '星途揽月新款抖音视频需求需要马上贯彻落实',
        text: '以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上以一流的设计和领先的技术为基础以人工智能为差异化,从外观、性能上...',
        url: 'https://www.oa00.com/#/attendance/index',
        type: 1,
        num: '258w',
        duration: '02:32',
      },
    ],
  },
  back(){
    wx.navigateBack({
      delta: 1
    })
  },
  // 点击菜单栏触发的事件函数
  handleClick: function (e) {
    const index = e.currentTarget.dataset.id;
    const {
      selectItem,
      navItem
    } = this.data;
    // 点击事件，开始时一定会执行的，先令所有下拉选项先隐藏
    const promise = new Promise((res) => {
      this.setData({
        showOrHide: true
      })
      res()
    })
    promise.then(() => {
      // 定义一个延迟0.1秒的函数，和函数动画事件对上
      setTimeout(() => {
        // 当点击的是已经点开的菜单项，则隐藏
        if (this.data.listNum === index) {
          navItem[index].is = false
          // 重置所有样式
          this.setData({
            navItem,
            listNum: -1
          })
          return;
        } else {
          // 否则就令当前的index = listNum方便下一次判断
          this.setData({
            listNum: index
          })
        }
        // 令当前点击的菜单栏高亮
        navItem.forEach((v, i) => i === index ? v.is = true : v.is = false)
        // console.log(selectItem[index].rank)
        this.setData({
          showOrHide: true,
          selectedItem: selectItem[index].rank,
          navItem
        })
      }, 100)
    })
  },
  // 关闭下拉选项的函数
  // 两种情况下会关闭下拉选项
  //  1. 选择下拉选项，选择后被选的下拉选项高亮，关闭下拉选项列表
  //  2. 点击遮罩层关闭 
  closeMask: function (e) {
    let {
      navItem,
      listNum,
      selectedItem
    } = this.data;
    // 获取点击的下拉选项内容
    const {
      contant
    } = e.currentTarget.dataset
    // 被点击的下拉选项高亮
    selectedItem.forEach((v) => v.name === contant ? v.is = true : v.is = false)
    // 判断点击的是遮罩层还是下拉选项，如果是下拉选项则把选择的内容赋值到导航栏上，并且把v.is = false，让菜单栏高亮消失
    // 如果不是，不用赋值，直接把v.is = false，让菜单栏高亮消失
    contant ? (navItem.forEach((v, i) => {
      (i === listNum ? (v.name = contant) : (v.name = v.name));
      // (i === listNum ? ( e.currentTarget.dataset.id !== 0 ? v.is = true : v.is = false) : (v.is = v.is));
      v.is = false
    })) : (navItem.forEach((v) => v.is = false))
    // 调取借口触发筛选
    // console.log(navItem)
    this.setData({
      listNum: -1,
      showOrHide: false,
      navItem,
      selectedItem
    })
  },
  to(e) {
    wx.navigateTo({
      url: e.currentTarget.dataset.url
    })
  },
  detail(){
    wx.navigateTo({
      url: 'url',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '任务中心',
      success: function (res) {}
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})