<template>
  <el-tabs v-model="activeName" class="card" @tab-click="handleClick">
    <el-tab-pane class="view-control" :label="$t('map.property')" name="first">
      <div style="height: calc(100% - 46px);">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
        </el-scrollbar>
      </div>
      <div class="button_box">
        <el-button-group class="map-draft-group">
          <el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
          <el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
        </el-button-group>
      </div>
    </el-tab-pane>
    <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
      <div style="height: calc(100% - 46px)">
        <el-scrollbar>
          <el-form ref="oprt" :model="createModel" label-width="130px" size="mini" :rules="createRules">
            <el-form-item :label="$t('map.createModel')">
              <el-radio-group v-model="createModel.type">
                <el-radio
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.value"
                  border
                  size="mini"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="createModel.type == '01'" class="coordinate">
              <span class="title" style="width: 120px">{{ this.$t('map.startingPoint') }}</span>
              <div class="listWidth">
                <el-form-item label="x" prop="startPoint.x" label-width="25px">
                  <el-input-number v-model="createModel.startPoint.x" />
                </el-form-item>
              </div>
              <div class="listWidth">
                <el-form-item label="y" prop="startPoint.y" label-width="25px">
                  <el-input-number v-model="createModel.startPoint.y" />
                </el-form-item>
              </div>
            </div>
            <el-form-item v-if="createModel.type == '01'" label="距离长度:" prop="length">
              <el-input-number v-model="createModel.length" />
            </el-form-item>
            <el-form-item v-if="createModel.type == '02'" :label="$t('map.leftAssociatedSection')" prop="leftSectionCode">
              <el-select v-model="createModel.leftSectionCode" filterable>
                <el-option
                  v-for="item in PhysicalSectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
              <el-button
                :type="field == 'getSectionStart' ? 'danger' : 'primary'"
                size="small"
                @click="hover('getSectionStart')"
              >{{ $t('map.activate') }}</el-button>
            </el-form-item>
            <el-form-item v-if="createModel.type == '02'" :label="$t('map.rightAssociatedSection')" prop="rightSectionCode">
              <el-select v-model="createModel.rightSectionCode" filterable>
                <el-option
                  v-for="item in PhysicalSectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
              <el-button
                :type="field == 'getSectionEnd' ? 'danger' : 'primary'"
                size="small"
                @click="hover('getSectionEnd')"
              >{{ $t('map.activate') }}</el-button>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <div class="button_box">
        <el-button-group class="map-draft-group">
          <el-button type="primary" size="small" @click="create">{{ this.$t('map.newConstruction') }}</el-button>
        </el-button-group>
      </div>
    </el-tab-pane>
    <el-tab-pane class="view-control" :label="$t('map.splitMerge')" name="three">
      <div style="height: 100%;">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-form ref="oprt" :model="addModel" label-width="130px" size="mini" :rules="addRules">
            <el-form-item :label="$t('map.sectionNameColon')" prop="code">
              <el-select v-model="addModel.code" filterable>
                <el-option
                  v-for="item in PhysicalSectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
              <el-button
                :type="field === 'splitSection' ? 'danger' : 'primary'"
                size="small"
                @click="hover('splitSection')"
              >{{ $t('map.activate') }}</el-button>
            </el-form-item>
            <el-form-item :label="$t('map.breakUpNumber')" prop="splitNumber">
              <el-input-number v-model="addModel.splitNumber" :min="1" :max="addModel.splitOffsetMax" />
            </el-form-item>
            <el-form-item :label="$t('map.trainDirection')" prop="trainPosType">
              <el-select v-model="addModel.trainPosType" filterable>
                <el-option
                  v-for="item in TrainPositionTypeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button type="primary" size="big" @click="split">{{ $t('map.split') }}</el-button>
              </el-button-group>
            </el-form-item>
          </el-form>
          <el-form ref="oprt1" :model="mergeModel" label-width="130px" size="mini" :rules="mergeRules">
            <el-form-item :label="$t('map.sectionLsectioncode')" prop="lsectioncode">
              <el-select v-model="mergeModel.lsectioncode" filterable :placeholder="$t('rules.pleaseSelect')">
                <el-option
                  v-for="item in ReverseSectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
              <el-button
                :type="field === 'leftSectionCode' ? 'danger' : 'primary'"
                size="small"
                @click="hover('leftSectionCode')"
              >{{ $t('map.activate') }}</el-button>
            </el-form-item>
            <el-form-item :label="$t('map.sectionRsectioncode')" prop="rsectioncode">
              <el-select v-model="mergeModel.rsectioncode" filterable :placeholder="$t('rules.pleaseSelect')">
                <el-option
                  v-for="item in ReverseSectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
              <el-button
                :type="field === 'rightSectionCode' ? 'danger' : 'primary'"
                size="small"
                @click="hover('rightSectionCode')"
              >{{ $t('map.activate') }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button type="primary" size="big" @click="merge">{{ $t('map.merge') }}</el-button>
              </el-button-group>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
    </el-tab-pane>
    <el-tab-pane class="view-control" :label="$t('map.logicBlock')" name="four">
      <div style="height: calc(100% - 46px);">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-table :data="tableData" style="width: 80%; margin: 0 auto;">
            <el-table-column :label="$t('map.sectionPolyline')" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ $t('map.aux') }}{{ scope.row.index }}{{ $t('map.sectionLine') }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('map.sectionLogicalNumber')" width="130">
              <template slot-scope="scope">
                <el-input v-model="scope.row.num" size="mini" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('map.operation')">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('map.empty') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <div class="button_box">
        <el-button-group class="map-draft-group">
          <el-button type="primary" size="small" @click="editSectionNum">{{ $t('map.updateObj') }}</el-button>
        </el-button-group>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import JTriangle from '@/jmap/utils/JTriangle';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';

export default {
    name: 'SectionDraft',
    components: {
        ConfigList
    },
    props: {
        selected: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            questionList: [],
            activeName: 'first',
            SectionTypeList: [],
            SectionSepTypeList: [],
            TrainPositionTypeList: [],
            regionList: [],
            viewSelect: false,
            editModel: {
                code: '',
                name: '',
                type: '',
                relStandCode: '', // 关联站台编码
                leftStopPointOffset: 0, // 左向停车点偏移量
                rightStopPointOffset: 0, // 右向停车点偏移量
                destinationCode: '', // 目的地码
                destinationCodePoint: { x: 0, y: 0 }, // 目的地码坐标
                axleShow: false,
                namePosition: { x: 0, y: 0 },
                kmRangeRight: 0,
                kmRangeLeft: 0,
                region: '',
                logicSectionNum: [],
                logicSectionShow: false,
                isStandTrack: false,
                standTrackName: '',
                standTrackNamePosition: { x: 0, y: 0 },
                isReentryTrack: false,
                reentryTrackName: '',
                reentryTrackNamePosition: { x: 0, y: 0 },
                isTransferTrack: false,
                isSegmentation: false,
                segmentationPosition: { x: 0, y: 0 },
                transferTrackName: '',
                transferTrackNamePosition: { x: 0, y: 0 },
                isSwitchSection: '',
                relSwitchCode: '',
                stationCode: '',
                logicSectionNameSort: '',
                sepTypeLeft: '',
                offsetLeft: 0,
                sepTypeRight: '',
                offsetRight: 0,
                trainPosType: '', // 列车所在方向
                parentCode: '',
                points: [],
                lengthFact: 0,
                isCurve: false,
                leftSectionCode: '',
                rightSectionCode: '',
                relevanceSectionList: []
            },
            tableData: [],
            oldPoint: [], // 区段未修改前 坐标
            addModel: {
                code: '',
                splitNumber: 2,
                trainPosType: '', // 列车所在方向
                splitOffsetMax: 15
            },
            operationModel: { // 区段集中站列表
                sectionList: [],
                stationCode: ''
            },
            mergeModel: {
                lsectioncode: '',
                rsectioncode: ''
            },
            logicSectionNums: [1],
            fieldS: '',
            field: '',
            addRules: {
                code: [
                    { required: true, message: this.$t('rules.pleaseSelectSectionName'), trigger: 'change' }
                ],
                splitNumber: [
                    { required: true, message: this.$t('rules.pleaseEnterSplit'), trigger: 'blur' }
                ],
                trainPosType: [
                    { required: true, message: this.$t('rules.pleaseSelectTrainDir'), trigger: 'change' }
                ]
            },
            mergeRules: {
                lsectioncode: [
                    { required: true, message: this.$t('rules.pleaseSelectLeftSectionName'), trigger: 'change' }
                ],
                rsectioncode: [
                    { required: true, message: this.$t('rules.pleaseSelectRightSectionName'), trigger: 'change' }
                ]
            },
            editRule: {
                pointY: [
                    { required: true, message: this.$t('rules.pleaseEnterYValue'), trigger: 'blur' }
                ]
            },
            operationRules: {
                sectionList: [
                    { required: true, message: this.$t('rules.pleaseSelectSection'), trigger: 'change' }
                ],
                stationCode: [
                    { required: true, message: this.$t('rules.pleaseSelectStationCode'), trigger: 'change' }
                ]
            },
            createModel: {
                type: '01',
                startPoint: { x: 0, y: 0 },
                length: 0,
                leftSectionCode: '',
                rightSectionCode: ''
            },
            createRules: {
                'startPoint.x': [
                    { required: true, message: this.$t('rules.destinationCodePointX'), trigger: 'blur' }
                ],
                'startPoint.y': [
                    { required: true, message: this.$t('rules.destinationCodePointY'), trigger: 'blur' }
                ],
                'length': [
                    { required: true, message: '请填写距离值', trigger: 'blur' }
                ]
            },
            typeOptions: [{
                value: '01',
                label: this.$t('map.coordinateMode')
            }, {
                value: '02',
                label: this.$t('map.sectionAssociationMode')
            }],
            AssociateSectionList: []
        };
    },
    computed: {
        ...mapGetters('map', [
            'map',
            'sectionList',
            'switchList',
            'stationList',
            'stationStandList',
            'lineCode'
        ]),
        form() {
            const form = {
                labelWidth: '160px',
                items: {
                    code: {
                        name: '',
                        item: []
                    },
                    draw: {
                        name: this.$t('map.drawData'),
                        item: [
                            { prop: 'code', label: this.$t('map.blockCoding'), type: 'select', mode: false, optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList, change: true, deviceChange: this.deviceChange },
                            { prop: 'name', label: this.$t('map.sectionNameColon'), type: 'input' },
                            { prop: 'namePosition', label: this.$t('map.sectionNameOffset'), type: 'coordinate', width: '150px', children: [
                                { prop: 'namePosition.x', firstLevel: 'namePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
                                { prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
                            ] },
                            { prop: 'type', label: this.$t('map.sectionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SectionTypeList},
                            { prop: 'leftSectionCode', label: this.$t('map.leftAssociatedSection'), type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList, hover: this.hover, buttonType: 'leftSection', buttonShowType: this.isLeftSectionButtonShow},
                            { prop: 'rightSectionCode', label: this.$t('map.rightAssociatedSection'), type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList},
                            { prop: 'parentCode', label: this.$t('map.associatedSection'), type: 'select', mode: true, optionLabel: 'name&&code', optionValue: 'code', disabled: true, options: this.sectionList, isHidden: !this.isParentCode },

                            { prop: 'isStandTrack', label: this.$t('map.isStandTrack'), type: 'checkbox', isHidden: !this.isStandTrackShow }, // 1

                            { prop: 'standTrackName', label: this.$t('map.standTrackName'), type: 'input', isHidden: !this.isstandTrackNameShow },
                            { prop: 'standTrackNamePosition', label: this.$t('map.standTrackNamePosition'), type: 'coordinate', width: '150px', isHidden: !this.isstandTrackNameShow, children: [
                                { prop: 'standTrackNamePosition.x', firstLevel: 'standTrackNamePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px'},
                                { prop: 'standTrackNamePosition.y', firstLevel: 'standTrackNamePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px'}
                            ] },
                            { prop: 'relStandCode', label: this.$t('map.relStandCode'), type: 'selectHover', optionLabel: 'code&&name', optionValue: 'code', options: this.stationStandList, hover: this.hover, buttonType: 'relStandCode', buttonShowType: this.isButtonType, isHidden: !this.isrelStandCode },

                            { prop: 'isReentryTrack', label: this.$t('map.isReentryTrack'), type: 'checkbox', isHidden: !this.isStandTrackShow }, // 1

                            { prop: 'reentryTrackName', label: this.$t('map.reentryTrackName'), type: 'input', isHidden: !this.isreentryTrackName },
                            { prop: 'reentryTrackNamePosition', label: this.$t('map.reentryTrackNamePosition'), type: 'coordinate', width: '150px', isHidden: !this.isreentryTrackName, children: [
                                { prop: 'reentryTrackNamePosition.x', firstLevel: 'reentryTrackNamePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px'},
                                { prop: 'reentryTrackNamePosition.y', firstLevel: 'reentryTrackNamePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px'}
                            ] },

                            { prop: 'isTransferTrack', label: this.$t('map.isTransferTrack'), type: 'checkbox', isHidden: !this.isStandTrackShow }, // 1

                            { prop: 'transferTrackName', label: this.$t('map.transferTrackName'), type: 'input', isHidden: !this.istransferTrackName },
                            { prop: 'transferTrackNamePosition', label: this.$t('map.transferTrackNamePosition'), type: 'coordinate', width: '150px', isHidden: !this.istransferTrackName, children: [
                                { prop: 'transferTrackNamePosition.x', firstLevel: 'transferTrackNamePosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px'},
                                { prop: 'transferTrackNamePosition.y', firstLevel: 'transferTrackNamePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px'}
                            ] },
                            { prop: 'destinationCode', label: this.$t('map.destinationCode'), type: 'input', isHidden: !this.isdestinationCode },
                            { prop: 'destinationCodePoint', label: this.$t('map.destinationCodePoint'), type: 'coordinate', width: '150px', isHidden: !this.isdestinationCode, children: [
                                { prop: 'destinationCodePoint.x', firstLevel: 'destinationCodePoint', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px'},
                                { prop: 'destinationCodePoint.y', firstLevel: 'destinationCodePoint', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px'}
                            ] },

                            { prop: 'isSwitchSection', label: this.$t('map.isSwitchSection'), type: 'checkbox', isHidden: !this.isAssociatedSwitchSectionshow, disabled: true },
                            { prop: 'relSwitchCode', label: this.$t('map.relSwitchCode'), type: 'select', optionLabel: 'code&&name', optionValue: 'code', options: this.switchList, change: true, deviceChange: this.deviceChange, isHidden: !this.isRelSwitchCode, disabled: true },

                            { prop: 'logicSectionShow', label: this.$t('map.displayLogicalExtents'), type: 'checkbox', isHidden: !this.isSwitchSectionShow }, // 1
                            { prop: 'logicSectionNameSort', label: this.$t('map.logicSectionNameSort'), type: 'radio', isHidden: !this.isLogicSectionNameSort, radioList: [
                                {value: true, label: this.$t('map.fromSmallToLarge')},
                                {value: false, label: this.$t('map.fromLargeToSmall')}
                            ] }, // 1
                            { prop: 'sepTypeLeft', label: this.$t('map.sepTypeLeft'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SectionSepTypeList, isHidden: !this.isSwitchSectionType },
                            { prop: 'sepTypeRight', label: this.$t('map.sepTypeRight'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SectionSepTypeList, isHidden: !this.isSwitchSectionType },
                            { prop: 'isSegmentation', label: this.$t('map.isSegmentation'), type: 'checkbox', isHidden: !this.isSwitchSectionType },
                            { prop: 'segmentationPosition', label: this.$t('map.segmentationPosition'), type: 'coordinate', width: '150px', isHidden: !this.issegmentationPosition, children: [
                                { prop: 'segmentationPosition.x', firstLevel: 'segmentationPosition', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: true },
                                { prop: 'segmentationPosition.y', firstLevel: 'segmentationPosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: true }
                            ] },
                            { prop: 'isCurve', label: this.$t('map.isCurve'), type: 'checkbox', isHidden: !this.isSwitchSectionType },
                            { prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '100px', isHidden: !this.isPointsShow, pointDisabled: this.isStationCodeDisabled, addPoint: this.addPoint, delPoint: this.delPoint }
                        ]
                    },
                    map: {
                        name: this.$t('map.mapData'),
                        item: [
                            { prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', mode: true, optionLabel: 'name&&code', optionValue: 'code', disabled: this.isStationCodeDisabled, options: this.stationList },
                            { prop: 'lengthFact', label: this.$t('map.actualLength'), type: 'number', min: 0, placeholder: this.$t('map.meter'), isHidden: !this.isPhysicalSection },
                            { prop: 'leftStopPointOffset', label: this.$t('map.leftStopPointOffset'), type: 'number', min: 0, isHidden: !this.isStopPointOffset },
                            { prop: 'rightStopPointOffset', label: this.$t('map.rightStopPointOffset'), type: 'number', min: 0, isHidden: !this.isStopPointOffset },
                            { prop: 'region', label: this.$t('map.sectionColon'), type: 'select', optionLabel: 'label', optionValue: 'value', options: this.regionList, isHidden: !this.sectionColonShow },
                            { prop: 'kmRangeLeft', label: this.$t('map.leftKilometerMark'), type: 'number', min: 0, placeholder: this.$t('map.meter') },
                            { prop: 'kmRangeRight', label: this.$t('map.rightKilometerMark'), type: 'number', min: 0, placeholder: this.$t('map.meter') },
                            { prop: 'trainPosType', label: this.$t('map.trainDirection'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.TrainPositionTypeList, isHidden: !this.isSwitchSectionType }
                        ]
                    }
                }
            };
            return form;
        },
        rules() {
            var validateLeftSection = (rule, value, callback) => {
                const leftSection = value ? this.$store.getters['map/getDeviceByCode'](value) : '';
                if (leftSection && (leftSection.points[1].x !== this.editModel.points[0].x || leftSection.points[1].y !== this.editModel.points[0].y )) {
                    callback(new Error(this.$t('rules.theLeftEndOfTheSelectedAssociatedSectionIsNotAdjacent')));
                } else {
                    callback();
                }
            };
            var validateRightSection = (rule, value, callback) => {
                const rightSection = value ? this.$store.getters['map/getDeviceByCode'](value) : '';
                if (rightSection && (rightSection.points[0].x !== this.editModel.points[1].x || rightSection.points[0].y !== this.editModel.points[1].y )) {
                    callback(new Error(this.$t('rules.theRightEndOfTheSelectedAssociatedSectionIsNotAdjacent')));
                } else {
                    callback();
                }
            };
            const rules = {
                code: [
                    { required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
                ],
                name: [
                    { required: true, message: this.$t('rules.pleaseEnterSectionName'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('rules.pleaseEnterSectionType'), trigger: 'blur' }
                ],
                relStandCode: [
                    { required: true, message: this.$t('rules.pleaseSelectAssociatedPlatform'), trigger: 'change' }
                ],
                leftStopPointOffset: [
                    { required: true, message: this.$t('rules.pleaseEnterLeftStopPointOffset'), trigger: 'blur' }
                ],
                rightStopPointOffset: [
                    { required: true, message: this.$t('rules.rightStopPointOffset'), trigger: 'blur' }
                ],
                destinationCode: [
                    { required: true, message: this.$t('rules.destinationCode'), trigger: 'blur' }
                ],
                'destinationCodePoint.x': [
                    { required: true, message: this.$t('rules.destinationCodePointX'), trigger: 'blur' }
                ],
                'destinationCodePoint.y': [
                    { required: true, message: this.$t('rules.destinationCodePointY'), trigger: 'blur' }
                ],
                'namePosition.x': [
                    { required: true, message: this.$t('rules.sectionNamePointX'), trigger: 'blur' }
                ],
                'namePosition.y': [
                    { required: true, message: this.$t('rules.sectionNamePointY'), trigger: 'blur' }
                ],
                logicSectionNameSort: [
                    { required: true, message: this.$t('rules.logicSectionNameSort'), trigger: 'change' }
                ],
                sepTypeLeft: [
                    { required: true, message: this.$t('rules.sectionSepTypeLeft'), trigger: 'change' }
                ],
                sepTypeRight: [
                    { required: true, message: this.$t('rules.sectionSepTypeRight'), trigger: 'change' }
                ],
                relSwitchCode: [
                    { required: true, message: this.$t('rules.sectionRelSwitchCode'), trigger: 'change' }
                ],
                leftSectionCode: [
                    { validator: validateLeftSection, trigger: 'change' }
                ],
                rightSectionCode: [
                    { validator: validateRightSection, trigger: 'change'}
                ]
            };
            return rules;
        },
        PhysicalSectionList() {
            let list = [];
            if (this.sectionList && this.sectionList.length) {
                list = this.sectionList.filter(elem => { return elem.type === '01'; });
            }
            return list;
        },
        ReverseSectionList() {
            let list = [];
            if (this.sectionList && this.sectionList.length) {
                list = this.sectionList;
                list = list.slice(0, list.length);
                list.reverse();
            }
            return list;
        },

        // 判断显隐 true 显示 false 隐藏
        isParentCode() {
            return this.editModel.type == '02' || this.editModel.relSwitchCode;
        },
        isStationCodeDisabled() {
            return this.editModel.type == '02';
        },
        isSwitchSectionType() {
            return this.editModel.type !== '04';
        },
        isPhysicalSection() {
            return this.editModel.type == '01';
        },
        isStationAxleShow() {
            return this.editModel.section == '02';
        },
        isstandTrackNameShow() {
            return this.editModel.type !== '04' && this.editModel.isStandTrack;
        },
        isreentryTrackName() {
            return this.editModel.type !== '04' && this.editModel.isReentryTrack;
        },
        istransferTrackName() {
            return this.editModel.type !== '04' && this.editModel.isTransferTrack;
        },
        isdestinationCode() {
            return this.editModel.type !== '04' && (this.editModel.isReentryTrack || this.editModel.isTransferTrack);
        },
        isStopPointOffset() {
            return this.editModel.type !== '04' && (this.editModel.isReentryTrack || this.editModel.isStandTrack || this.editModel.isTransferTrack);
        },

        isButtonType() {
            return this.fieldS == 'relStandCode';
        },
        isrelStandCode() {
            return this.editModel.type !== '04' && this.editModel.isStandTrack && this.editModel.type == '01';
        },
        isRelSwitchCode() {
            return this.editModel.type !== '04' && this.editModel.isSwitchSection;
        },
        isLogicSectionNameSort() { // 逻辑区段排序 判断
            return this.editModel.type == '01' && !this.editModel.isSwitchSection;
        },
        issegmentationPosition() {
            return this.editModel.type !== '04' && this.editModel.isSegmentation;
        },
        isPointsShow() {
            return this.editModel.type !== '04' && this.editModel.points.length > 0;
        },
        sectionColonShow() {
            if (this.$store.state.map.map) {
                return this.$store.state.map.map.skinVO.code == '03';
            }
            return false;
        },
        isSwitchSectionShow() { // 判断道岔区段不显示
            return this.editModel.type !== '04' && !this.editModel.isSwitchSection;
        },
        isAssociatedSwitchSectionshow() {
            return this.editModel.type !== '04' && this.editModel.type !== '03';
        },
        isStandTrackShow() {
            return this.editModel.type !== '04' && this.editModel.type !== '03' && !this.editModel.isSwitchSection;
        },
        isLeftSectionButtonShow() {
            return this.field === 'leftSection';
        }
    },
    watch: {
        '$store.state.menuOperation.mapDrawSelectCount': function(val) {
            this.deviceSelect(this.selected);
        }
    },
    mounted() {
        this.$Dictionary.sectionType().then(list => {
            this.SectionTypeList = list;
        });
        this.$Dictionary.sectionSepType().then(list => {
            this.SectionSepTypeList = list;
        });
        this.$Dictionary.trainPositionType().then(list => {
            this.TrainPositionTypeList = list;
        });
        this.regionList = this.$ConstSelect.RegionTypeList;
    },
    methods: {
        // 计算逻辑区段数量列表展示
        computedLogicSectionNumList(logicSectionNum) {
            this.tableData = [];
            this.logicSectionNums = [...logicSectionNum];

            var i; var num; var len = this.editModel.points.length;
            if (len > 1 && this.editModel.type === '01') {
                for (i = 0; i < len - 1; i++) {
                    num = 0;
                    if (Array.isArray(this.logicSectionNums) && this.logicSectionNums[i]) {
                        num = parseInt(this.logicSectionNums[i]);
                    }
                    this.tableData.push({ index: i + 1, num: num });
                }

                if (this.tableData.length <= 0) {
                    this.tableData.push({ index: i + 1, num: 0 });
                }
            }
        },
        deviceChange(code) {
            this.$emit('setCenter', code);
            this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
        },
        deviceSelect(selected) {
            this.AssociateSectionList = this.sectionList.filter(item => { return item.type === '01' && item.code !== selected.code; });
            if (!this.fieldS) { // 判断是否激活选择站台
                if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
                    if (this.field === 'leftSection') {
                        this.editModel.leftSectionCode = selected.code;
                        this.activeName = 'first';
                        this.field = '';
                        this.$emit('fieldSelect', '');
                        return;
                    } else if (this.field === 'rightSection') {
                        this.editModel.rightSectionCode = selected.code;
                        this.activeName = 'first';
                        this.field = '';
                        this.$emit('fieldSelect', '');
                        return;
                    }
                    this.$refs.dataform.resetFields();
                    this.editModel.points = [];
                    this.activeName = 'first';
                    this.editModel = deepAssign(this.editModel, selected);
                    this.editModel.logicSectionNum = selected.type === '01' ? selected.logicSectionNum : [0];
                    this.editModel.isSegmentation = selected.isSegmentation || false;
                    this.editModel.points = JSON.parse(JSON.stringify(selected.points));
                    this.oldPoint = JSON.parse(JSON.stringify(selected.points));
                    this.editModel.lengthFact = selected.lengthFact || 0;

                    this.addModel.splitOffsetMax = Math.sqrt(new JTriangle(selected.points[0], selected.points[selected.points.length - 1]).abspowz);
                    this.addModel.splitOffset = this.addModel.splitOffsetMax / 2;
                    this.computedLogicSectionNumList(this.editModel.logicSectionNum);
                    if (this.field.toUpperCase() === 'splitSection'.toUpperCase()) {
                        this.addModel.code = selected.code;
                        this.activeName = 'three';
                        this.field = '';
                        this.$emit('fieldSelect', '');
                    } else if (this.field.toUpperCase() === 'leftSectionCode'.toUpperCase()) {
                        this.mergeModel.lsectioncode = selected.code;
                        this.activeName = 'three';
                        this.field = '';
                        this.$emit('fieldSelect', '');
                    } else if (this.field.toUpperCase() === 'rightSectionCode'.toUpperCase()) {
                        this.mergeModel.rsectioncode = selected.code;
                        this.activeName = 'three';
                        this.field = '';
                        this.$emit('fieldSelect', '');
                    } else if (this.field.toUpperCase() === 'handleSection'.toUpperCase()) {
                        this.operationModel.sectionList.push(selected.code);
                        this.activeName = 'five';
                    } else if (this.field.toUpperCase() === 'getSectionStart'.toUpperCase()) {
                        this.createModel.leftSectionCode = selected.code;
                        this.activeName = 'second';
                        this.field = '';
                    } else if (this.field.toUpperCase() === 'getSectionEnd'.toUpperCase()) {
                        this.createModel.rightSectionCode = selected.code;
                        this.activeName = 'second';
                        this.field = '';
                    }
                }
            } else {
                this.editModel.relStandCode = selected.code;
                this.selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
                this.fieldS = '';
                this.$emit('fieldSelect', '');
            }
        },
        handleClick(tab, event) {
            if (tab.name != 'first') {
                this.fieldS = '';
            }
            this.questionList = [];
        },
        hover(field) {
            if (field == 'relStandCode') {
                this.fieldS = field == this.fieldS ? '' : field;
                this.$emit('fieldSelect', this.fieldS);
            } else {
                this.field = field == this.field ? '' : field;
                this.$emit('fieldSelect', this.field);
            }
        },
        handleDelete(index, row) {
            row.num = 0;
        },
        // 逻辑区段模型
        addLogicalSection(model, points, index, middleOffset) {
            const data = {
                _type: 'Section',
                code: getUID('Section'),
                name: String.fromCharCode(index + 'A'.charCodeAt()),
                parentCode: model.code,
                axleShow: false,
                type: '02',
                namePosition: { x: 0, y: 0 },
                isStandTrack: false,
                standTrackName: model.standTrackName,
                standTrackNamePosition: {
                    x: model.standTrackNamePosition.x,
                    y: model.standTrackNamePosition.y
                },
                isReentryTrack: false,
                reentryTrackName: model.reentryTrackName,
                reentryTrackNamePosition: {
                    x: model.reentryTrackNamePosition.x,
                    y: model.reentryTrackNamePosition.y
                },
                isTransferTrack: false,
                transferTrackName: model.transferTrackName,
                transferTrackNamePosition: {
                    x: model.transferTrackNamePosition.x,
                    y: model.transferTrackNamePosition.y
                },
                isSegmentation: false,
                segmentationPosition: {
                    x: model.segmentationPosition.x,
                    y: model.segmentationPosition.y
                },
                logicSectionNameSort: model.logicSectionNameSort,
                isSwitchSection: model.isSwitchSection,
                relSwitchCode: model.relSwitchCode,
                logicSectionNum: [],
                logicSectionShow: model.logicSectionShow,
                stationCode: model.stationCode,
                offsetLeft: middleOffset * (index) + model.offsetLeft,
                offsetRight: middleOffset * (index + 1) + model.offsetLeft,
                sepTypeLeft: '00',
                sepTypeRight: '00',
                trainPosType: model.trainPosType,
                points: points,
                isCurve: false,
                lengthFact: 0,
                kmRangeRight: model.kmRangeRight,
                kmRangeLeft: model.kmRangeLeft,
                region: model.region,
                relevanceSectionList: []
            };
            return data;
        },
        // 创建逻辑区段
        createLogicalSections(num, beg, end, model, counts) {
            const models = [];
            const triangle = new JTriangle(beg, end);
            const offset = Math.sqrt(triangle.abspowz) / num;
            const middleOffset = parseFloat((model.offsetRight - model.offsetLeft) / num);
            for (let i = 0; i < num; i++) {
                const points = [
                    { x: beg.x + triangle.getCos(offset * i), y: beg.y + triangle.getSin(offset * i) },
                    { x: beg.x + triangle.getCos(offset * (i + 1)), y: beg.y + triangle.getSin(offset * (i + 1)) }
                ];
                models.push(this.addLogicalSection(model, points, counts + i, middleOffset));
            }
            return models;
        },
        // 生成逻辑区段
        editSectionNum() {
            let models = [];
            let counts = 0;
            const logicSectionNumList = [];
            const sectionPoints = [...this.editModel.points]; // 获取区段点
            this.tableData.forEach((ele, index) => {
                models = [...models, ...this.createLogicalSections(Number(ele.num), sectionPoints[index], sectionPoints[index + 1], this.editModel, counts)];
                logicSectionNumList.push(Number(ele.num));
                counts += parseInt(ele.num);
            });
            this.sectionList.forEach(section => { // 删除之前的逻辑区段
                if (section.type === '02' && section.parentCode == this.editModel.code) {
                    models.push(deepAssign(section, {_dispose: true}));
                }
            });

            this.editModel.logicSectionNum = [...logicSectionNumList];
            models.push(this.editModel);
            this.activeName = 'first';
            this.$emit('updateMapModel', models);
        },
        addPoint(index) {
            const data = { x: 0, y: 0 };
            this.editModel.points.splice(index + 1, 0, data);
            this.logicSectionNums.splice(index + 1, 0, 1);
        },
        delPoint(index) {
            this.editModel.points.splice(index, 1);
            this.logicSectionNums.splice(index, 1);
        },
        // 创建区段
        create() {
            const uid = getUID('Section');
            const model = {
                _type: 'Section',
                code: uid,
                name: uid,
                type: '01',
                axleShow: false,
                isStandTrack: false,
                standTrackName: '',
                standTrackNamePosition: { x: 0, y: 0 },
                isReentryTrack: false,
                reentryTrackName: '',
                reentryTrackNamePosition: { x: 0, y: 0 },
                isTransferTrack: false,
                transferTrackName: '',
                transferTrackNamePosition: { x: 0, y: 0 },
                isSwitchSection: false, // 是否道岔管理区段
                isSegmentation: false,
                segmentationPosition: { x: 0, y: 0 },
                relSwitchCode: '',
                kmRangeRight: '',
                kmRangeLeft: '',
                region: '',
                namePosition: { x: 0, y: 0 },
                logicSectionNum: [0],
                logicSectionShow: true,
                logicSectionNameSort: true,
                sepTypeLeft: '00', // 分隔符类型
                offsetLeft: 0,
                sepTypeRight: '00',
                trainPosType: '', // 默认不填写 列车所在方向
                lengthFact: 0,
                parentCode: '',
                relStandCode: '',
                rightStopPointOffset: 0,
                leftStopPointOffset: 0,
                destinationCode: '',
                destinationCodePoint: { x: 0, y: 0 },
                isCurve: false,
                relevanceSectionList: []
            };
            if (this.createModel.type == '01') {
                model.points = [
                    { x: this.createModel.startPoint.x, y: this.createModel.startPoint.y },
                    { x: this.createModel.startPoint.x + this.createModel.length, y: this.createModel.startPoint.y }
                ];
            } else if (this.createModel.type == '02') {
                const startModel = this.$store.getters['map/getDeviceByCode'](this.createModel.leftSectionCode);
                const endModel = this.$store.getters['map/getDeviceByCode'](this.createModel.rightSectionCode);

                const start_x = startModel.points[startModel.points.length - 1].x;
                const end_x = endModel.points[0].x;
                const start_y = startModel.points[startModel.points.length - 1].y;
                const end_y = endModel.points[0].y;
                if (this.createModel.leftSectionCode == this.createModel.rightSectionCode) {
                    this.$messageBox('左关联区段不能和右关联区段相同');
                    return;
                }
                if (start_x == end_x && start_y == end_y) {
                    this.$messageBox('左关联区段终点不能和右关联区段起点相同');
                    return;
                }
                model.points = [
                    { x: start_x, y: start_y },
                    { x: end_x, y: end_y }
                ];
                model.leftSectionCode = this.createModel.leftSectionCode;
                model.rightSectionCode = this.createModel.rightSectionCode;
            }
            this.$emit('updateMapModel', model);
        },
        // 修改区段属性
        edit() {
            this.$refs['dataform'].validate((valid) => {
                if (valid) {
                    const models = [];
                    const model = deepAssign(this.editModel, {_type: 'Section'}); // 修改元素model
                    model.leftStopPointOffset = Number(model.leftStopPointOffset);
                    model.rightStopPointOffset = Number(model.rightStopPointOffset);
                    models.push(model);
                    this.sectionList.forEach(section => {
                        if (section.parentCode == model.code) {
                            const copySection = deepAssign({}, section);
                            copySection.logicSectionShow = model.logicSectionShow;
                            copySection.trainPosType = model.trainPosType;
                            models.push(copySection);
                        }
                        if (model.code != section.code && section.type == '01') {
                            const lastIndex = this.oldPoint.length - 1;
                            const copySection = deepAssign({}, section);
                            if (this.oldPoint[0].x == section.points[section.points.length - 1].x && this.oldPoint[0].y == section.points[section.points.length - 1].y) {
                                copySection.points[copySection.points.length - 1].x = model.points[0].x;
                                copySection.points[copySection.points.length - 1].y = model.points[0].y;
                                copySection.offsetRight = model.offsetLeft;
                            }
                            if (this.oldPoint[lastIndex].x == section.points[0].x && this.oldPoint[lastIndex].y == section.points[0].y) {
                                copySection.points[0].x = model.points[model.points.length - 1].x;
                                copySection.points[0].y = model.points[model.points.length - 1].y;
                                copySection.offsetLeft = model.offsetRight;
                            }
                            models.push(copySection);
                        }
                    });
                    this.fieldS = '';
                    this.$emit('updateMapModel', models);
                    this.oldPoint = JSON.parse(JSON.stringify(model.points));
                } else {
                    this.$message('还有属性未填写，修改未生效！');
                }
            });
        },
        // 删除对象
        deleteObj() {
            const models = [];
            const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
            if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
                const _that = this;
                this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
                    confirmButtonText: this.$t('tip.confirm'),
                    cancelButtonText: this.$t('tip.cancel'),
                    type: 'warning'
                }).then(() => {
                    models.push(deepAssign(selected, { _dispose: true }));
                    _that.$emit('updateMapModel', models);
                    _that.deviceSelect();
                }).catch(() => {
                    _that.$message.info(this.$t('tip.cancelledDelete'));
                });
            }
        },
        // 拆分区段
        split() {
            this.$refs['oprt'].validate((valid) => {
                if (valid) {
                    const selected = this.$store.getters['map/getDeviceByCode'](this.addModel.code);
                    if (selected && selected._type === 'Section' && selected.type === '01') {
                        const models = [];
                        const modelX = (selected.points[selected.points.length - 1].x - selected.points[0].x) / this.addModel.splitNumber; // x 平均值
                        const modelY = (selected.points[selected.points.length - 1].y - selected.points[0].y) / this.addModel.splitNumber; // y 平均值
                        for (let index = 1; index <= this.addModel.splitNumber; index++) {
                            const model = {
                                _type: 'Section',
                                code: getUID('Section'),
                                name: `${selected.name}_${index}`,
                                type: '01',
                                parentCode: '',
                                axleShow: selected.axleShow,
                                isStandTrack: false,
                                kmRangeRight: '',
                                kmRangeLeft: '',
                                region: '',
                                standTrackName: '',
                                standTrackNamePosition: { x: 0, y: 0 },
                                isReentryTrack: false,
                                reentryTrackName: '',
                                reentryTrackNamePosition: { x: 0, y: 0 },
                                isTransferTrack: false,
                                transferTrackName: '',
                                transferTrackNamePosition: { x: 0, y: 0 },
                                isSwitchSection: false,
                                isSegmentation: false,
                                segmentationPosition: { x: 0, y: 0 },
                                relSwitchCode: '',
                                logicSectionNameSort: selected.logicSectionNameSort,
                                logicSectionNum: selected.logicSectionNum,
                                logicSectionShow: selected.logicSectionShow,
                                sepTypeLeft: index == 0 ? selected.sepTypeLeft : '01', // 左侧分隔符类型 (起始左侧按原来区段类型走 其余 默认 01)
                                offsetLeft: selected.offsetLeft,
                                sepTypeRight: index == this.addModel.splitNumber ? selected.sepTypeRight : '01', // 右侧分隔符类型 (终点右侧按原来区段类型走 其余 默认 01)
                                offsetRight: selected.offsetRight,
                                trainPosType: this.addModel.trainPosType,
                                isCurve: selected.isCurve,
                                lengthFact: 0,
                                points: [
                                    {
                                        x: selected.points[0].x + ((index - 1) * modelX),
                                        y: selected.points[0].y + ((index - 1) * modelY)
                                    },
                                    {
                                        x: selected.points[0].x + (index * modelX),
                                        y: selected.points[0].y + (index * modelY)
                                    }
                                ],
                                namePosition: { x: 0, y: 0 },
                                relevanceSectionList: []
                            };
                            models.push(model);
                        }
                        const leftAssociatedSection = selected.leftSectionCode ? deepAssign({}, this.$store.getters['map/getDeviceByCode'](selected.leftSectionCode) || {}) : '';
                        const rightAssociatedSection = selected.rightSectionCode ? deepAssign({}, this.$store.getters['map/getDeviceByCode'](selected.rightSectionCode) || {}) : '';
                        models.forEach((elem, index) => {
                            if (index === 0) {
                                elem.leftSectionCode = selected.leftSectionCode;
                                elem.rightSectionCode = models[index + 1].code;
                                if (leftAssociatedSection) {
                                    leftAssociatedSection.rightSectionCode = elem.code;
                                }
                            } else if (index === models.length - 1) {
                                elem.leftSectionCode = models[index - 1].code;
                                elem.rightSectionCode = selected.rightSectionCode;
                                if (rightAssociatedSection) {
                                    rightAssociatedSection.leftSectionCode = elem.code;
                                }
                            } else {
                                elem.leftSectionCode = models[index - 1].code;
                                elem.rightSectionCode = models[index + 1].code;
                            }
                        });
                        models.push(deepAssign(selected, { _dispose: true }));
                        leftAssociatedSection && JSON.stringify(leftAssociatedSection) !== '{}' && models.push(leftAssociatedSection);
                        rightAssociatedSection && JSON.stringify(rightAssociatedSection) !== '{}' && models.push(rightAssociatedSection);
                        this.$emit('updateMapModel', models); // 添加新增拆分区段
                    }
                }
            });
        },
        // 合并区段
        merge() {
            this.$refs['oprt1'].validate((valid) => {
                if (valid) {
                    if (this.mergeModel.lsectioncode != this.mergeModel.rsectioncode) {
                        const models = [];
                        let rsection = null;
                        let lsection = null;
                        this.PhysicalSectionList.forEach(section => {
                            if (section.code === this.mergeModel.lsectioncode) {
                                lsection = section;
                            }
                            if (section.code === this.mergeModel.rsectioncode) {
                                rsection = section;
                            }
                        });

                        if (!rsection || !lsection) {
                            this.$messageBox(this.$t('tip.cannotMerged'));
                            return;
                        }

                        if (rsection && lsection) {
                            const uid = getUID('Section');
                            const model = {
                                _type: 'Section',
                                code: uid,
                                parentCode: '',
                                name: uid,
                                type: '01',
                                isStandTrack: false,
                                standTrackName: '',
                                standTrackNamePosition: { x: 0, y: 0 },
                                isSegmentation: false,
                                segmentationPosition: { x: 0, y: 0 },
                                isReentryTrack: false,
                                reentryTrackName: '',
                                reentryTrackNamePosition: { x: 0, y: 0 },
                                isTransferTrack: false,
                                transferTrackName: '',
                                transferTrackNamePosition: { x: 0, y: 0 },
                                isSwitchSection: false,
                                relSwitchCode: '',
                                isCurve: false,
                                kmRangeRight: '',
                                kmRangeLeft: '',
                                region: '',
                                relevanceSectionList: []
                            };
                            models.push(deepAssign(this.$store.getters['map/getDeviceByCode'](lsection.code), { _dispose: true }));
                            models.push(deepAssign(this.$store.getters['map/getDeviceByCode'](rsection.code), { _dispose: true }));

                            if (lsection.points[lsection.points.length - 1].x == rsection.points[0].x && lsection.points[lsection.points.length - 1].y == rsection.points[0].y) {
                                model.axleShow = lsection.axleShow;
                                model.logicSectionNum = lsection.logicSectionNum;
                                model.logicSectionShow = lsection.logicSectionShow;
                                model.trainPosType = lsection.trainPosType;
                                model.sepTypeLeft = lsection.sepTypeLeft;
                                model.offsetLeft = lsection.offsetLeft;
                                model.sepTypeRight = rsection.sepTypeRight;
                                model.offsetRight = lsection.offsetRight + rsection.offsetRight;
                                model.isCurve = lsection.isCurve;
                                model.points = [
                                    { x: lsection.points[0].x, y: lsection.points[0].y },
                                    { x: rsection.points[rsection.points.length - 1].x, y: rsection.points[rsection.points.length - 1].y }
                                ];
                                model.logicSectionNameSort = lsection.logicSectionNameSort;
                                model.namePosition = { x: 0, y: 0 };
                                model.lengthFact = Number(lsection.lengthFact) + Number(rsection.lengthFact);
                                model.leftSectionCode = lsection.leftSectionCode;
                                model.rightSectionCode = rsection.rightSectionCode;
                                models.push(model);
                                const leftAssociatedSection = model.leftSectionCode ? deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.leftSectionCode) || {}) : '';
                                const rightAssociatedSection = model.rightSectionCode ? deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.rightSectionCode) || {}) : '';
                                if (leftAssociatedSection && JSON.stringify(leftAssociatedSection) !== '{}') {
                                    leftAssociatedSection.rightSectionCode = model.code;
                                    models.push(leftAssociatedSection);
                                }
                                if (rightAssociatedSection && JSON.stringify(rightAssociatedSection) !== '{}') {
                                    rightAssociatedSection.leftSectionCode = model.code;
                                    models.push(rightAssociatedSection);
                                }
                                this.$emit('updateMapModel', models);
                            }
                            if (lsection.points[0].x == rsection.points[rsection.points.length - 1].x && lsection.points[0].y == rsection.points[rsection.points.length - 1].y) {
                                model.axleShow = rsection.axleShow;
                                model.logicSectionNum = rsection.logicSectionNum;
                                model.logicSectionShow = rsection.logicSectionShow;
                                model.trainPosType = rsection.trainPosType;
                                model.sepTypeLeft = rsection.sepTypeLeft;
                                model.offsetLeft = rsection.offsetLeft;
                                model.sepTypeRight = lsection.sepTypeRight;
                                model.offsetRight = lsection.offsetRight + rsection.offsetRight;
                                model.isCurve = rsection.isCurve;
                                model.points = [
                                    { x: rsection.points[0].x, y: rsection.points[0].y },
                                    { x: lsection.points[lsection.points.length - 1].x, y: lsection.points[lsection.points.length - 1].y }
                                ];
                                model.logicSectionNameSort = rsection.logicSectionNameSort;
                                model.namePosition = { x: 0, y: 0 };
                                model.lengthFact = Number(lsection.lengthFact) + Number(rsection.lengthFact);
                                model.leftSectionCode = rsection.leftSectionCode;
                                model.rightSectionCode = lsection.rightSectionCode;
                                models.push(model);
                                const leftAssociatedSection = model.leftSectionCode ? deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.leftSectionCode) || {}) : '';
                                const rightAssociatedSection = model.rightSectionCode ? deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.rightSectionCode) || {}) : '';
                                if (leftAssociatedSection) {
                                    leftAssociatedSection.rightSectionCode = model.code;
                                    models.push(leftAssociatedSection);
                                }
                                if (rightAssociatedSection) {
                                    rightAssociatedSection.leftSectionCode = model.code;
                                    models.push(rightAssociatedSection);
                                }
                                this.$emit('updateMapModel', models);
                            }
                        }

                        this.PhysicalSectionList.forEach(lsection => {
                            if (lsection.code === this.mergeModel.lsectioncode) {
                                this.PhysicalSectionList.forEach(rsection => {
                                });
                            }
                        });
                    }
                }
            });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .coordinate {
        overflow: hidden;

        .title {
            text-align: right;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 28px;
            width: 120px;
            font-weight: bold;
            display: block;
            float: left;
            margin-right: 7px;
        }
        .listWidth{
            display: table;
            float: left;
            margin-right: 20px;
            &:last-child{
                margin: 0;
            }
        }
    }
    .view-control {
        overflow-y: auto;
		height: 100%;
    }

	.flex_box{
		display: flex;
		justify-content: center;
	}
	.card {
		height: 100%;
	}

	.box-card {
		width: calc(100% - 80px);
		margin: 20px auto 0;
		padding: 0 20px;
		.text {
			font-size: 14px;
		}

		.item {
			padding: 18px 0;
		}
	}

</style>
