<template>
    <div class="voice-adjust office-card">
        <div class="lamp-basic">
            <span class="lamp-basic-name">噪声</span>
            <div v-if="!replayFlag">
                <div class="lamp-basic-num">{{dbs}}<span>dB</span></div>
                <div class="lamp-basic-text">
                    <span class="lamp-basic-level"> {{dbText}}
                    </span>
                    <van-icon
                        v-if="iconFlag"
                        name="smile-o"
                        style="color:#f0da21"
                    />
                </div>

            </div>
            <div
                v-else
                class="basic-loading"
            >
                <image
                    class="voice-basic-loading"
                    src="{{h5StaticPath}}loading.svg"
                />
                <span class="voice-basic-testing">检测中</span>
            </div>
        </div>
        <div class="voice-img-box">
            <image
                class="voice-img"
                src="{{h5StaticPath}}voice.png"
            />
        </div>

        <div
            class="voice-replay"
            @click.stop="handleReplay"
        >
            <image
                class="voice-replay-img"
                src="{{h5StaticPath}}vioce-replay.svg"
            />
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core'
import config from '@/config'
let RecorderManager = wx.getRecorderManager()
wepy.component({
  externalClasses: ['my-class'],
  data: {
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    replayFlag: false,
    dbs: 45, // 默认值是45
    iconFlag: false
  },
  computed: {
    dbText() {
      let dbText = '适宜'
      if (this.dbs <= 60) {
        dbText = '适宜'
        this.iconFlag = false
      } else {
        dbText = '闭目养神2分钟'
        this.iconFlag = true
      }
      return dbText
    }
  },
  attached() {
    RecorderManager.onFrameRecorded((res) => {
      console.log('onFrameRecorded', res)
      const myTypedArray = new Int16Array(res.frameBuffer)
      var sum = 0
      for (var i = 0; i < myTypedArray.length; i++) {
        sum += Math.abs(myTypedArray[i])
      }
      var mean = sum / myTypedArray.length
      let value = Math.abs(parseFloat(mean))
            // 公式
      let db = parseInt(20 * Math.log10(value))
      this.dbs = db ? parseInt(db) : 45
    })
  },
  methods: {
    vibrateShort() {
      if (wx.canIUse('vibrateShort')) {
        wx.vibrateShort()
      } else {
        wx.vibrateLong()
      }
    },
    handleReplay() {
      this.vibrateShort()
      this.replayFlag = true
      RecorderManager.start({
                // duration:3000, // 录音时长
        frameSize: 4, // 指定帧大小，单位 KB
        sampleRate: 16000, // 采样率
        encodeBitRate: 48000, // 编码码率
        numberOfChannels: 1,  // 录音通道数
        format: 'pcm'  // 音频格式
      })

      setTimeout(() => {
        this.replayFlag = false
        RecorderManager.stop()
      }, 2000)
      wx.uma.trackEvent('officeHome_checkVoice', {key: '噪声'})
    }
  }
})
</script>

<style lang="less">
.office-card {
    height: 274rpx;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.07),
        0px 8rpx 20rpx rgba(0, 0, 0, 0.05);
    border-radius: 50rpx;
    padding: 48rpx 40rpx 60rpx 60rpx;
    background: #ffffff;
    margin-bottom: 30rpx;
}
.lamp-basic {
    font-family: PingFang SC;
    color: #c4c4c4;
    .lamp-basic-name {
        font-weight: 600;
        font-size: 32rpx;
        line-height: 44rpx;
        margin-bottom: 20rpx;
        color: #4d5262;
    }
    .lamp-basic-num {
        font-family: Montserrat;
        font-size: 64rpx;
        line-height: 78rpx;
        color: #1b144e;
        label {
            font-weight: 800;
            font-size: 24rpx;
            margin-left: 8rpx;
            line-height: 54rpx;
            vertical-align: top;
            color: #c4c4c4;
        }
    }
    .lamp-basic-text {
        display: flex;
    }
    .lamp-basic-level {
        font-size: 28rpx;
        line-height: 40rpx;
        margin-right: 8rpx;
    }
    .basic-loading {
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        .voice-basic-loading {
            margin-right: 20rpx;
            width: 36rpx;
            height: 36rpx;
        }
        .voice-basic-testing {
            font-size: 32rpx;
            font-style: normal;
            font-weight: 600;
            line-height: 44rpx;
        }
    }
}
.voice-img-box {
    position: absolute;
    right: 50rpx;
    top: 0px;
    width: 258rpx;
    height: 150rpx;
    .voice-img {
        width: 100%;
        height: 100%;
    }
}
.voice-replay {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 148rpx;
    height: 148rpx;
    height: 148rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c4c4c4;
    .voice-replay-img {
        width: 36rpx;
        height: 36rpx;
    }
}
</style>

<config>
{
    usingComponents: {
        "van-icon": "module:@vant/weapp/dist/icon"
    }
}
</config>
