<template>
  <el-dialog
    v-dialogDrag
    class="haerbin-01__systerm"
    :title="title"
    :modal="false"
    width="600px"
    :visible.sync="show"
    :before-close="doClose"
  >
    <div style="padding: 0 10px;">
      <el-row>
        <span style="color:#000;font-size: 16px;font-weight: bold;">选择列车</span>
        <hr style="display: inline-block;width: 480px;">
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :span="11" style="height: 28px;line-height: 28px;">
          <el-radio v-model="train" label="all">所有列车</el-radio>
        </el-col>
        <el-col :span="4" style="height: 28px;line-height: 28px;text-align: right;">
          <div>当前状态：</div>
        </el-col>
        <el-col :span="9">
          <el-input v-model="input" size="mini" :disabled="true" placeholder="请输入内容" />
        </el-col>
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :span="4" style="height: 28px;line-height: 28px;">
          <el-radio v-model="train" label="one">单列车号</el-radio>
        </el-col>
        <el-col :span="7">
          <el-select v-model="trainCode" :disabled="train !== 'one'" style="width: 160px" size="mini" placeholder="请选择">
            <el-option
              v-for="item in trainList"
              :key="item.code"
              :label="item.code"
              :value="item.code"
            />
          </el-select>
        </el-col>
        <el-col :span="4" style="height: 28px;line-height: 28px;text-align: right;">
          <div>当前状态：</div>
        </el-col>
        <el-col :span="9">
          <el-input v-model="input" size="mini" :disabled="true" placeholder="请输入内容" />
        </el-col>
      </el-row>
      <el-row style="padding: 5px 0;">
        <span style="color:#000;font-size: 16px;font-weight: bold;">选择调度模式</span>
        <hr style="display: inline-block;width: 170px;">
        <span style="color:#000;font-size: 16px;font-weight: bold;">调整行车间隔</span>
        <hr style="display: inline-block;width: 170px;">
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :span="12" style="height: 28px;line-height: 28px;">
          <el-radio v-model="atrMode" label="TIME_TABLE_REGULATION">时刻表调度</el-radio>
        </el-col>
        <el-col :span="6" style="height: 28px;line-height: 28px;">
          <el-radio v-model="intervalMode" :disabled="true">列车个数</el-radio>
        </el-col>
        <el-col :span="6">
          <el-input-number v-model="trainNumber" size="mini" :min="0" :max="999" :disabled="true" controls-position="right" label="列车个数" />
        </el-col>
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :offset="12" :span="6" style="height: 28px;line-height: 28px;">
          <el-radio v-model="intervalMode" :disabled="true">间隔时间（秒）</el-radio>
        </el-col>
        <el-col :span="6">
          <el-input-number v-model="trainInterval" size="mini" :disabled="true" :min="0" :max="999" controls-position="right" label="间隔时间" />
        </el-col>
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :span="12" style="height: 28px;line-height: 28px;">
          <el-radio v-model="atrMode" label="HEADWAY_REGULATION_FRONT">列车间隔调度-前调</el-radio>
        </el-col>
        <el-col :span="12">
          <el-button :disabled="true" style="height: 28px;width: 260px;">计算</el-button>
        </el-col>
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :span="12">
          <el-radio v-model="atrMode" label="HEADWAY_REGULATION_FRONT_AND_BACK">列车间隔调度-前调+后调</el-radio>
        </el-col>
        <el-col :span="2" style="height: 28px;line-height: 28px;">
          <span>最小</span>
        </el-col>
        <el-col :span="5">
          <el-input v-model="input" :disabled="true" size="mini" />
        </el-col>
        <el-col :span="4" :offset="1">
          <el-input v-model="input" :disabled="true" size="mini" />
        </el-col>
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :span="2" :offset="12" style="height: 28px;line-height: 28px;">
          <span>最小</span>
        </el-col>
        <el-col :span="5">
          <el-input v-model="input" size="mini" :disabled="true" />
        </el-col>
        <el-col :span="4" :offset="1">
          <el-input v-model="input" size="mini" :disabled="true" />
        </el-col>
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :span="12" style="height: 28px;line-height: 28px;">
          <el-radio v-model="atrMode" label="REGULATION_OFF">关闭自动调度</el-radio>
        </el-col>
        <el-col :span="2" style="height: 28px;line-height: 28px;">
          <span>最大</span>
        </el-col>
        <el-col :span="5">
          <el-input v-model="input" size="mini" :disabled="true" />
        </el-col>
        <el-col :span="4" :offset="1">
          <el-input v-model="input" size="mini" :disabled="true" />
        </el-col>
      </el-row>
      <el-row style="padding: 5px 0">
        <span style="color:#000;font-size: 16px;font-weight: bold;">选择时间项（人工调度）</span>
        <hr style="display: inline-block;width: 370px;">
      </el-row>
      <el-row style="padding: 5px;">
        <el-col :span="4">
          <el-radio v-model="timeTerm" :disabled="atrMode !== 'REGULATION_OFF'" label="stop" @change="termChange">停站时间</el-radio>
          <el-radio v-model="timeTerm" :disabled="atrMode !== 'REGULATION_OFF'" label="driving" @change="termChange">行驶时间</el-radio>
          <el-radio v-model="timeTerm" :disabled="atrMode !== 'REGULATION_OFF'" label="run" @change="termChange">不停/停站</el-radio>
        </el-col>
        <el-col :span="20">
          <el-table v-if="timeTerm === 'stop'" ref="table1" :data="tableData1" style="width: 100%" height="80">
            <el-table-column prop="direction" label="方向" />
            <el-table-column prop="name" label="站名" />
            <!--<el-table-column prop="time" label="时间" />-->
            <el-table-column label="时间">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.time" size="mini" :min="-1" :controls="false" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column prop="timeRange" label="推荐时间" />
          </el-table>
          <el-table v-else-if="timeTerm === 'driving'" ref="table2" :data="tableData2" style="width: 100%" height="80">
            <el-table-column prop="follow" label="从" />
            <el-table-column prop="to" label="至" />
            <!--<el-table-column prop="time" label="时间" />-->
            <el-table-column label="时间">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.time" size="mini" :min="-1" :controls="false" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column prop="timeRange" label="推荐时间" />
          </el-table>
          <el-table v-else-if="timeTerm === 'run'" ref="table3" :data="tableData3" style="width: 100%" height="80">
            <el-table-column prop="direction" label="方向" />
            <el-table-column prop="name" label="站名" />
            <el-table-column label="不停">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.stop" />
              </template>
            </el-table-column>
          </el-table>
          <el-table v-else ref="table4">
            <el-table-column prop="follow" label="从" />
            <el-table-column prop="to" label="至" />
            <el-table-column prop="time" label="时间" />
            <el-table-column prop="timeRange" label="推荐时间" />
          </el-table>
        </el-col>
      </el-row>
      <div>
        <el-button style="width: 100px;height: 28px;margin-right: 103px;">显示列车信息</el-button>
        <el-button style="width: 100px;height: 28px;" @click="commit">执行</el-button>
        <el-button style="width: 100px;height: 28px;" @click="reset">重设</el-button>
        <el-button style="width: 100px;height: 28px;" @click="doClose">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import CMD from '@/scripts/cmdPlugin/CommandEnum';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
export default {
    name:'ATRDialog',
    data() {
        return {
            train: 'all',
            trainCode: '',
            atrMode: 'REGULATION_OFF',
            intervalMode: '',
            trainInterval: '',
            trainNumber: '',
            tableData: [],
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            input: '',
            timeTerm: 'stop',
            sortStationList: [],
            noStopList: [],
            dialogShow:false
        };
    },
    computed: {
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        title() {
            return '时刻表';
        },
        ...mapGetters('map', [
            'trainList',
            'stationList',
            'stationStandList'
        ])
    },
    watch: {
        train(val) {
            if (val === 'all') {
                this.tableData1.forEach(item => {
                    const stand = this.$store.getters['map/getDeviceByCode'](item.code);
                    item.time = stand.parkingTime;
                });
            } else if (val === 'one' && this.trainCode) {
                this.tableData1.forEach(item => {
                    const stand = this.$store.getters['map/getDeviceByCode'](item.code);
                    item.time = stand.parkingTimeMap[this.trainCode];
                });
            }
        },
        trainCode(val) {
            if (this.train === 'one') {
                this.tableData1.forEach(item => {
                    const stand = this.$store.getters['map/getDeviceByCode'](item.code);
                    item.time = stand.parkingTimeMap[val];
                });
            }
        },
        atrMode(val) {
            if (val !== 'REGULATION_OFF') {
                this.timeTerm = '';
            }
        }
    },
    mounted() {

    },
    methods: {
        initData() {
            this.sortStationList = [...this.stationList];
            this.sortStationList.sort((station1, station2) => {
                return station1.sn - station2.sn;
            });
            const standMap = {};
            this.stationStandList.forEach(stand => {
                if (standMap[stand.stationCode]) {
                    standMap[stand.stationCode].push(stand);
                } else {
                    standMap[stand.stationCode] = [stand];
                }
            });
            for (let i = 0; i < this.sortStationList.length; i++) {
                const standList = standMap[this.sortStationList[i].code];
                if (!standList) {
                    continue;
                }
                let rightStand = '';
                let leftStand = '';
                standList.forEach(stand => {
                    if (stand.right) {
                        rightStand = this.$store.getters['map/getDeviceByCode'](stand.code);
                    } else {
                        leftStand = this.$store.getters['map/getDeviceByCode'](stand.code);
                    }
                });
                this.tableData1.push({ direction: '>', name: this.sortStationList[i].name, time: rightStand.parkingTime, timeRange: '020-060', code: rightStand.code });
                this.tableData1.push({ direction: '<', name: this.sortStationList[i].name, time: leftStand.parkingTime, timeRange: '020-060', code: leftStand.code });
                this.tableData3.push({ direction: '>', name: this.sortStationList[i].name, stop: false, code: rightStand.code });
                this.tableData3.push({ direction: '<', name: this.sortStationList[i].name, stop: false, code: leftStand.code });
                if (i === this.sortStationList.length - 1) {
                    this.tableData2.push({ follow: '>' + this.sortStationList[i].name, to: '<' + this.sortStationList[i].name, time: 0, timeRange: '060-300', code: rightStand.code });
                    this.tableData2.push({ follow: '<' + this.sortStationList[i].name, to: '<' + this.sortStationList[i - 1].name, time: 0, timeRange: '060-300', code: leftStand.code });
                } else if ( i === 0 ) {
                    this.tableData2.push({ follow: '<' + this.sortStationList[i].name, to: '>' + this.sortStationList[i].name, time: 0, timeRange: '060-300', code: rightStand.code });
                    this.tableData2.push({ follow: '>' + this.sortStationList[i].name, to: '>' + this.sortStationList[i + 1].name, time: 0, timeRange: '060-300', code: leftStand.code });
                } else {
                    this.tableData2.push({ follow: '<' + this.sortStationList[i].name, to: '<' + this.sortStationList[i - 1].name, time: 0, timeRange: '060-300', code: rightStand.code });
                    this.tableData2.push({ follow: '>' + this.sortStationList[i].name, to: '>' + this.sortStationList[i + 1].name, time: 0, timeRange: '060-300', code: leftStand.code });
                }
            }
        },
        doShow() {
            this.initData();
            this.dialogShow = true;
        },
        doClose() {
            this.dialogShow = false;
        },
        reset() {
            this.train = '';
            this.atrMode = '';
            this.timeTerm = '';
        },
        commit() {
            const param = {
                groupNumber: this.train === 'one' ? this.trainCode : '',
                parkingAlwaysValid: true,
                regulationParam: null,
                regulation: this.atrMode
            };
            if (this.atrMode === 'REGULATION_OFF') {
                if (this.timeTerm === 'stop') {
                    const standParkingTime = {};
                    this.tableData1.forEach(item => {
                        standParkingTime[item.code] = item.time;
                    });
                    param.regulationParam = {
                        parkTimeMap: standParkingTime,
                        runTimeMap: null,
                        skipMap: null
                    };
                } else if (this.timeTerm === 'driving') {
                    const runTimeMap = {};
                    this.tableData2.forEach(item => {
                        runTimeMap[item.code] = item.time;
                    });
                    param.regulationParam = {
                        parkTimeMap: null,
                        runTimeMap: runTimeMap,
                        skipMap: null
                    };
                } else if (this.timeTerm === 'run') {
                    const skipMap = {};
                    this.tableData3.forEach(item => {
                        skipMap[item.code] = item.stop;
                    });
                    param.regulationParam = {
                        parkTimeMap: null,
                        runTimeMap: null,
                        skipMap: skipMap
                    };
                }
            }

            const step = {
                cmdType: CMD.Train.CMD_TRAIN_REGULATION,
                operate: OperationEvent.StationStand.setStopTime.confirm,
                param: param,
                over:true
            };

            this.$store.dispatch('training/nextNew', step).then(({ valid }) => {
                if (valid) {
                    this.dialogShow = false;
                }
            }).catch((error) => {
                console.error(error);
                if (error && error.code == '10017') {
                    this.$message.error(error.message);
                } else {
                    this.$message.error('命令执行失败');
                }
            });
        },
        termChange(val) {
        }
    }
};
</script>
<style lang="scss" scoped>
.actualTimetable{padding:0px 15px;}
.actualTimetableT{width:100%;position: relative;}
.defaultTimetableT{width:100%;position: relative;overflow:hidden;}
.actualTimetableTtext,.defaultTimetableTtext{position:absolute;height: 20px;padding-right:5px;font-size:15px;color: #676767;background:#e2e2e2;font-weight: bold;}
.actualTimetableTLine,.defaultTimetableTLine{display:inline-block;margin-left:10px;width:100%;border-bottom: 1px #A0A0A0 solid;vertical-align: top;height: 9px;}
.actualTimetableForm{}
.actualTimeFormEach{margin-top: 10px;}
.actualTimeFormEach span{font-size:15px;color: #151515;}
.actualTimeFormValue{
    font-size:15px;
    color: #151515;
    display: inline-block;
    padding: 5px 10px;
    border: 1px #A2A2A2 solid;
    width: 810px;
}
.defaultTimetable{
    padding:15px 15px 0px 15px;
}
// .defaultTimetab{
//     padding: 10px 15px 10px 15px;
// }
.defaultTimetableM{margin-top:10px;}
.defaultTimetableB{display:inline-block;width:100%;margin-top: 10px;}
#defaultClearSele{margin-right:10px;width:90px;}
#defaultClearAll{width:90px;}
#defaultShowTime{float:right;width:90px;}
.defaultTimetableBtn{
    background:transparent;
    border:1px#9C9C9C solid ;
    height:auto ;
    outline:none;
    text-align:center;
    display: inline-block;
    padding:4px 0px;
    color:#090909;
    cursor: pointer;
}
.defaultTimetableBtn.disabled{border:1px #A9A9A9 solid ;color: #A7A7A7; cursor: no-drop;}
.ttlButtonGroup{
    border-top: 1px #6d6d6d solid;
    margin-top: 10px;
    padding: 10px 15px;
}
#changeActual{margin-right:10px;width:120px}
#changeDefault{width:120px;margin-right:175px;}
#settingTimetable{width:130px;margin-right:10px;}
#resetTimetable{width:130px;margin-right:10px;}
#closeTimetable{width:130px;}
</style>
<style lang="scss">
.ttl.haerbin-01__systerm .el-dialog .el-dialog__body{
    background: #E2E2E2;
    padding:20px 0px 10px 0px;
}
.defaultTimetab.el-table .cell{
    padding-top:5px;padding-bottom:5px;
}
</style>
