<template>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        :width="size"
        :height="size"
    >
        <path
            d="M56.888889 512a105.016889 102.4 90 1 0 204.8 0 105.016889 102.4 90 1 0-204.8 0Z"
            :fill="fill"
            v-if="!status || status >= 1"
        />
        <path
            d="M425.415111 782.449778a68.266667 68.266667 0 0 1-97.792-95.288889A249.912889 249.912889 0 0 0 398.222222 512c0-66.787556-25.713778-129.137778-70.542222-175.160889a68.266667 68.266667 0 0 1 97.735111-95.288889A386.389333 386.389333 0 0 1 534.755556 512c0 102.627556-39.822222 199.111111-109.340445 270.449778z"
            :fill="fill"
            v-if="!status || status >= 2"
        />
        <path
            d="M618.496 980.48a68.266667 68.266667 0 0 1-97.792-95.288889A532.707556 532.707556 0 0 0 671.288889 512a532.707556 532.707556 0 0 0-150.584889-373.191111A68.266667 68.266667 0 0 1 618.496 43.52 669.184 669.184 0 0 1 807.822222 512c0 177.891556-68.835556 344.917333-189.326222 468.48z"
            :fill="fill"
            v-if="!status || status >= 3"
        />
    </svg>
</template>

<script lang="ts">
    import { Component, Prop, Vue, Watch } from "vue-property-decorator";

    @Component({ components: {} })
    export default class VoiceIcon extends Vue {
        @Prop({ default: 25 })
        private size!: number;

        @Prop()
        private loading!: boolean;

        @Prop()
        private readonly white!: boolean;

        private status = 0;
        private interval = 0;

        private get fill() {
            return this.white ? "#fff" : "#8D959D";
        }

        @Watch("loading")
        private onLoadingChanged() {
            if (this.loading) {
                this.interval = window.setInterval(() => {
                    const v = this.status + 1;
                    if (v > 3) {
                        this.status = 0;
                    } else {
                        this.status = v;
                    }
                }, 500);
            } else {
                clearInterval(this.interval);
                this.status = 0;
            }
        }

        beforeDestroy() {
            clearInterval(this.interval);
        }
    }
</script>