<template>
  <section class="dm-alib">
    <header>
      <span>语音列表共{{total}}个</span>
      <el-button type="primary"  @click="add">新建语音</el-button>
    </header>
    <ul class="clearfix" v-loading="loading">
      <dm-audio-item class="fl" v-for="(v,i) in audioList" :key="i" :audioData="v" @edit="edit" @del="del"></dm-audio-item>
    </ul>
    <div class="text-center" v-if="audioList.length === 0">
      <img class="block block-center pt100" width="60" height="60" src="../../../assets/img/no-data_icon.png" alt="">
      <el-button class="block block-center mt10" type="text" @click="add">新建语音</el-button>
    </div>
    <el-pagination v-show="audioList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
    <dm-audio-dialog :show.sync="audioDialogShow" :voiceId="currentVoiceId" @refresh="loadAudioList"></dm-audio-dialog>
  </section>
</template>
<script>
import { loadAudioList , delAudioService } from "@/service/api/wechatApi.js";
import {formateDateTimeByType} from '@/utils/index.js'
import dmAudioItem from './audioItem';
import dmAudioDialog from './audioDialog';

export default {
  created(){
    this.loadAudioList();
  },
  data() {
    return {
      audioList:[],
      listParams:{
        currentPage:1,
        pageSize:20
      },
      total:1,
      loading:false,
      audioDialogShow:false,
      currentVoiceId:''
    }
  },
  components: {
    dmAudioItem,
    dmAudioDialog
  },
  methods: {
    handleSizeChange(val) {
      this.listParams.pageSize = val;
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
    },
    async loadAudioList() {
      this.loading = true;
      let res = await loadAudioList(this.listParams);
      this.total = res.result.totalCount;
      this.audioList = res.result.result ||[];
      this.audioList.map(v => {
        if (typeof v.createTime === 'number') {
          v.createTimeStr = formateDateTimeByType(v.createTime,'yyyy-MM-dd-HH-mm-ss')
        } else {
          v.createTimeStr = ''
        }
      })
      this.loading = false;
    },
    edit(val) {
      this.currentVoiceId = val;
      this.audioDialogShow = true;
    },
    add() {
      this.currentVoiceId = '';
      this.audioDialogShow = true;
    },
    del(val) {
      this.$confirm('是否删除该语音?', '提示', {
      confirmButtonText: '确定',
      cancelBUttonText: '取消',
      type: 'warning'
      }).then(() => {
          this.delAudioService(val);
      }).catch(() => {
          this.$tips({type: 'info',message: '已取消删除'});
      });
    },
    async delAudioService(val) {
      try {
        this.loading = true;
        let res = await delAudioService(val);
        this.$tips({type:'success',message:'删除成功'});
        this.loadAudioList();
        this.loading = false;
      } catch (err) {
        this.$tips({type:'error',message:'删除失败'});
        this.loading = false;
      }

    }
  }
}
</script>
<style lang="scss" scoped>
.dm-alib {
  header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
