<template>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        t="1595840909244"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        p-id="11656"
        :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="#8D959D"
            p-id="11657"
            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="#8D959D"
            p-id="11658"
            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="#8D959D"
            p-id="11659"
            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;

    private status = 0;
    private interval = 0;

    @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>