<template>
  <Modal :width="width" v-model="show" footer-hide >
    <div slot="header" class="modal-header">
      {{ title }}
    </div>
    <div class="content">
      <slot />
      <div  class="btn-w">
        <Button class="cancle-btn" @click="close" size="large">取消</Button>
        <Button class="submit-btn" type="primary" size="large" @click="submit">{{submitText}}</Button>
      </div>
    </div>
    
  </Modal>
</template>

<script>
export default {
  props: {
    title: String,
    width: Number,
    show: Boolean,
    submitText: {
      type: String,
      default: '保存'
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    submit () {
      this.$emit('submit')
    }
  }
}
</script>
<style lang="less" scoped>
.modal-header {
  line-height: 50px;
  padding-left: 20px;
  font-size: 16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.btn-w {
  text-align: right;
  // padding-right: 10px;
}
.cancle-btn {
  border: 1px solid #555555;
  background: transparent;
  color: #fff;
  margin-right: 14px;
}
.content {
  padding: 4px;
}
</style>