<template>
  <data-table
    id="PlanStatusBar"
    ref="dataTable"
    :height="height-11"
    :config="stationListConfig"
    :close="false"
    :style="{top: maxmini? maxTop-110+'px':maxTop-21+'px'}"
    @touch="touch"
  />
</template>

<script>
import DataTable from './menusPlan/components/dataTable';
import { formatTime, formatName } from '@/utils/runPlan';

export default {
    name: 'PlanStatusBar',
    components: {
        DataTable
    },
    props: {
        maxTop: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            maxmini: true,
            height: 100,
            stationListConfig: {
                data: [],
                showClose: true,
                highlightCurrentRow: true,
                columns: [
                    {
                        prop: 'stationName',
                        label: '站台',
                        width: 400
                    },
                    {
                        prop: 'startTime',
                        label: '到点'
                    },
                    {
                        prop: 'stopTime',
                        label: '停站时间'
                    },
                    {
                        prop: 'endTime',
                        label: '发点'
                    },
                    {
                        prop: 'level',
                        label: '运行等级'

                    }
                ]
            }
        };
    },
    watch: {
        '$store.state.runPlan.selected': function (select) {
            this.stationListConfig.data = [];
            const serviceObj = this.$store.state.runPlan.editData[select.serviceNumber];
            if (serviceObj) {
                const trainMap = serviceObj.trainMap;
                if (trainMap) {
                    const trainObj = trainMap[select.tripNumber];
                    if (trainObj) {
                        const stationTimeList = trainObj.stationTimeList;
                        if (stationTimeList && stationTimeList.length) {
                            stationTimeList.forEach((elem, index) => {
                                const stationObj = {
                                    stationName: formatName(elem.stationCode),
                                    startTime: formatTime(index == 0 ? null : stationTimeList[index - 1].secondTime),
                                    stopTime: formatTime(index == 0 ? null : elem.secondTime - stationTimeList[index - 1].secondTime),
                                    endTime: formatTime(elem.secondTime),
                                    level: ''
                                };
                                this.stationListConfig.data.push(stationObj);
                            });
                        }
                    }
                }
            }
        }
    },
    methods: {
        touch(maxmini) {
            this.maxmini = maxmini;
            this.$emit('setPosition');
        }
    }
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    @import "src/styles/mixin.scss";

    #PlanStatusBar {
        z-index: 5;
        position: absolute;
        width: 100%;
    }
</style>
