<template>
  <div class="page-module">
    <div class="module-header">
      <i class="module-icon"/>
      <img :src="imgPath" class="module-icon">
      <span class="module-name">{{ name }}</span>
    </div>
    <div class="module-body">
      <slot/>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PageModule',
  props: {
    name: {
      type: String,
      default() {
        return ''
      }
    },
    icon: {
      type: String,
      default() {
        return ''
      }
    },
    path: {
      type: String,
      default: ''
    }
  },
  computed: {
    imgPath() {
      return this.path ? this.path : `${process.env.VUE_APP_ROUTER}static/svg/${this.icon}.svg`
    }
  }
}
</script>
<style lang="scss">
.page-module {
  margin: 0 auto 12px;
  width: 960px;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 0 32px 24px;
  .module-header {
    margin-bottom: 10px;
    height: 62px;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #EBEEF2;
  }
  .module-name {
    margin-left: 8px;
    font-size: 16px;
    color: #212026;
    font-weight: 700;
  }
}
</style>
