<template>
    <div>
        <div id="he-plugin-simple"></div>
    </div>
</template>

<script>
import OnEvent from '../common/OnEvent'

export default {
    extends: OnEvent,
    props: {
        propValue: {
            type: Object,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    watch: {
        propValue: {
            handler(newObject, oldObject) {
                // console.log(newObject, oldObject)
                this.renderWeather()
            },
            deep: true,
        },
    },
    mounted() {
        // console.log(this.propValue.config)
    },
    created() {
        this.renderWeather()
    },
    methods: {
        renderWeather() {
            // 和风天气插件调用
            window.WIDGET = {
                CONFIG: {
                    ...this.propValue.config,
                },
            };
            ((function (d) {
                const c = d.createElement('link')
                c.rel = 'stylesheet'
                c.href = 'https://widget.qweather.net/simple/static/css/he-simple.css?v=1.4.0'
                const s = d.createElement('script')
                s.src = 'https://widget.qweather.net/simple/static/js/he-simple.js?v=1.4.0'
                const sn = d.getElementsByTagName('script')[0]
                sn.parentNode.insertBefore(c, sn)
                sn.parentNode.insertBefore(s, sn)
            })(document))
        },
    },
}
</script>

<style lang="scss" scoped>
.v-weather {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
::v-deep #he-plugin-simple {
    width: 100%;
    height: 100%;
}
</style>
