<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="DpRunplanPane">
      <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="arriveTipNum">
          <el-input v-model="addModel.arriveTipNum" style="width:145px" />
        </el-form-item>
        <el-form-item label="到达时间:" prop="arriveTime">
          <el-time-picker v-model="addModel.arriveTime" value-format="HH:mm" format="HH:mm" style="width:145px" />
        </el-form-item>
        <el-form-item label="出发车次:" prop="leaveTipNum">
          <el-input v-model="addModel.leaveTipNum" style="width:145px" />
        </el-form-item>
        <el-form-item label="出发时间:" prop="leaveTime">
          <el-time-picker v-model="addModel.leaveTime" value-format="HH:mm" format="HH:mm" 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: 'AddRunPlan',
    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,
            title:'',
            // mapStationDirectionList:[],
            isAdd:false,
            mapStationDirectionMap:{},
            enterDirList:[], // 入口列表
            outDirList:[],
            filterSectionList:[],
            addModel:{
                code:'', //  只有修改的时候需要添加此参数
                stationCode:'', // 车站编码code
                masterCode:'', // 股道code
                arriveTipNum:'', // 到达车次
                leaveTipNum:'', // 出发车次
                arriveTime:'', // 到达时间
                leaveTime:'', // 出发时间
                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: {
                // trackSectionCode: [
                //     { required: true, message: '请选择股道', trigger: 'blur' },
                //     { required: true, message: '请选择股道', trigger: 'change' }
                // ],
                arriveTipNum:[
                    { required: true, validator: validateTripNumber, trigger: 'blur' }
                    // message: '请输入到达车次'
                ],
                leaveTipNum:[
                    { required: true, validator: validateTripNumber, trigger: 'blur' }
                ]
                // message: '请输入出发车次'
                // arriveTime: [
                //     { required: true, message: '请选择到达时间', trigger: 'blur' },
                //     { required: true, message: '请选择到达时间', trigger: 'change' }
                // ],
                // departTime: [
                //     { required: true, message: '请选择出发时间', trigger: 'blur' },
                //     { required: true, message: '请选择出发时间', trigger: 'change' }
                // ],
                // arriveDirectionCode: [
                //     { required: true, message: '请选择入口', trigger: 'blur' },
                //     { required: true, message: '请选择入口', trigger: 'change' }
                // ],
                // departDirectionCode: [
                //     { required: true, message: '请选择出口', trigger: 'blur' },
                //     { required: true, message: '请选择出口', trigger: 'change' }
                // ],
                // arriveStationCode: [
                //     { required: true, message: '请选择后方车站', trigger: 'blur' },
                //     { required: true, message: '请选择后方车站', trigger: 'change' }
                // ],
                // departStationCode: [
                //     { required: true, message: '请选择前方车站', trigger: 'blur' },
                //     { required: true, message: '请选择前方车站', trigger: 'change' }
                // ]
            }
        };
    },
    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
                ? (this.isAdd ? OperationEvent.CTCCommand.addTrainFixedPath.menu.domId : OperationEvent.CTCCommand.modifyTrainFixedPath.menu.domId)
                : '';
        }
    },
    methods:{
        doShow({stationCode, filterSectionMap, mapStationDirectionMap, row}) {
            this.mapStationDirectionMap = mapStationDirectionMap;
            const mapStationDirectionList = Object.values(mapStationDirectionMap);
            this.enterDirList = mapStationDirectionList.filter(stationDirection=>{
                return stationDirection.stationCode == stationCode && (
                    stationDirection.ioDirection == 'DOWN_IN_STATION' ||
                    stationDirection.ioDirection == 'UP_IN_STATION' ||
                    stationDirection.ioDirection == 'BOTH_WAY_STATION'
                );
            });
            this.outDirList = mapStationDirectionList.filter(stationDirection=>{
                return stationDirection.stationCode == stationCode && (
                    stationDirection.ioDirection == 'DOWN_OUT_STATION' ||
                    stationDirection.ioDirection == 'UP_OUT_STATION' ||
                    stationDirection.ioDirection == 'BOTH_WAY_STATION'
                );
            });
            if (row) {
                this.addModel = Object.assign({}, row);
                this.title = '修改列车固定径路';
                this.isAdd = false;
            } else {
                this.title = '增加列车固定径路';
                this.isAdd = true;
                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 = {
                code:'', //  只有修改的时候需要添加此参数
                stationCode:'', // 车站编码code
                masterCode:'', // 股道code
                arriveTipNum:'', // 到达车次
                leaveTipNum:'', // 出发车次
                arriveTime:'', // 到达时间
                leaveTime:'', // 出发时间
                enterDirCode:'', // 车站入口
                outDirCode:'', // 出口
                fontStationCode:'', // 前方车站
                backStationCode:'', // 后方车站
                // 以下参数使用前端自己的缓存数据，取logicDataNew下面的DraftMapStationDirectionList的参数：
                //  1.runStatus接发口类型 R=接车，D=发车,NO=无2.relativeStationCode
                // 相对车站code接车时此code指的是后方车站发车时此code指的是前方车站
                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 // 车号
                }
            };
            this.$refs.form && this.$refs.form.resetFields();
            this.$store.dispatch('training/emitTipFresh');
        },
        commit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const param = Object.assign({}, this.addModel);
                    if (this.isAdd) {
                        delete param.code;
                        commitOperate(menuOperate.CTC.addTrainFixedPath, param, 3).then(({valid})=>{
                            if (valid) {
                                this.doClose();
                                this.$emit('refresh');
                            }
                        }).catch(() => {
                            this.doClose();
                            this.$emit('noticeInfo');
                        });
                    } else {
                        commitOperate(menuOperate.CTC.modifyTrainFixedPath, 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 rel="stylesheet/scss" lang="scss" scoped>
</style>
<style lang="scss">
    .DpRunplanPane{margin-bottom: 15px;}
    .DpRunplanPane .el-form-item{
        display:inline-block;
        // width:210px;
        margin-bottom:20px;
    }
    .DpRunplanPane .el-form-item__content{
        line-height:30px;
    }
    // .chengdou-03__systerm .el-dialog .expand {
    //     width: 120px;
    // }

    // .chengdou-03__systerm .el-dialog .el-button:focus span {
    //     border: 1px dashed gray;
    // }

    // .chengdou-03__systerm .el-dialog .el-button:active {
    //     border: 2px inset #E2E2E2;
    // }

    // .chengdou-03__systerm .el-dialog .el-button:disabled {
    //     border: 2px inset #E2E2E2;
    // }

    // .chengdou-03__systerm .el-dialog .el-button:disabled span {
    //     border: 0px;
    // }

    // .chengdou-03__systerm .el-dialog .el-textarea {
    //     border: 2px inset #E9E9E9;
    //     border-radius: 0px;
    // }

    // .chengdou-03__systerm .el-dialog .el-textarea .el-textarea__inner {
    //     color: #000;
    //     background: #fff !important;
    //     border: 0px;
    //     border-radius: 0px !important;
    //     box-sizing: border-box;
    // }

    // .chengdou-03__systerm .el-dialog .el-textarea.is-disabled .el-textarea__inner {
    //     background: #F0F0F0 !important;
    // }

    // .chengdou-03__systerm .el-dialog .el-table--border th.gutter {
    //     background: #EBEADB !important;
    // }

    // .chengdou-03__systerm .el-dialog .el-table {
    //     border: 2px inset #E9E9E9;
    //     color: #000 !important;
    // }

    // .chengdou-03__systerm .el-dialog .el-table .cell {
    //     height: 22px;
    //     line-height: 22px;
    // }

    // .chengdou-03__systerm .el-dialog .el-table th.is-leaf {
    //     background: #F0F0F0 !important;
    //     border-right: 1px solid #BDBDBD !important;
    //     border-bottom: 1px solid #BDBDBD !important;
    //     color: #000 !important;
    //     height: 20px !important;
    //     padding: 0px;
    // }

    // .chengdou-03__systerm .el-dialog .el-table tr td {
    //     height: 20px !important;
    //     padding: 0px;
    // }

    // .chengdou-03__systerm .el-dialog .el-table .el-table__empty-text {
    //     top: 15px !important;
    // }

    // .chengdou-03__systerm .el-dialog .current-row>td {
    //     background: #3399FF !important;
    //     color: #fff !important;
    // }

    .datie-02__systerm .el-dialog .el-checkbox__inner {
        border: 1px inset #dcdfe6 !important;
    }

    .datie-02__systerm .el-dialog .el-checkbox__label {
        color: #000 !important;
            padding-left: 5px;
      vertical-align: top;
      line-height: 23px;
    }

    .datie-02__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__inner {
        background: #E6E6E6 !important;
    }

    .datie-02__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__label {
        color: #C5C9CC !important;
    }

    .datie-02__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
        background: #fff !important;
        border: 1px inset #dcdfe6 !important;
    }

    .datie-02__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner::after {
        position: absolute;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        content: "";
        border: 1px solid #000;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        top: 1px;
    }
    .eachAppendData{
      display:inline-block;
    }

    // .chengdou-03__systerm .el-dialog .el-radio__inner {
    //     border: 1px inset #dcdfe6 !important;
    // }

    // .chengdou-03__systerm .el-dialog .el-radio__label {
    //     color: #000 !important;
    // }

    // .chengdou-03__systerm .el-dialog .el-radio__input.is-checked .el-radio__inner {
    //     background: #fff !important;
    //     border: 1px inset #dcdfe6 !important;
    // }

    // .chengdou-03__systerm .el-dialog .el-radio__input.is-checked .el-radio__inner::after {
    //     width: 4px;
    //     height: 4px;
    //     border-radius: 100%;
    //     background-color: #000 !important;
    //     position: absolute;
    //     left: 50%;
    //     top: 50%;
    // }

    // .chengdou-03__systerm .el-dialog .el-radio.is-disabled .el-radio__inner {
    //     background: #E6E6E6 !important;
    // }

    // .chengdou-03__systerm .el-dialog .el-radio.is-disabled .el-radio__label {
    //     color: #C5C9CC !important;
    // }

    // .chengdou-03__systerm .el-dialog .base-label {
    //     background: rgba(0, 0, 0, x);
    //     position: relative;
    //     left: -15px;
    //     top: -18px;
    // }

    // .chengdou-03__systerm .el-dialog .notice {
    //     margin-left: 62px;
    //     line-height: 30px;
    // }

    // .chengdou-03__systerm .el-dialog .button-group {
    //     margin-top: 20px;
    // }
</style>
