<template>
  <div>
    <div class="medias">
    <div class="btn-push">
      <span v-if="!tAudio.id">请选择音频素材</span>
      <div class="audio-con" v-else>
          <span>{{tAudio.name}}</span>
          <div class="del">
              <span @click="del" class="ui-button submit">删除</span>
          </div>
      </div>
    </div>
  </div>
  <button class="ui-button submit" @click="selectHandle">选择音频</button>
  <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
      <Table
        :list="list"
        :tabHeader="$MAPTABLEHEADER[type]"
        @updateList="update"
        @cancle="isShowSelect = false"
        :title="`选择${$MARERIALSTR[type]}`"
        @changeCurrent="changeCurrent"
        :paging="paging"
        @submit="handleSelect"
      >
    </Table>
  </div>
  </div>
</template>

<script>
import { getMaterialList} from "@/api";
import Table from "@/components/tableSelect";
import { changeByteUnit } from '@/utils/file'

export default {
  components:{Table},
  props:['audio'],
  data(){
    return {
      type:'audio',
      tAudio:{...this.audio},
      isShowSelect:false,
      list:[],
      paging: {
        pageSize: 8,
        pageNum: 1,
        total: 0,
        showSize: 4,
        current: 1
      },
    }
  },
  methods:{
    del(){
      this.tAudio = ''
    },
    selectHandle(){
      this.isShowSelect = true 
      this.getMaterialList()
    },
    changeCurrent(data){
      this.paging.pageNum = data;
    },
    update(data) {
      this.key = data;
      this.getMaterialList();
    },
    handleSelect(data){
      this.tAudio = {...data[0]}
      this.isShowSelect = false
    },
    getMaterialList() {
      getMaterialList(
        {
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize,
          searchKey: this.key,
          type:this.type
        },
        (data) => {
          this.list = [];
          setTimeout(() => {
            this.paging.pageNum = data.data.pageNum;
            this.paging.pageSize = data.data.pageSize;
            this.paging.total = data.data.total;
            this.list = data.data.list.map(i=>{
              i.fileSize = changeByteUnit(Number(i.fileSize))
              return i
            })
          })
        }
      );
    },
  },
  watch:{
    "paging.pageNum": function () {
      this.isShowSelect && this.getMaterialList();
    },
    isShowSelect(newVal){
      if (!newVal) {
        this.paging.pageNum = 1
      }
    },
    tAudio(newVal){
      this.$emit('audioChange',newVal)
    }
  }
}
</script>

<style lang="less" src="./style.less"></style>

<style lang="less" scoped>
.ui-button{
  width: 100%;
  margin-top: 10px;
}
.medias{
  min-height: 70px;
  overflow-y: auto;
.audio-con{
  width: 100%;
  height: 100%;
  position: relative;
  >span{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    width: 90%;
    color: @color;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .del{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
      background: rgba(0, 0, 0, 0.5);
      >.ui-button{
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 0 10px;
        margin: 0;
        line-height: 24px;
        height: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
    &:nth-of-type(3n){
      margin-right: 0;
    }
    &:hover{
      .del{
        display: block;
      }
    }
}
}
</style>
