<template>
    <view class="content">
        <view class="link"></view>
        <view class="itemTime">{{ itemTime }}</view>
        <scroll-view :scroll-top="scrollTop" @touchstart="closeintervalID" scroll-y="true" class="scroll-Y"
            @scrolltoupper="upper"
            @scrolltolower="lower" @scroll="scroll">
            <view class="interval"></view>
            <view class="scroll-view-item">
                <view class="andChannel" v-for="(item, index) in andChannel"
                    :style="{ top: item.startTop + 'px', height: item.endTop - item.startTop + 'px' }"
                    :key="'andChannel' + index">
                </view>
                <template v-for="(item, key) in timetwoMinuteScaleAll">
                    <view class="twoMinute" v-if="item.twoMinute" :key="key">
                        <view class="showMinuteScale" v-if="item.showMinuteScale">{{ toYYMM(item.itemTime) }}</view>
                    </view>
                </template>
            </view>
            <view class="interval-but"></view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    props: {
        timeSection: {
            type: Array,
            default: () => [
                
            //     {
            //       "id": "845947455808901120",
            //       "key": "vrkey__13306138126_1_1690795730000_1",
            //       "deviceId": "13306138126",
            //       "vehicleId": "748032610971848704",
            //       "fileDate": "2023-07-31 00:00:00",
            //       "channel": 1,
            //       "startTime": "2023-07-31 17:28:50",
            //       "endTime": "2023-07-31 19:24:31",
            //       "alarmType": "0000000000000000",
            //       "dataType": 0,
            //       "dataRate": 1,
            //       "storageType": 1,
            //       "fileSize": 1657579203,
            //       "uploadStatus": "noupload",
            //       "uploadingTime": null,
            //       "uploadedTime": null,
            //       "orderNumber": null,
            //       "sourceFile": null,
            //       "targetFile": null
            //     },
            //     {
            //       "id": "845949971443388416",
            //       "key": "vrkey__13306138126_1_1690802671000_1",
            //       "deviceId": "13306138126",
            //       "vehicleId": "748032610971848704",
            //       "fileDate": "2023-07-31 00:00:00",
            //       "channel": 1,
            //       "startTime": "2023-07-31 19:24:31",
            //       "endTime": "2023-07-31 19:29:03",
            //       "alarmType": "0000000000000000",
            //       "dataType": 0,
            //       "dataRate": 1,
            //       "storageType": 1,
            //       "fileSize": 64791937,
            //       "uploadStatus": "noupload",
            //       "uploadingTime": null,
            //       "uploadedTime": null,
            //       "orderNumber": null,
            //       "sourceFile": null,
            //       "targetFile": null
            //     },
            //     {
            //       "id": "845980170583183360",
            //       "key": "vrkey__13306138126_1_1690802942000_1",
            //       "deviceId": "13306138126",
            //       "vehicleId": "748032610971848704",
            //       "fileDate": "2023-07-31 00:00:00",
            //       "channel": 1,
            //       "startTime": "2023-07-31 19:29:02",
            //       "endTime": "2023-07-31 21:29:17",
            //       "alarmType": "0000000000000000",
            //       "dataType": 0,
            //       "dataRate": 1,
            //       "storageType": 1,
            //       "fileSize": 1722336210,
            //       "uploadStatus": "noupload",
            //       "uploadingTime": null,
            //       "uploadedTime": null,
            //       "orderNumber": null,
            //       "sourceFile": null,
            //       "targetFile": null
            //     },
            //     {
            //       "id": "846010369483902976",
            //       "key": "vrkey__13306138126_1_1690810157000_1",
            //       "deviceId": "13306138126",
            //       "vehicleId": "748032610971848704",
            //       "fileDate": "2023-07-31 00:00:00",
            //       "channel": 1,
            //       "startTime": "2023-07-31 21:29:17",
            //       "endTime": "2023-07-31 23:29:29",
            //       "alarmType": "0000000000000000",
            //       "dataType": 0,
            //       "dataRate": 1,
            //       "storageType": 1,
            //       "fileSize": 1722228045,
            //       "uploadStatus": "noupload",
            //       "uploadingTime": null,
            //       "uploadedTime": null,
            //       "orderNumber": null,
            //       "sourceFile": null,
            //       "targetFile": null
            //     },
            //     {
            //       "id": "846017919084302336",
            //       "key": "vrkey__13306138126_1_1690817368000_1",
            //       "deviceId": "13306138126",
            //       "vehicleId": "748032610971848704",
            //       "fileDate": "2023-07-31 00:00:00",
            //       "channel": 1,
            //       "startTime": "2023-07-31 23:29:28",
            //       "endTime": "2023-07-31 23:59:59",
            //       "alarmType": "0000000000000000",
            //       "dataType": 0,
            //       "dataRate": 1,
            //       "storageType": 1,
            //       "fileSize": 437114784,
            //       "uploadStatus": "noupload",
            //       "uploadingTime": null,
            //       "uploadedTime": null,
            //       "orderNumber": null,
            //       "sourceFile": null,
            //       "targetFile": null
            //     }
            ]
        }
    },
    data() {
        return {
            andChannel: [],
            timeScaleAll: {},//obj
            timetwoMinuteScaleAll: {},
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            itemTime: '00:00',
            timerId: '',
            intervalID: '',
            scrollList: []
        }
    },
    watch: {
        timeSection: {
            deep: true,
            immediate: false,
            handler(newVal) {
                console.log('更新', newVal)
                this.getfindResByDateAndChannel()
            }
        }
    },
    created() {
        this.initTimeScale()
        this.getfindResByDateAndChannel()
    },
    methods: {
        /**return obj */
        initTimeScale() {
            for (let hour = 0; hour < 24; hour++) {
                for (let minute = 0; minute < 60; minute++) {
                    for (let second = 0; second < 60; second++) {
                        let timestamp = hour * 3600 + minute * 60 + second;
                        let paddedHour = hour.toString().padStart(2, '0');
                        let paddedMinute = minute.toString().padStart(2, '0');
                        let paddedSecond = second.toString().padStart(2, '0');
                        let itemTime = `${paddedHour}:${paddedMinute}:${paddedSecond}`;
                        let oneMinute = timestamp % 60 === 0;
                        let twoMinute = timestamp % 120 === 0;
                        let showMinuteScale = minute % 10 === 0 && second === 0;
                        this.timeScaleAll[timestamp] = { timestamp, itemTime, oneMinute, twoMinute, showMinuteScale, isvideo: false }
                        if (twoMinute) {
                            this.timetwoMinuteScaleAll[timestamp] = { itemTime, oneMinute, twoMinute, showMinuteScale, isvideo: false }
                        }
                    }
                }
            }
            console.log(this.timeScaleAll)
        },
        toYYMM(e) {
            let timeArr = e.split(':')
            return `${timeArr[0]}:${timeArr[1]}`
        },
        upper: function (e) {
            console.log(e)
        },
        lower: function (e) {
            console.log(e)
        },
        scroll: function (e) {
            console.log('scroll', e)
            this.scrollList.push(e)
            this.old.scrollTop = e.detail.scrollTop
            this.getScrollTiem(e.detail.scrollTop)
        },
        closeintervalID: function () {
            clearInterval(this.intervalID)
            console.log('关闭定时器')
        },
        //设置竖向滚动条位置
        goTop: function (e) {
            this.$nextTick(function () {
                this.scrollTop = e
                this.getScrollTiem(e)
            });
        },
        /**
         * 计算滚动到多少分钟
         * @param {Number} scrollTop 4 === 1分钟
         * 
         */
        getScrollTiem(scrollTop) {
            let minute = Math.round(scrollTop / 4 * 60)
            if (this.timeScaleAll[minute]) {
                this.itemTime = this.timeScaleAll[minute].itemTime
            } else {
                this.itemTime = '23:59:59'
            }

            //手动拖动
            if (this.timerId) clearTimeout(this.timerId);
            this.timerId = setTimeout(() => {
                if (this.scrollList.length > 2) {
                    clearInterval(this.intervalID)
                    this.isPlayable(minute)
                }
                this.scrollList = []
            }, 1000);
        },
        //重置
        resetComponents() {
            this.andChannel = []
            this.scrollTop = 0
            this.old = {
                scrollTop: 0
            }
            this.itemTime = '00:00'
            this.scrollList = []
            if (this.timerId) clearTimeout(this.timerId);
            clearInterval(this.intervalID)
            console.log('进度条重置完成',this.itemTime)
        },
        // 显示可回放区域
        getfindResByDateAndChannel() {
            this.resetComponents();
            let data = this.timeSection
            for (let key in data) {
                console.log(data[key].startTime, '-', data[key].endTime)
                let startTimeNum = this.getSeconds(data[key].startTime)
                let endTimeNum = this.getSeconds(data[key].endTime)
                let startTop = Math.round(startTimeNum * 4 / 60)
                let endTop = Math.round(endTimeNum * 4 / 60)
                this.andChannel.push({ startTop, endTop, startTimeNum, endTimeNum, ...data[key] })
            }
            console.log('可视时间段', this.andChannel[0]);
            // this.$emit('scrollEnd', this.andChannel[0].startTime)
            this.isPlayable(this.andChannel[0].startTimeNum)
        },
        //计时器滚动
        setScrollTop(seconds) {
            console.log('重置计时器')
            this.intervalID = setInterval(() => {
                let scrollTop = seconds * 4 / 60
                this.goTop(scrollTop)
                seconds++
                // console.log('计时')
            }, 1000);

        },
        // 获取秒
        getSeconds(time) {
            let dayjsInstance = this.dayjs
            let startTime = dayjsInstance(time).format("HH:mm:ss");
            const datetimeString = dayjsInstance().format("YYYY-MM-DD") + " " + startTime;
            const momentObj = dayjsInstance(datetimeString, "YYYY-MM-DD HH:mm:ss");
            const secondsOfDay = momentObj.diff(dayjsInstance().startOf('day'), 'second'); // 注意这里使用 'second' 而非 'seconds'
            return secondsOfDay;
            //   let startTime = moment(time).format("HH:mm:ss");
            //   const datetimeString = moment().format("YYYY-MM-DD") + " " + startTime;
            //   const momentObj = moment(datetimeString, "YYYY-MM-DD HH:mm:ss");
            //   const secondsOfDay = momentObj.diff(moment().startOf('day'), 'seconds');
            //   return secondsOfDay
        },
        /**
          * 判断是否在有效视频段内
          * @param {Number} seconds 秒
          */
        isPlayable(seconds, isemit) {
            console.log('拖动',seconds)
            // 设置初始进度时间 
            const andChannel = this.andChannel
            let allSection = []
            for (const element of andChannel) {
                if (element.startTimeNum <= seconds && seconds <= element.endTimeNum) {
                    
                    let startTimeHHmmss = this.dayjs(element.startTime).format("HH:mm:ss");
                    allSection.push({ ...element, itemTime: this.itemTime==='00:00' ? startTimeHHmmss : this.itemTime })
                }
            }
            if (allSection.length <= 0) return;
            // 重叠的情况下取最后一段
            if (!isemit) {
                this.$emit('scrollEnd', allSection[allSection.length - 1])
            }
            this.setScrollTop(seconds)
        }
    }
}
</script>

<style scoped lang="scss">
.content {

    position: relative;

    .link {
        position: absolute;
        width: 100%;
        height: 4rpx;
        background: #FF7F00;
        top: 60rpx;
        z-index: 4;
    }

    .itemTime {
        position: absolute;
        top: 40rpx;
        left: 180rpx;
        z-index: 8;
        font-size: 20rpx;
    }


    .scroll-Y {
        height: 528rpx;
        // border: 2px solid #000000;
    }

    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
    }

    .interval {
        width: 20rpx;
        height: 56rpx;
        background: #CFE7FF;
        margin-left: 144rpx;

    }

    .interval-but {
        width: 20rpx;
        height: 486rpx;
        background: #CFE7FF;
        margin-left: 144rpx;
        position: relative;
        top: -10px;
    }

    .placeholder {
        height: 400rpx;
        width: 20rpx;
    }

    .scroll-view-item {
        width: 20rpx;
        margin-left: 144rpx;
        background: #CFE7FF;
        position: relative;

        .andChannel {
            position: absolute;
            width: 100%;
            // height: 52px;
            // top: 10px;
            background: #3C9CFF;
        }

        .twoMinute {
            width: 20rpx;
            height: 2px;
            box-sizing: border-box;
            position: relative;
            left: -20rpx;
            background: #CFE7FF;
            margin-bottom: 6px;
            border: 0;

            .showMinuteScale {
                position: absolute;
                left: -90rpx;
                width: 66rpx;
                font-size: 24rpx;
                zoom: 0.8;
            }
        }
    }

    .scroll-view-item_H {
        display: inline-block;
        width: 100%;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
        font-size: 36rpx;
    }
}
</style>