<template>
  <div>
    <el-dialog
      :title="changeItem ? 'Edit Role' : 'Add Role'"
      :visible.sync="isShow"
      width="40%"
    >
      <div class="flex-row-center">
        <div style="width:180px">Role Name</div>
        <el-input v-model="roleName" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="submit()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
      roleName: "",
      changeItem: {},
    };
  },
  methods: {
    show(item) {
      this.isShow = true;
      this.changeItem = item;
      if (item) {
        this.roleName = item.roleName;
      }
    },
    submit(){
        if (!this.roleName) {
            this.$elmessage.show('please input role name')
            return
        }
    }
  },
};
</script>
