import { Block, View, Picker, Text, Image } from ‘@tarojs/components‘;

import Taro from ‘@tarojs/taro‘;

import withWeapp from ‘@tarojs/with-weapp‘;

import { calendarType } from ‘../../utils/broker.js‘;

import ‘./index.scss‘;

@withWeapp(‘Component‘)

class _C extends Taro.Component {

  state = {

    // 当前显示的年

    currentYear: new Date().getFullYear(),

    // 当前显示的月

    currentMonth: new Date().getMonth() + 1,

    allArr: [],

    // 当天日期

    nowData: {},

    // 选中日期的数据

    chooseData: {},

  }

  componentWillMount = () => {

    this.getDates();

  }

  getDates = () => {

    // 调用函数时，传入new Date()参数，返回值是日期和时间

    const time = this.formatTime(new Date());

    const next = this.getNextWeekDay(7);

    const nextMonday = `${next.year}${this.formatNumber(next.month)}${this.formatNumber(next.days)}`;

    const nextS = this.getNextWeekDay(13);

    const nextSunday = `${nextS.year}${this.formatNumber(nextS.month)}${this.formatNumber(nextS.days)}`;

    this.setData({

      nowData: `${time.year}${this.formatNumber(time.month)}${this.formatNumber(time.day)}`,

      chooseData: {

        date: nextMonday,

      },

      nextMonday,

      nextSunday,

    }, () => {

      this.getAllArr();

    });

  }

  // 获取下周一(num=7)或者下周日(num=13)的日期

  getNextWeekDay(num) {

    const time = this.formatTime(new Date());

    let days = time.day + num - this.getFirstDateWeek(time.year, time.month, time.day);

    const timeDistance = this.getDateLen(time.year, time.month);

    let month = new Date().getMonth() + 1;

    let year = new Date().getFullYear();

    // 下周一跨月

    if (days > timeDistance) {

      days -= timeDistance;

      month += 1;

      // 下周一跨年

      if (month > 12) {

        year += 1;

        month -= 12;

      }

    }

    return { year, month, days };

  }

  getDataList = () => {

    // 获取数据

  }

  // 设置默认选中

  setDefaultChoice(List) {

    // 默认选中当天

    const setDate = this.state.nowData;

    for (const item of List) {

      if (setDate === item.date) {

        this.getNowData(item);

        break;

      }

    }

  }

  // 初始化今天的日期

  formatTime = date => {

    const year = date.getFullYear();

    const month = date.getMonth() + 1;

    const day = date.getDate();

    return { year, month, day };

  }

  // 获取某年某月总共多少天

  getDateLen(year, month) {

    let actualMonth = month - 1;

    let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);

    return timeDistance / (1000 * 60 * 60 * 24);

  }

  // 获取某月几号是周几

  getFirstDateWeek(year, month, days = 0) {

    const day = new Date(year, month - 1, days || 1).getDay() - 1;

    if (day < 0) {

      return 6;

    }

    return day;

  }

  // 上月 年、月

  preMonth(year, month) {

    if (month == 1) {

      return {

        year: --year,

        month: 12,

      };

    } else {

      return {

        year: year,

        month: --month,

      };

    }

  }

  // 下月 年、月

  nextMonth(year, month) {

    if (month == 12) {

      return {

        year: ++year,

        month: 1,

      };

    } else {

      return {

        year: year,

        month: ++month,

      };

    }

  }

  // 整合当月所有数据

  getAllArr() {

    const { currentYear, currentMonth } = this.state;

    // 获取当月中，上月多余数据

    const preMonthDateLen = this.getFirstDateWeek(currentYear, currentMonth); // 当月1号是周几 == 上月残余天数）

    const preMonthDateArr = []; // 定义空数组

    if (preMonthDateLen > 0) {

      const { year, month } = this.preMonth(currentYear, currentMonth); // 获取上月 年、月

      let day = this.getDateLen(year, month); // 获取上月天数

      for (let i = 0; i < preMonthDateLen; i++) {

        preMonthDateArr.unshift({ // 尾部追加

          monthType: false, // 只是为了增加标识，区分当、上月

          month,

          year,

          day: day,

          date: `${year}${this.formatNumber(month)}${this.formatNumber(day)}`,

          items: [],

        });

        day--;

      }

    }

    // 获取当月数据

    const currentMonthDateLen = this.getDateLen(currentYear, currentMonth); // 获取当月天数

    const currentMonthDateArr = []; // 定义空数组

    if (currentMonthDateLen > 0) {

      for (let i = 1; i <= currentMonthDateLen; i++) {

        const date = `${currentYear}${this.formatNumber(currentMonth)}${this.formatNumber(i)}`;

        currentMonthDateArr.push({

          monthType: true, // 只是为了增加标识，区分上下月

          month: currentMonth,

          year: currentYear,

          day: i,

          date: date,

          items: [],

        });

      }

    }

    // 获取当月中，下月多余数据，

    let nextMonthDateLen = 7 - (preMonthDateLen + currentMonthDateLen) % 7; // 下月多余天数

    if (nextMonthDateLen === 7) {

      nextMonthDateLen = 0;

    }

    // 月末的时候能看到下周

    nextMonthDateLen += 7;

    const nextMonthDateArr = []; // 定义空数组

    if (nextMonthDateLen > 0) {

      const { year, month } = this.nextMonth(this.state.currentYear, this.state.currentMonth);

      for (let i = 1; i <= nextMonthDateLen; i++) {

        const date = `${year}${this.formatNumber(month)}${this.formatNumber(i)}`;

        nextMonthDateArr.push({

          monthType: false,// 只是为了增加标识，区分当、下月

          month,

          year,

          day: i,

          date,

          items: [],

        });

      }

    }

    const allArr = [...preMonthDateArr, ...currentMonthDateArr, ...nextMonthDateArr];

    this.getDataList(allArr);

  }

  // 点击具体日期

  getNowData(data) {

    this.setState({

      chooseData: data,

    });

  }

  // 更换月份

  handleTimeChange = e => {

    const dataList = e.detail.value.toString().split(‘-‘);

    const newYear = parseInt(dataList[0], 10);

    const newMonth = parseInt(dataList[1], 10);

    const { currentYear, currentMonth } = this.state;

    if (newYear === currentYear && currentMonth === newMonth) {

      return;

    }

    this.setState({

      currentYear: newYear,

      currentMonth: newMonth,

      chooseData: {},

    }, () => {

      this.getAllArr();

    });

  };

  // 格式化时间

  formatNumber = n => {

    n = n.toString();

    return n[1] ? n : ‘0‘ + n;

  }

  handleGetClasname = (item, chooseData) => {

    // 选中的日期

    if (item.date === chooseData.date) {

      return ‘chooseDay‘;

    }

    if (!item.monthType) {

      return ‘ontInMonth‘;

    }

  }

  render() {

    const { allArr, currentYear, currentMonth, nowData, chooseData } = this.state;

    return (

      <Block>

        <View className="calendar">

          <View className=‘tit‘>

            <Picker

              mode="date"

              fields=‘month‘

              className=‘picker‘

              onChange={this.handleTimeChange}

            >

              <Text className=‘current‘>{currentYear}年{currentMonth}月</Text>

              <Image

                src={require(‘../../statics/images/bluedown.png‘)}

                className="xiala"

              />

            </Picker>

          </View>

          <View className=‘content‘>

            <View className=‘showData‘>

              <View>一</View>

              <View>二</View>

              <View>三</View>

              <View>四</View>

              <View>五</View>

              <View style=‘color: #999999‘>六</View>

              <View style=‘color: #999999‘>日</View>

            </View>

            {

              allArr.map(item => (

                <View

                  key={item.date}

                  className=‘itemData‘

                  onClick={() => this.getNowData(item)}

                >

                  <View className={this.handleGetClasname(item, chooseData)} style={item.items.length ? ‘color:rgba(69,69,83,1);‘ : ‘color:rgba(153,153,153,1);‘}>

                    <Text>{item.day}</Text>

                    {

                      item.date === nowData &&

                      <View className=‘toDay‘>今</View>

                    }

                  </View>

                </View>

              ))

            }

          </View>

        </View>

      </Block >

    );

  }

}

export default _C;