<template>
  <div class="icon-main icon_act">
    <svg-icon icon-class="fwgl_ic_arrow" class="svg_out"></svg-icon>
    <svg-icon v-if="state == '运行中'" icon-class="fwgl_ic_operation" class="svg_in"></svg-icon>
    <svg-icon v-else-if="state == '等待中'" icon-class="fwgl_ic_stop" class="svg_in"></svg-icon>
    <svg-icon v-else-if="state == '停止'" icon-class="fwgl_ic_wait" class="svg_in"></svg-icon>
    <svg-icon v-else icon-class="fwgl_ic_bufenguzhang" class="svg_in"></svg-icon>
  </div>
</template>

<script>
export default {
  props: {
    state: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  components: {},
  mounted: function() {
    // this.init();
  },
  computed: {},
  methods: {}
};
</script>

<style scoped>
.icon-main {
  /* margin-top: 100px; */
  width: 60px;
}
.icon_act {
  /* margin-left: 50px; */
  position: relative;
}
.svg_out {
  font-size: 60px;
  animation: out_t;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.svg_in {
  font-size: 24px;
  position: absolute;
  top: 18px;
  left: 18px;
}
@keyframes out_t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>