<template>
  <el-dialog
    v-if="modifyCatalogShow"  
    :visible.sync="modifyCatalogShow" 
    :close-on-click-modal="false" 
    :modal-append-to-body="false"
    @close="cancelHandle" width="689px" v-dialogDrag center>
    <div slot="title" style="display: flex; alignitems: center">
      <span style="fontsize: 16px">{{catalogItem.GroupId?'编辑':'新增'}}目录</span>
    </div>
    <div class="dialog-container">
        <div class="input-item">
        目录名称：<el-input  placeholder="请输入目录名称" v-model="catalogItem.GroupName" required ></el-input>
      </div>
    </div>
    <div slot="footer" class="foot-container">
      <el-button type="primary" @click="saveChange">保 存</el-button>
      <el-button @click="cancelHandle">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props:{
    catalogItem:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    modifyCatalogShow:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
    };
  },
  methods: {
    saveChange(){
      if(!this.catalogItem.GroupName||!this.catalogItem.GroupName.length){
        this.$message.warning('请输入目录名称')
        return
      }
      this.$emit('changeCatalog',this.catalogItem)
    },
    cancelHandle(){
      this.$emit('cancel')
    }
  },
};
</script>

<style scoped lang="scss">
.dialog-container{
  display: flex;
  justify-content: center;
  .input-item{
      width: 350px;
  }
}
</style>
