<template>
  <midea-lottie-view :data="lottieData" :loop="true" :style="styleConfig_"></midea-lottie-view>
</template>

<script>
import ColmoMixin from '../../mixins/colmo'

import black from './loading_black'
import white from './loading_white'
import colmo from './colmo_loading'
import colmo_rect from './colmo_rect'

const iconMap = {
  black: JSON.stringify(black),
  white: JSON.stringify(white),
  colmo: JSON.stringify(colmo),
  colmo_rect: JSON.stringify(colmo_rect)
}

export default {
  mixins: [ColmoMixin],
  props: {
    styleConfig: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: ''
    }
  },
  computed: {
    type_() {
      if (this.type) return this.type
      return this._isColmo ? 'colmo' : 'black'
    },
    lottieData() {
      return iconMap[this.type_]
    },
    styleConfig_() {
      if (this.type_ === 'colmo_rect') return { width: '108px', height: '94px', ...this.styleConfig }
      return { width: '48px', height: '48px', ...this.styleConfig }
    }
  }
}
</script>

<style scoped></style>
