<template>
    <div :class="$style.icon1" v-if="category===1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <img :class="$style.icon2" v-else-if="category===2" :src="icon2">
    <img :class="$style.icon3" v-else-if="category===3" :src="icon3">
</template>

<style module>
    .icon1 {
        position: relative;
        height: 1.2rem;
        width: 2.88rem;
        overflow: hidden;
    }

    .icon1 > div:first-of-type,
    .icon1 > div:nth-child(2) {
        position: absolute;
        width: 0;
        height: 0;
        border-right: .54rem solid transparent;
        border-top: .54rem solid #fd6161;
        border-left: .54rem solid #fd6161;
        border-bottom: .54rem solid #fd6161;
        border-radius: .54rem;
        z-index: 10
    }

    @-webkit-keyframes rotate_pacman_half_up {
        0%, 100% {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg)
        }
        50% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @keyframes rotate_pacman_half_up {
        0%, 100% {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg)
        }
        50% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @-webkit-keyframes rotate_pacman_half_down {
        0%, 100% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg)
        }
        50% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }
    }

    @keyframes rotate_pacman_half_down {
        0%, 100% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg)
        }
        50% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }
    }

    @-webkit-keyframes pacman-balls {
        75% {
            opacity: .7
        }
        100% {
            -webkit-transform: translate(-3rem, -.1875rem);
            transform: translate(-1.89rem, -.1875rem)
        }
    }

    @keyframes pacman-balls {
        75% {
            opacity: .7
        }
        100% {
            -webkit-transform: translate(-100px, -.1875rem);
            transform: translate(-1.89rem, -.1875rem)
        }
    }

    .icon1 > div:nth-child(3) {
        -webkit-animation: pacman-balls 1.2s .4s infinite linear;
        animation: pacman-balls 1.2s .4s infinite linear;
        background-color: #6fe4ca
    }

    .icon1 > div:nth-child(4) {
        -webkit-animation: pacman-balls 1.2s .8s infinite linear;
        animation: pacman-balls 1.2s .8s infinite linear;
        background-color: #8ac4ff
    }

    .icon1 > div:nth-child(5) {
        -webkit-animation: pacman-balls 1.2s 1.2s infinite linear;
        animation: pacman-balls 1.2s 1.2s infinite linear;
        background-color: #ffc171
    }

    .icon1 > div:first-of-type {
        -webkit-animation: rotate_pacman_half_up .4s 0s infinite;
        animation: rotate_pacman_half_up .4s 0s infinite
    }

    .icon1 > div:nth-child(2) {
        -webkit-animation: rotate_pacman_half_down .4s 0s infinite;
        animation: rotate_pacman_half_down .4s 0s infinite
    }

    .icon1 > div:nth-child(3), .icon1 > div:nth-child(4), .icon1 > div:nth-child(5), .icon1 > div:nth-child(6) {
        border-radius: 100%;
        margin: .06rem;
        width: .3rem;
        height: .3rem;
        position: absolute;
        -webkit-transform: translate(0, -.1875rem);
        transform: translate(0, -.1875rem);
        top: .54rem;
        left: 2.4rem
    }

    .icon2, .icon3 {
        vertical-align: top;
    }
</style>

<script>
    import icon2 from './image/icon2.gif'

    export default {
      props: {
        category: {
          type: Number,
          default: 1
        }
      },
      data () {
        return {
          icon2
        }
      },
      computed: {
        $style () {
          return this.$options.cssModules
        }
      }
    }
</script>