
<template>
    <div>
       <div class="bgc-gradient-blue">
           <div class="align-center justify-center cal-wrap">
                <text @click="pickDate()" class="fs36 f-white">{{timeTitle}}</text>
           </div>
           <div class="daily-week">
               <div class="flex-row">
                   <div v-for="(item,index) in weekArr" :key="index" class="row-item align-center"><text class="fs24 f-white">{{item.label}}</text></div>
               </div> 
               <div flex-direction="row" class="flex-row">
                    <!-- 205623		【lighting-ui】calendar-row横向日历安卓滑动错乱 -->
                    <slider class="slider" interval="3000" @scroll="scrollHandler" @change="changeHandler" offset-x-accuracy="0.001">
                        <div class="slider-pages" v-for="(item,i) in daysArr" :key="i">
                            <div class="row-item justify-center align-center"  v-for="(day, index) in days" :key="index" @click="picktime(day,index)">
                                <!--本月-->
                                <text v-if="day.getMonth()+1 != currentMonth" class="other-month fs28 f-white weeknum mt25 opacity-5" :class="[index==isActIndex&&'active']">{{ day.getDate() }}</text>
                                <div v-else>
                                    <!--今天-->
                                    <text v-if="day.getFullYear() == new Date().getFullYear() && 
                                                day.getMonth() == new Date().getMonth() && 
                                                day.getDate() == new Date().getDate()" class="fs28 f-white weeknum mt25 current" :class="[index==isActIndex&&'active']">{{ day.getDate() }}</text>
                                    <text v-else class="fs28 f-white weeknum mt25" :class="[index==isActIndex&&'active']">{{ day.getDate() }}</text>
                                </div>
                            </div>
                        </div>
                    </slider>
                </div>
           </div>
           
        </div>
        <!-- <text>选择了{{this.params.today}}</text> -->
    </div>
</template>
<script>
import Light from "light";
import Utils from "../utils";
export default {
  data() {
    return {
      lwhiteIcon: "images/r-white.png",
      labelstyle: {
        color: "#fff"
      },
      weekArr: [
        { label: "周日" },
        { label: "周一" },
        { label: "周二" },
        { label: "周三" },
        { label: "周四" },
        { label: "周五" },
        { label: "周六" }
      ],
      currentYear: 1970, // 年份
      currentMonth: 1, // 月份
      currentDay: 1, // 日期
      currentWeek: 1, // 星期
      selsectdays: "",
      days: [],
      daysArr: ["", "",""],
      weekNextDays: [],
      weekPreDays: [],
      isActIndex: null,
      params: {},
      flag: false,
      turnPos: null,
      scrollHnadlerCallCount: 0
    };
  },
  created() {
    setTimeout(() => {
      this.timeinitData(null);
      this.$emit("current", this.selsectdays);
    }, 0);
  },
  computed: {
    timeTitle() {
      return this.currentYear + "年" + this.currentMonth + "月";
    }
  },
  methods: {
    formatDate(year, month, day) {
      const y = year;
      let m = month;
      if (m < 10) m = `0${m}`;
      let d = day;
      if (d < 10) d = `0${d}`;
      return `${y}-${m}-${d}`;
    },

    timeinitData(cur, type) {
      let date = "";
      if (cur) {
        date = new Date(cur);
      } else {
        date = new Date();
      }
      this.currentDay = date.getDate(); // 今日日期 几号
      this.currentYear = date.getFullYear(); // 当前年份
      this.currentMonth = date.getMonth() + 1; // 当前月份
      this.currentWeek = date.getDay(); // 1...6,0   // 星期几
      const str = this.formatDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      ); // 今日日期 年-月-日
      this.days.length = 0;
      this.selsectdays = str;
      this.isActIndex = type == "select" ? this.currentWeek : null;

      // 今天是周日，放在第一行第1个位置，前面6个 这里默认显示一周
      for (let i = this.currentWeek; i >= 0; i -= 1) {
        const d = new Date(str);
        d.setDate(d.getDate() - i);
        this.days.push(d);
      }
      for (let i = 1; i <= 6 - this.currentWeek; i += 1) {
        const d = new Date(str);
        d.setDate(d.getDate() + i);
        this.days.push(d);
      }

      //日期选中后的操作
      //this.afterChosen(date);
    },
    //  上个星期
    weekPre() {
      const d = this.days[0];
      d.setDate(d.getDate() - 6);
      this.selsectdays = d;
      this.timeinitData(d);
    },
    //  下个星期
    weekNext() {
      const d = this.days[6];
      d.setDate(d.getDate() + 7);
      this.selsectdays = d;
      this.timeinitData(d);
    },
    // // 上一個月   传入当前年份和月份
    // pickPre(year, month) {
    //   const d = new Date(this.formatDate(year, month, 1));
    //   d.setDate(0);
    //   this.timeinitData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    // },
    // // 下一個月   传入当前年份和月份
    // pickNext(year, month) {
    //   const d = new Date(this.formatDate(year, month, 1));
    //   d.setDate(35);
    //   this.timeinitData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    // },

    // 当前选择日期
    picktime(date, index) {
      var _this = this;
      //日期选中后的操作
      _this.afterChosen(date);
      _this.isActIndex = index;

      //alert(choseDate);
    },
    //日期选中后的操作
    afterChosen: function(date) {
      var _this = this;
      //被选中日期
      var choseDate = this.formatDate(
        date.getFullYear(),
        date.getMonth() + 1,
        date.getDate()
      );
      this.currentMonth = date.getMonth() + 1;
      //117917 【TS:201812290287-财富业委会-周文龙-【基金标准版】我的日程/日报，日历跨月时日期滑动显示不对，且
      this.selsectdays = date.getDate();
      this.timeinitData(choseDate);
      //被选中日期格式化“YYYY-MM-DD”
      //var formatchooseDate = moment(choseDate).format("YYYY-MM-DD");
      //_this.params["today"] = choseDate;
      _this.$emit("chose", choseDate);
    },
    // 去除lighting-ui组件内在小程序运行环境中所有引入的weex环境变量
    pickDate: function(e) {
      const picker = Light.requireModule("picker");
      var self = this;
      picker.pickDate(
        {
          value: self.selsectdays,
          max: "2022-12-30",
          min: "2000-12-30"
        },
        function(ret) {
          var result = ret.result;
          if (result == "success") {
            self.currentYear = ret.data.split("-")[0];
            self.currentMonth = ret.data.split("-")[1];
            self.selsectdays = ret.data;
            self.timeinitData(ret.data, "select");
            self.$emit("chose", ret.data);
          }
        }
      );
    },
    scrollHandler: function(e) {

      if (e.offsetXRatio != 0) {
        this.turnPos = e.offsetXRatio < 0 ? false : true;
      }
      
      this.scrollHnadlerCallCount = this.scrollHnadlerCallCount + 1;
    },
    changeHandler: function(e) {
      //109453 横向日历组件lc-calendar-row在安卓上不能滑动 
        if(Utils.env.isAndroid()){
            if (this.flag) {
                this.flag=true;
                this.scrollHnadlerCallCount = 0;
                if (this.turnPos) {
                    this.weekPre();
                } else {
                    this.weekNext();
                }
            }else{
                this.flag=true;
            } 
        }else{
            this.scrollHnadlerCallCount = 0;
            if (this.turnPos) {
                this.weekPre();
            } else {
                this.weekNext();
            }
        }  
    },
  }
};
</script>
<style scoped >
.align-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.flex-row {
  flex-direction: row;
}
.row-item {
  flex: 1;
  display: inline-flex;
}
.bgc-gradient-blue {
  background-image: linear-gradient(to bottom, #1d77e3, #6082f6);
}
.f-white {
  color: #fff;
}
.fs24 {
  font-size: 24px;
}
.fs28 {
  font-size: 28px;
}
.fs36 {
  font-size: 36px;
}
.mt25 {
  margin-top: 25px;
}
.daily-week {
  padding-top: 30px;
  padding-bottom: 30px;
}
.cal-wrap {
  height: 88px;
}

.slider {
  flex-direction: row;
  width: 750px;
  height: 120px;
}
.slider-pages {
  flex-direction: row;
  width: 750px;
}
.weeknum {
  width: 52px;
  height: 52px;
  text-align: center;
  line-height: 52px;
  border-radius: 52px;
}
.active {
  background-color: #fff;
  color: #577ffa;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
}
/* .other-month {
    color: #e4393c;
} */
.current {
  background-color: #577ffa;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
}
.down-ico {
  width: 14px;
  height: 8px;
}
</style>
