<template>
  <el-dialog v-loading="loading" v-dialogDrag title="生成车辆段联锁数据" :visible.sync="dialogTableVisible" class="view_box" width="460px" :before-close="doClose" :modal-append-to-body="false" append-to-body :modal="false">
    <div>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm">
        <el-form-item label="生成数据的车辆段" prop="stationCode">
          <el-select v-model="ruleForm.stationCode" size="small" placeholder="请选择">
            <el-option
              v-for="item in depotList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { generateDepotCiData } from '@/api/jmap/mapdraft';
export default {
    name: 'DepotStation',
    data () {
        return {
            ruleForm: { stationCode: '' },
            loading: false,
            dialogTableVisible: false,
            depotList: [],
            rules: {
                stationCode: [{ required: true, message: '请选择车辆段', trigger: 'change' }]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'stationList'
        ])
    },
    mounted() {
    },
    methods: {
        doShow() {
            this.depotList = [];
            this.depotList = this.stationList.filter(item => item.depot);
            this.dialogTableVisible = true;
        },
        doClose() {
            this.dialogTableVisible = false;
        },
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    generateDepotCiData(this.$route.params.mapId, this.ruleForm.stationCode).then(resp => {
                        this.loading = false;
                        this.$messageBox(`生成联锁数据成功:共生成${resp.data}条进路数据！`);
                        this.dialogTableVisible = false;
                    }).catch(() => {
                        this.$message.error('生成联锁失败！');
                        this.loading = false;
                        this.dialogTableVisible = false;
                    });
                }
            });
        }
    }
};

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
