<template>
  <el-dialog title="语音列表" :visible.sync="visible" center>
    <el-button @click="mergeAllAudio">合并全部音频</el-button>
    <el-table v-loading="loading" :data="rowData.records">
      <el-table-column prop="sort" label="序号" width="80"/>
      <el-table-column prop="content" label="音频">
        <template slot-scope="scope">
          <template v-if="scope.row.auditContent">
            <audio :src="scope.row.auditContent + (scope.row.timestamp || '')" type="audio/wav" controls="controls"></audio>

          </template>
          <template v-else>
            <span>暂无语音</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="操作">
        <template slot-scope="scope">
          <el-button @click="() => $set(scope.row,'timestamp','?t=' + ((new Date()).getTime()))">刷新</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
        layout="total,sizes, prev, pager, next,jumper" :total="rowData.total">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      loading: false,
      limit: 10,
      page: 1,
      row: {},
      rowData: {},
    }
  },
  methods: {
    open(row){
      this.row = row;
      this.visible = true;
      console.log('弹出页row->',row);
      //加载数据
      this.loadData(1);
    },
    loadData(){
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('messageAudio/batchList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'batch': this.row.batch
          })
        }).then(({ data }) => {
          this.loading = false
          let returnData = data.data
          this.rowData = returnData
        })
    },
    mergeAllAudio(){
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('messageAudio/mergeAllAudio'),
          method: 'get',
          timeout: 5 * 60 * 1000,//5分钟
          params: this.$http.adornParams({
            'batch': this.row.batch
          })
        }).then(({ data }) => {
          this.loading = false
          //弹出提示，告知合并成功
          this.$message({ message: '操作成功', type: 'success' });
          this.visible = false;
          this.$$emit('reload');
        })
    },
    handleSizeChange(val) {
      this.limit = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.page = val
      this.loadData()
    },

  }
}
</script>

<style>

</style>