<template>
  <el-dialog
    v-dialogDrag
    class="chengdou-03__systerm route-setting"
    :title="title"
    :visible.sync="show"
    width="460px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <el-row>
      <el-col :span="2"><span class="item-lable">车站</span></el-col>
      <el-col :span="6">
        <el-input v-model="stationName" size="small" disabled />
      </el-col>
      <el-col :span="4" :offset="1"><span class="item-lable">始端信号机</span></el-col>
      <el-col :span="6">
        <el-input v-model="signalName" size="small" disabled />
      </el-col>
    </el-row>
    <div class="route-table-box">
      <span class="route-table-tip">进路列表</span>
      <el-table ref="table" :data="tempData" border :cell-style="tableStyle" style="width: 99%;" size="mini" height="90" highlight-current-row @row-click="clickEvent">
        <el-table-column :id="domIdChoose" prop="name" label="进路" style="margin-left:30px;" width="150px">
          <template slot-scope="scope">
            <div :style="{color: scope.row.turnBack? '#00FFFF':'#000000'}">
              {{ handleRouteName(scope.row.name) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :id="domIdChoose" prop="startSignalCode" label="方向" style="margin-left: 30px">
          <template slot-scope="scope">
            <div :style="{color: scope.row.turnBack? '#00FFFF':'#000000'}">
              {{ handleDirection(scope.row.startSignalCode) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :id="domIdChoose" prop="turnBack" label="属性" style="margin-left:30px">
          <template slot-scope="scope">
            <div :style="{color: scope.row.turnBack? '#00FFFF':'#000000'}">
              {{ scope.row.turnBack ? '折返': '直通' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :id="domIdChoose" prop="controlType" label="控制" style="margin-left:30px">
          <template slot-scope="scope">
            <div :style="{color: scope.row.turnBack? '#00FFFF':'#000000'}">
              {{ scope.row.atsControl == '0' ? '人工' : '自动' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row justify="center" style="margin-top: 40px">
      <el-col :span="12" :offset="12">
        <el-button
          :id="domIdConfirm"
          type="primary"
          :loading="loading"
          :disabled="commitDisabled"
          @click="commit"
        >执行</el-button>
        <el-button :id="domIdCancel" @click="cancel">取 消</el-button>
      </el-col>
    </el-row>
    <notice-info ref="noticeInfo" pop-class="chengdou-03__systerm" />
    <!--<password-box ref="passwordBox" @checkOver="passWordCommit" />-->
  </el-dialog>
</template>

<script>
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import CancelMouseState from '@/mixin/CancelMouseState';
import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
// import PasswordBox from './childDialog/passwordInputBox.vue';
import CMD from '@/scripts/cmdPlugin/CommandEnum';
import { mapGetters } from 'vuex';

export default {
    name: 'RouteSelection',
    components: {
        NoticeInfo
        // PasswordBox
    },
    mixins: [
        CancelMouseState
    ],
    data() {
        return {
            tempData: [],
            beforeSectionList: [],
            dialogShow: false,
            loading: false,
            selected: null,
            operation: '',
            display: true,
            stationName: '',
            signalName: '',
            tableStyle: {
                'border-bottom': 'none'
            },
            commitDisabled:true,
            controlTypeNameMap: {
                '01': '折返',
                '02': '直通'
            },
            row: ''
        };
    },
    computed: {
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        domIdCancel() {
            return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
        },
        domIdChoose() {
            return this.dialogShow ? OperationEvent.Signal.guide.choose.domId : '';
        },
        domIdConfirm() {
            return this.dialogShow ? OperationEvent.Signal.guide.confirm.domId : '';
        },
        title() {
            return '办理引导进路';
        },
        ...mapGetters('map', [
            'signalList',
            'mapConfig'
        ])
    },
    methods: {
        getProtectedSectionName(row) {
            let name = '';
            if (row &&
                    row.overlapSectionList &&
                    row.overlapSectionList &&
                    row.overlapSectionList.length > 0) {

                const protect = row.overlapSectionList[0];
                name = `${protect.name}`;
                const station = this.$store.getters['map/getDeviceByCode'](protect.stationCode);
                if (station) {
                    name = `${name}(${station.name})`;
                }
            }
            return name;
        },
        handleRouteName(name) {
            return name.replace(/-/, '-->');
        },
        handleDirection(signalCode) {
            let signalDirection = '';
            this.signalList.some(item => {
                if (item.code === signalCode) {
                    signalDirection = item.right;
                    return true;
                }
            });
            if ((signalDirection && this.mapConfig.upRight) || (!signalDirection && !this.mapConfig.upRight)) {
                return '上行';
            } else {
                return '下行';
            }
        },
        doShow(operate, selected, tempData) {
            this.selected = selected;
            this.commitDisabled = true;
            // 如果不是断点激活，而是第一次显示，则需要设置初始值
            if (!this.dialogShow) {
                this.signalName = '';
                this.stationName = '';
                if (selected && selected._type.toUpperCase() === 'Signal'.toUpperCase()) {
                    this.signalName = selected.name;
                    const station = this.$store.getters['map/getDeviceByCode'](selected.stationCode);
                    if (station) {
                        this.stationName = station.name;
                    }
                }

                this.tempData = tempData || [];
                this.operation = operate.operation;
            }
            this.dialogShow = true;
            this.$nextTick(function () {
                this.$store.dispatch('training/emitTipFresh');
            });
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
            this.$refs.table.setCurrentRow();
            this.$store.dispatch('training/emitTipFresh');
        },
        clickEvent(row, event, column) {
            this.commitDisabled = false;
            this.row = row;
            if (row) {
                const operate = {
                    operation: OperationEvent.Signal.guide.choose.operation,
                    val: row.code
                };
                this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                    if (valid) {
                        this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                    }
                });
            }
        },
        // 办理引导进路
        commit() {
            if (this.row && this.row.code) {
                const operate = {
                    over: true,
                    operation: OperationEvent.Signal.guide.confirm.operation,
                    cmdType: CMD.Signal.CMD_SIGNAL_ROUTE_GUIDE,
                    param: {
                        routeCode: this.row.code
                    }
                };

                this.loading = true;
                this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                    this.loading = false;
                    if (valid) {
                        this.doClose();
                    } else {
                        this.doClose();
                        this.$refs.noticeInfo.doShow();
                    }
                }).catch(() => {
                    this.loading = false;
                    this.doClose();
                    this.$refs.noticeInfo.doShow();
                });
            }
        },
        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 scoped>
    .route-table-tip {
        position: relative !important;
        color: #3C72DF !important;
        background: #ECE9D8 !important;
        font-size: 12px;
        top: -7px;
        left: 7px;
    }

    .route-table-box {
        margin-top: 20px !important;
        line-height: 10px !important;
        border: 2px solid #FFFFFF !important;
        border-radius: 5px !important;
        z-index: 1;
        padding-bottom: 40px;
    }

    .item-lable {
        line-height: 26px !important;
        font-size: 13px;
    }
</style>
