/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <el-dialog
    :title="$t('openatccomponents.overview.sectionConfiguration')"
    :visible.sync="visible"
    width="30%"
    :modal="false"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item :label="$t('openatccomponents.overview.sectionName')">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t('openatccomponents.common.cancel') }}</el-button>
      <el-button type="primary" @click="handleConfirm">{{ $t('openatccomponents.common.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'RoadNameEditDialog',
  props: {
    // 控制弹窗显示/隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 当前编辑的路段方向
    direction: {
      type: String,
      default: ''
    },
    // 当前路段名称
    currentName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      form: {
        name: ''
      }
    }
  },
  watch: {
    // 监听 visible 变化，当弹窗打开时回填当前名称
    visible (val) {
      if (val) {
        this.form.name = this.currentName || ''
      }
    },
    // 监听 currentName 变化
    currentName (val) {
      this.form.name = val || ''
    }
  },
  methods: {
    // 关闭弹窗
    handleClose () {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    // 取消编辑
    handleCancel () {
      this.$emit('update:visible', false)
      this.$emit('cancel')
    },
    // 确认编辑
    handleConfirm () {
      this.$emit('confirm', {
        direction: this.direction,
        name: this.form.name
      })
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>
