<template>
    <div class="tn-select-list" :style="{height: height + 'px'}">
        <div class="tn-select-list-item" 
            v-for="(list, key) in info" v-bind:key="key"
            :ref="'Component_test'"
        > 
            <!-- 主要展示内容 -->
            <ul :ref="'Content_test'">
                <li 
                    v-for="(val, index) in list.values" 
                    v-if="list.values"
                    v-bind:key="index"
                    :data-value="val.text"
                    ref="Content_item"
                    :style="hasActive(val, key) ? 'color: ' + activeColor : ''"
                    :class="{
                        'tn-select-list-item-active': hasActive(val, key)
                    }"
                >{{val.text}}{{list.unit}}</li>
            </ul>
        </div>

        <!-- 悬浮样式 -->
        <span class="tn-select-list__shade" :style="{backgroundSize: '100% ' + backgroundSize + 'px'}"></span>
        <!-- :style="{height: '44px'}"  -->

        <div class="tn-select-list__indicator"><span class="indicator" ref="indicator"></span></div>
    </div>
</template>
<script>
/*** 对外暴露的参数
 * @param height Number 默认值 300 使用组件的高度
 * @param date String 简写时间格式 方便快速调用 支持：YYYY-MM-DD hh:mm:ss YYYY-MM-DD hh:mm YYYY-MM-DD hh YYYY-MM-DD YYYY-MM mm-dd hh:mm:ss mm-dd hh:mm:ss mm-dd hh:mm mm-dd hh
 * @param info Array 自定义数据 [{}] 数据内的对象列表
 * * * * @param info[i].values [{}] 自定义展示的数据列表
 * * * * @param info[i].values.text String 文字
 * * * * @param info[i].activeVal String 选择的值
 * * * * @param info[i].unit String 展示的单位
 * * * * @param info[i].name String 简化自定义列表 支持 years months days hours minutes seconds
 * * * * @param info[i].max String name 为years时 可用  例：2020  年列表最大值
 * * * * @param info[i].min String name 为years时 可用  例：1995  年列表最小值
 * * * * @param info[i].plus Number 间隔展示 name 为 days minutes seconds 可用
 * 
 * 
 * @event selectBack  滑动动画结束后回调 v-on:selectBack 返回[AText, BText, CText]格式
 * 
 * 
 * 调用方法
 * <select-list class="select-list" :info="selectInfo" v-on:selectBack="selectBack"></select-list>
 * <select-list class="select-list" :height="150" date="12:24:30" v-on:selectBack="selectBack"></select-list>
 * 
 *  */

import Scroller from '../../Vendors/scroller.js'
import {initYear, initMonth, initDay, initHour, initMinute, initSecond, getDateInfo} from './timeInit.js';
import { pad, realPx } from '../../Utils'
const ITEM_HEIGHT = +realPx(40).toFixed(1) // 小数点不能过多
export default {
    props: {
        height: {
            type: Number,
            default: 300
        },
        date: {
            type: String,
            default: ''
        },
        info: {
            type: Array,
            default() {
                return [];
            }
        },
        activeColor: {
            type: String,
            default: '#333'
        }
    },
    data() {
        return {
            backgroundSize: '130', // 计算悬浮样式
            scrollerList: [],
            values: {},
            daysKey: '',
            yearsVal: '',
            monthsVal: '',
            indicatorHeight: ''
        }
    },
    created() {
      // 重置
      this.refresh ()
    },
    methods: {
        // 重置
        refresh () {
          // 是否有简单的日期格式 
          this.haveOnlyDate();

          this.$nextTick(() => {

              // 初始化
              this.init();
          });
        },
        // 是否有简单的日期格式 
        haveOnlyDate() {
            if(this.info.length) {
                return;
            }

            const [data, info] = getDateInfo(this.date);

            data.forEach((item, key) => {
                this.info.push({
                    activeVal: info[key],
                    name: item
                });
            });
        },

        init() {
            // 初始化样式
            this.initStyle();

            this.scrollerList.map(item => {
                // 取消事件兼听
                item.removeEvent();
                return item; 
            });

            this.scrollerList = [];
            // alert(this.$refs.Content_item[0].offsetHeight)

            this.info.forEach((item, key) => {
                // 获取 dom 数据
                const component = this.$refs.Component_test[key];
                const content = this.$refs.Content_test[key];
                // const ITEM_HEIGHT = this.$refs.indicator.offsetHeight;
                // const ITEM_HEIGHT = '44.16';
                // this.indicatorHeight = parseInt(ITEM_HEIGHT) + 'px'
                const self = this
                // debugger


                // 生成触滑事件
                this.createScroller(item, key, component, content, ITEM_HEIGHT);

                // 设置数据
                this.setScrollerInfo(item, key, ITEM_HEIGHT);
            });

        },

        // 初始化样式
        initStyle() {
            // const ITEM_HEIGHT = this.$refs.indicator.offsetHeight;
            this.backgroundSize = this.height / 2 - ITEM_HEIGHT / 2;
            // background-size: 100% 80px;
        },

        // 生成触滑事件
        createScroller(item, key, component, content, ITEM_HEIGHT) {
            // 生成触滑
            this.scrollerList.push(
                new Scroller(component, content, {
                    itemHeight: ITEM_HEIGHT,
                    onSelect: (value) => {
                        this.values['select' + key] = value;

                        // 有日期的情况下
                        if(this.daysKey !== '' && (item.name === 'years' || item.name === 'months')) {
                            // 设置day
                            this.setDays(item, value, ITEM_HEIGHT);
                        }

                        // 回调
                        let backInfo = [];
                        for(let i in this.values){
                            backInfo.push(this.values[i]);
                        }
                        this.$emit('selectBack', backInfo);
                    },
                    callback: (top, isDragging) => {
                      content.style.webkitTransform = 'translate3d(0, ' + (-top) + 'px, 0)'
                    }
                })
            )
        },

        // 日期

        // 设置滚动条数据
        setScrollerInfo(item, key, ITEM_HEIGHT) {
            if(item.name) {
                // 时间类型
                this.timeCategory(item, key);
                
                this.info[key].values = item.values;
                this.$set(this.info, 'info', this.info);
                // this.info = Object.assign({}, this.info);

            }

            // 获取展示数据
            const len = item.values.length;
            const text = item.activeVal || item.values[0].text;

            this.$set(this.values, 'select' + key, text); // 设置值

            // 设置滚动条数据
            this.$nextTick(() => {
                // 7 * ITEM_HEIGHT
                // this.height + 20
                this.scrollerList[key].setDimensions(7 * ITEM_HEIGHT, len * ITEM_HEIGHT, len)
                this.scrollerList[key].select(text, false);
            });
        },

        // 时间类型
        timeCategory(item, key) {
            switch(item.name) {
                case 'years':
                    return initYear(item);
                case 'months':
                    return initMonth(item);
                case 'days':
                    // 获取日需要的 月份和年份
                    this.getYearAndMonthForDay();
                    this.daysKey = key;
                    return initDay(item, this.yearsVal, this.monthsVal);
                case 'hours':
                    return initHour(item);
                case 'minutes':
                    return initMinute(item);
                case 'seconds':
                    return initSecond(item);
            }
        },

        // 设置day
        setDays(item, value, ITEM_HEIGHT) {
            this[item.name + 'Val'] = value;
            const days = initDay(this.info[this.daysKey], this.yearsVal, this.monthsVal);
            const len = days.values.length;

            this.scrollerList[this.daysKey].setDimensions(ITEM_HEIGHT * 7, len * ITEM_HEIGHT, len)

            // 如果选择值 > 当前有的值 返回为最大值  例：31日 > 30日 === 30日
            if(this.values['select' + this.daysKey] > days.values[len - 1].text) {
                this.scrollerList[this.daysKey].select(days.values[len - 1].text, false);
            }
        },

        // 获取日需要的 月份和年份
        getYearAndMonthForDay() {
            const info = this.info;
            const date = {};
            for(let i = 0; i < info.length; i++) {
                if(info[i].name === 'years' || info[i].name === 'months') {
                    this[info[i].name + 'Val'] = info[i].activeVal + '';
                    date[info[i].name] = info[i].activeVal + '';
                }
            }
            return date;
        },

        // 是否选中
        hasActive(val, key) {
            if(val.text === this.values['select' + key]) {
                return true;
            }
            return false;
            
        }
    }
}
</script>
<style lang="stylus">
@import '../../../style/selectList.styl'
</style>