<template>
  <el-dialog :visible.sync="visible" width="400px">
    <div style="display: flex; justify-content: center; align-items: center">
      <img
        v-if="weatherInfo.solarName"
        class="tab-solar-img"
        :src="getSolarImgUrl()"
      />
    </div>
    <div v-html="weatherInfo.solarRemark" class="solarRemark"></div>
  </el-dialog>
</template>

<script>
export default {
  name: 'slarDetails',

  props: ['weatherInfo'],
  data() {
    return {
      visible: false
    };
  },
  created() {},
  directives: {
    maxWidth(el, binding) {
      el.style.maxWidth = binding.value + 'px';
    }
  },

  methods: {
    open() {
      this.visible = true;
      const imgs = this.$el.getElementsByTagName('img');
      for (let i = 0; i < imgs.length; i++) {
        imgs[i].setAttribute('v-max-width', '360');
      }
    },
    getSolarImgUrl() {
      return require('@/assets/images/solar/' +
        this.weatherInfo.solarName +
        '.jpg');
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-solar-img {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  overflow: hidden;
}

</style>
