<template>
  <!-- 新建日程 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <div class="pt-14 px-4 pb-28">
      <!-- 文字部分 -->
      <div class=" rounded-xl h-64 bg-white" />
      <!-- 语音部分 -->
      <!-- <div class="flex items-center justify-center h-50 w-80 mt-4" @click="clickAnimation()">
        <div class="absolute rounded-full bg-green-100 w-40 h-40 flex items-center justify-center" :class="larg">
          <div class=" rounded-full bg-green-200 w-32 h-32 flex items-center justify-center" :class="larg">
            <div class="little rounded-full bg-green-300 w-20 h-20 flex items-center justify-between px-6">
                <div class="rounded-full w-1 h-5 bg-white" :class="long"></div>
                <div class="rounded-full w-1 h-5 bg-white" :class="short"></div>
                <div class="rounded-full w-1 h-5 bg-white" :class="long"></div>
                <div class="rounded-full w-1 h-5 bg-white" :class="short"></div>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-center text-xs text-text-secondary mt-50">长按录音</div>
      </div> -->
      <div class="wrapper relative h-50 mt-4 overflow-hidden">
        <div class="circle rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-green-200" />
        <div class="circle-small rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-green-300" />
        <div class="rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 bg-green-400" />
        <div class="absolute w-7 h-5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 line-wrapper flex items-center justify-between">
          <div
            v-for="i in 4"
            :key="i"
            class="rounded-full w-1 bg-white odd:h-3 even:h-5"
            :class="i % 2 === 0 ? 'long' : 'short'"
          />
        </div>
      </div>
      <div class="flex items-center justify-center text-xs text-text-secondary ">长按录音</div>
      <!--按钮-->
      <div class="fixed bottom-0 left-0 w-full px-4  bg-common-bg py-1.5">
        <c-button>
          发布
        </c-button>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'SpeechRecognition',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  data() {
    return {
      count: 0,
      larg: '',
      long: '',
      short: '',
      mid: ''

    }
  },
  computed: {
    // text() {
    //   return this.currentRate.toFixed(0) + '%';
    // },
  },
  created() {
    // console.log(Mock, 'mock')

  },
  methods: {
    clickAnimation() {
      this.count++
      if (this.count % 2 === 0) {
        this.count = 0
        this.larg = ''
        this.long = ''
        this.short = ''
      } else {
        this.larg = 'larg'
        this.long = 'long'
        this.short = 'short'
      }
    }
  }
})
</script>

<style lang="less" scoped>

  // .wrapper {
  //   -webkit-backface-visibility: hidden;
  //   -moz-backface-visibility: hidden;
  //   backface-visibility: hidden;
  //   -webkit-transform-style: preserve-3d;
  //   -moz-transform-style: preserve-3d;
  //   transform-style: preserve-3d;
  //   -webkit-perspective: 1000;
  //   -moz-perspective: 1000;
  //   perspective: 1000;
  // }

  .circle {
    animation: circle 1s linear infinite normal;
    &-small {
      animation: circle 1s linear 0.5s infinite normal;
    }
  }

  .short {
    animation: shortLine 0.5s ease-in-out infinite alternate;
  }
  .long {
    animation: longLine 0.5s ease-in-out infinite alternate
  }

  @keyframes circle {
    0% {
      width: 5rem;
      height: 5rem;
      opacity: 1;
    }
    100% {
      width: 12rem;
      height: 12rem;
      opacity: 0;
    }
  }

  @keyframes shortLine {
    0% {
      height: 0.75rem;
    }
    100% {
      height: 1.25rem;
    }
  }
  @keyframes longLine {
    0% {
      height: 1.25rem;
    }
    100% {
      height: 0.75rem;
    }
  }
</style>
