<template>
  <div class='model-box' :style='{width: width + "px", height: height + "px"}'>
    <div>
      <img :src="icon" alt="" width='24' height='24' class='icon'>
      <span class='model-title'>{{title}}</span>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import img1 from './../assets/img/1-1.png';
import img2 from './../assets/img/1-2.png';
import img3 from './../assets/img/1-3.png';
import img4 from './../assets/img/2-1.png';
import img5 from './../assets/img/2-2.png';
import img6 from './../assets/img/3-1.png';
export default {
  name: 'ModelBox',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      title: '',
      icon:'',
      width: 618,
      height: 322
    }
  },
  mounted () {
    this.getTitle()
  },
  methods: {
    getTitle () {
      switch (this.name) {
        case '1-1':
          this.title = '工段损耗汇总'
          this.icon = img1
          break;
        case '1-2':
          this.title = '设备报警'
          this.icon = img2
          break;
        case '1-3':
          this.title = '托数统计'
          this.icon = img3
          break;
        case '2-1':
          this.title = '工段投入和产出'
          this.icon = img4
          break;
        case '3-1':
          this.title = '产线加工成品率'
          this.icon = img6
          break;
        default:
          this.title = '产线投入和产出'
          this.icon = img5
          this.width = 1253
          this.height = 660
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.model-box {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #FFFFFF;
  padding: 14px 16px;
  .icon {
    vertical-align: bottom;
    margin-right: 5px;
  }
  .model-title{
    font-size: 20px;
    color: #000000;
    line-height: 24px;
  }
}
</style>