<template>
  <div
    class="c-weather"
    :style="styles"
  >
    <i class="el-icon-cloudy-and-sunny" />&nbsp;19℃
  </div>
</template>

<script>
import { WidgetType } from '../constant'

export default {
  name: WidgetType.WEATHER,
  props: {
    node: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      time: ''
    }
  },
  computed: {
    styles () {
      const {
        width,
        height,
        color,
        fontSize,
        fontWeight,
        textAlign
      } = this.node
      return {
        width: `${width}px`,
        height: `${height}px`,
        color,
        'font-size': `${fontSize}px`,
        'font-weight': fontWeight,
        'justify-content': ({
          left: 'flex-start',
          center: 'center',
          right: 'flex-end'
        })[textAlign]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.c-weather {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  overflow: hidden;
}
</style>
