<template>
  <el-dialog
    v-dialogDrag
    class="datie-02__systerm"
    :title="title"
    :visible.sync="show"
    width="500px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div class="BatchTrainFxPath">
      <el-form ref="form" :model="addModel" label-width="80px" :rules="rules">
        <el-form-item label="车站:" prop="stationCode">
          <el-select v-model="addModel.stationCode" placeholder="" style="width:145px" disabled>
            <el-option
              v-for="item in stationList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="股道:" prop="masterCode">
          <el-select v-model="addModel.masterCode" placeholder="" style="width:145px">
            <el-option
              v-for="item in filterSectionList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车次前缀:" prop="prefixTrain">
          <el-input v-model="addModel.prefixTrain" style="width:145px" />
        </el-form-item>
        <el-form-item label="开始车次:" prop="startTipNum">
          <el-input v-model="addModel.startTipNum" style="width:145px;" />
        </el-form-item>
        <el-form-item label="结束车次:" prop="endTipNum" style="margin-left:230px">
          <el-input v-model="addModel.endTipNum" style="width:145px;" />
        </el-form-item>
        <el-form-item label="入口:" prop="enterDirCode">
          <el-select v-model="addModel.enterDirCode" placeholder="" style="width:145px" @change="changeEnterDirCode">
            <el-option
              v-for="item in enterDirList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="后方车站:" prop="backStationCode">
          <el-select v-model="addModel.backStationCode" placeholder="" style="width:145px" disabled>
            <el-option
              v-for="item in stationList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出口:" prop="outDirCode">
          <el-select v-model="addModel.outDirCode" placeholder="" style="width:145px" @change="changeOutDirCode">
            <el-option
              v-for="item in outDirList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="前方车站:" prop="fontStationCode">
          <el-select v-model="addModel.fontStationCode" placeholder="" style="width:145px" disabled>
            <el-option
              v-for="item in stationList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="appendData" style="width:100%">
          <el-checkbox v-model="addModel.appendData.JISHU_STOP" class="eachAppendData" style="margin-right:34px">技术停点</el-checkbox>
          <el-checkbox v-model="addModel.appendData.JIAO_LING" class="eachAppendData" style="margin-right:35px">交令</el-checkbox>
          <el-checkbox v-model="addModel.appendData.JICHE" class="eachAppendData" style="margin-right:3px">机车</el-checkbox>
          <el-checkbox v-model="addModel.appendData.HUOJIAN" class="eachAppendData" style="margin-right:3px">货检</el-checkbox>
          <el-checkbox v-model="addModel.appendData.CHENGJIANG" class="eachAppendData">乘降</el-checkbox>
          <el-checkbox v-model="addModel.appendData.ZHAIGUA" class="eachAppendData" style="margin-right:3px">摘挂</el-checkbox>
          <el-checkbox v-model="addModel.appendData.HUANCHENG" class="eachAppendData" style="margin-right:3px">换乘</el-checkbox>
          <el-checkbox v-model="addModel.appendData.ZHUANGXIE" class="eachAppendData" style="margin-right: 35px;">装卸</el-checkbox>
          <el-checkbox v-model="addModel.appendData.XIWU" class="eachAppendData" style="margin-right:3px">吸污</el-checkbox>
          <el-checkbox v-model="addModel.appendData.DAOKOU" class="eachAppendData" style="margin-right:3px">道口</el-checkbox>
          <el-checkbox v-model="addModel.appendData.CHEHAO" class="eachAppendData">车号</el-checkbox>
          <el-checkbox v-model="addModel.appendData.SHANGSHUI" class="eachAppendData" style="margin-right:3px">上水</el-checkbox>
          <el-checkbox v-model="addModel.appendData.LIEJIAN" class="eachAppendData" style="margin-right:3px">列检</el-checkbox>
          <el-checkbox v-model="addModel.appendData.ZONGKONG" class="eachAppendData" style="margin-right: 35px;">综控</el-checkbox>
          <el-checkbox v-model="addModel.appendData.ZHANWU" class="eachAppendData" style="margin-right:3px">站务</el-checkbox>
          <el-checkbox v-model="addModel.appendData.JIAOPIAO" class="eachAppendData" style="margin-right:3px">交票</el-checkbox>
          <el-checkbox v-model="addModel.appendData.LIEWEI" class="eachAppendData">列尾</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
    <el-row justify="center" class="button-group">
      <el-col :span="6" :offset="7">
        <el-button :id="domIdCancel" @click="cancel">取消</el-button>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-button :id="domIdConfirm " type="primary" :loading="loading" @click="commit">确定 </el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import {menuOperate, commitOperate} from '@/jmapNew/theme/components/utils/menuOperate';
export default {
    name: 'BatchTrainFxPath',
    data() {
        var validateTripNumber = (rule, value, callback) => {
            if (value) {
                const judge = /^[a-zA-Z0-9]*[\d]$/.test(value);
                if (judge) {
                    if (value.toString().length > 6 || value.toString().length < 2) {
                        callback('车次长度2-6位');
                    } else {
                        callback();
                    }
                } else {
                    callback('字母+数字,最后一位数字');
                }
            } else {
                // callback('请输入车次');
                callback();
            }
        };
        return {
            dialogShow: false,
            loading: false,
            mapStationDirectionMap:{},
            enterDirList:[], // 入口列表
            outDirList:[],
            filterSectionList:[],
            addModel:{
                stationCode:'', // 车站编码code
                masterCode:'', // 股道code
                prefixTrain:'', // 批量处理车次前缀
                startTipNum:'', // 批量处理车次开始
                endTipNum:'', // 批量处理车次结束
                enterDirCode:'', // 入口
                outDirCode:'', // 出口
                fontStationCode:'', // 前方车站
                backStationCode:'', // 后方车站
                appendData:{ // 附加数据
                    ZHUANGXIE:false, // 装卸
                    LIEJIAN:false, // 列检
                    JIAO_LING:false, // 交令
                    ZONGKONG:false, // 综控
                    XIWU:false, // 吸污
                    HUOJIAN:false, // 货检
                    CHENGJIANG:false, // 乘降
                    JISHU_STOP:false, // 技术停点
                    JIAOPIAO:false, // 交票
                    HUANCHENG:false, // 换乘
                    SHANGSHUI:false, // 上水
                    ZHANWU:false, // 站务
                    ZHAIGUA:false, // 摘挂
                    LIEWEI:false, // 列尾
                    DAOKOU:false, // 道口
                    JICHE:false, // 机车
                    CHEHAO:false // 车号
                }
            },
            rules: {
                startTipNum:[
                    { required: true, validator: validateTripNumber, trigger: 'blur' }
                    // message: '请输入到达车次'
                ],
                endTipNum:[
                    { required: true, validator: validateTripNumber, trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'stationList'
        ]),
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        domIdCancel() {
            return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
        },
        domIdConfirm() {
            return this.dialogShow ? OperationEvent.CTCCommand.batchTrainFixedPath.menu.domId : '';
        },
        title() {
            return '批量增加列车固定径路';
        }
    },
    methods:{
        doShow({stationCode, filterSectionMap, mapStationDirectionMap}) {
            this.mapStationDirectionMap = mapStationDirectionMap;
            const mapStationDirectionList = Object.values(mapStationDirectionMap);
            this.enterDirList = mapStationDirectionList.filter(stationDirection=>{
                return stationDirection.runStatus == 'R';
            });
            this.outDirList = mapStationDirectionList.filter(stationDirection=>{
                return stationDirection.runStatus == 'D';
            });
            this.addModel.stationCode = stationCode;
            this.filterSectionList = Object.values(filterSectionMap);
            this.dialogShow = true;
            this.$nextTick(function () {
                this.$store.dispatch('training/emitTipFresh');
            });
        },
        changeEnterDirCode(code) {
            const mapStationDirection = this.mapStationDirectionMap[code];
            this.addModel.backStationCode = mapStationDirection.relativeStationCode;
        },
        changeOutDirCode(code) {
            const mapStationDirection = this.mapStationDirectionMap[code];
            this.addModel.fontStationCode = mapStationDirection.relativeStationCode;
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
            this.addModel = {
                stationCode:'', // 车站编码code
                masterCode:'', // 股道code
                prefixTrain:'', // 批量处理车次前缀
                startTipNum:'', // 批量处理车次开始
                endTipNum:'', // 批量处理车次结束
                enterDirCode:'', // 入口
                outDirCode:'', // 出口
                fontStationCode:'', // 前方车站
                backStationCode:'', // 后方车站
                appendData:{ // 附加数据
                    ZHUANGXIE:false, // 装卸
                    LIEJIAN:false, // 列检
                    JIAO_LING:false, // 交令
                    ZONGKONG:false, // 综控
                    XIWU:false, // 吸污
                    HUOJIAN:false, // 货检
                    CHENGJIANG:false, // 乘降
                    JISHU_STOP:false, // 技术停点
                    JIAOPIAO:false, // 交票
                    HUANCHENG:false, // 换乘
                    SHANGSHUI:false, // 上水
                    ZHANWU:false, // 站务
                    ZHAIGUA:false, // 摘挂
                    LIEWEI:false, // 列尾
                    DAOKOU:false, // 道口
                    JICHE:false, // 机车
                    CHEHAO:false // 车号
                }
            };
        },
        commit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const param = Object.assign({}, this.addModel);
                    commitOperate(menuOperate.CTC.batchTrainFixedPath, param, 3).then(({valid})=>{
                        if (valid) {
                            this.doClose();
                            this.$emit('refresh');
                        }
                    }).catch(() => {
                        this.doClose();
                        this.$emit('noticeInfo');
                    });
                }
            });
        },
        cancel() {
            const operate = {
                operation: OperationEvent.Command.cancel.menu.operation
            };
            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                if (valid) {
                    this.doClose();
                }
            }).catch(() => { this.doClose(); });
        }
    }
};
</script>
<style lang="scss">
    .BatchTrainFxPath{margin-bottom: 15px;}
    .BatchTrainFxPath .el-form-item{
        display:inline-block;
        // width:210px;
        margin-bottom:20px;
    }
    .BatchTrainFxPath .el-form-item__content{
        line-height:30px;
    }
     .eachAppendData{
      display:inline-block;
    }
</style>
