<template>
  <div class="audio_player">
    <audio style="width: 100%" :src="filePath" controls="controls"></audio>
    <!-- <aplayer :music="musicList" autoplay theme="#41b883" /> -->
    <el-button class="audio_btn" size="mini" plain type="primary" @click="btn_downlaod()"
      >下载</el-button
    >
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { getPageListData } from '@/api/main/system/system';
  import { exportFileWav } from '@/utils';

  const filePath = ref('');
  const props = defineProps({
    filePath: {
      type: [Number, String],
    },
  });
  watch(props, (newValue, oldValue) => {
    if (newValue) {
      filePath.value = props.filePath;
    }
  });
  const tableData = ref({});
  onMounted(() => {
    filePath.value = props.filePath;
    getCustomeData('11');
  });
  
  function btn_downlaod() {
    exportFileWav(filePath.value)
    // window.location.href = filePath.value;
  }
  function getCustomeData(customerPhone) {
    getPageListData('/system/customer/PhoneInfo/' + customerPhone).then(({ data }) => {
      tableData.value = data;
      console.log(data);
    });
  }
</script>
<style lang="scss" scoped>
  .audio_player {
    padding: 10px 0;
    text-align: center;
    .audio_btn {
      margin-top: 16px;
      width: 120px;
    }
    .aplayer-controller .aplayer-time .aplayer-volume-wrap + .aplayer-icon {
      display: none;
    }
  }
</style>
