<template>
  <el-dialog
    v-dialogDrag
    class="planEdit__tool create-empty-plan"
    :title="title"
    :visible.sync="dialogShow"
    width="400px"
    :before-close="doClose"
    :z-index="3000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div>
      <el-row>
        <el-form ref="form" :model="editModel" label-width="140px" size="mini" :rules="rules" @submit.native.prevent>
          <el-form-item :label="this.$t('planMonitor.runGraphName')+this.$t('global.colon')" prop="name">
            <el-input v-model="editModel.name" autofocus />
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="doClose">{{ $t('map.cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="handleEdit">{{ $t('global.modify') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { putRunPlanDetail } from '@/api/runplan';

export default {
    name: 'CreateEmptyPlan',
    components: {
    },
    data() {
        return {
            activeTab: 'first',
            dialogShow: false,
            loading: false,
            publishMapList: [],
            editModel: {
                planId: '',
                name: ''
            }
        };
    },
    computed: {
        title() {
            return this.$t('planMonitor.modifyRunningDiagramName');
        },
        rules() {
            return {
                name: [
                    { required: true, message: this.$t('rules.enterTheNameOfTheRunGraph'), trigger: 'blur' }
                ]
            };
        }
    },
    mounted() {

    },
    methods: {
        doShow(data) {
            this.dialogShow = true;
            if (data && data.name) {
                this.editModel.name = data.name;
                this.editModel.planId = data.id;
            }
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
            this.editModel.name = '';
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            }
        },
        handleEdit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    putRunPlanDetail(this.editModel).then(resp => {
                        const params = {
                            dialogName: 'openRunPlan',
                            operate: 'loadRunPlanData',
                            params: { planId: resp.data, lineCode: this.$route.query.lineCode, planName: this.editModel.name, refresh: true }
                        };

                        this.$emit('dispatchOperate', params);
                        this.$message.success(this.$t('tip.runGraphNameModifiedSuccessfully'));
                        this.$emit('renewal', this.editModel.name);
                        this.doClose();
                    }).catch(error => {
                        this.$messageBox(this.$t('tip.modifyRunGraphNameFailed') + error.message);
                        this.doClose();
                    });
                }
            });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    /deep/ {
        .el-input {
            width: 160px;
        }

        .el-input-number {
            width: 120px;
        }
    }
</style>
