<template>
  <section class="dm-vlib">
    <header class="pb10">
      <span>视频列表共{{total}}个</span>
      <el-button type="primary" @click="$router.push('/wechat/temp/video/add')" v-if="!chooseFlag">新建视频</el-button>
    </header>
    <ul class="clearfix" v-loading="loading" :style="scrollStyle">
      <dm-video-item :chooseFlag="chooseFlag"  class="fl" v-for="(v,i) in videoList" :key="i" :videoData="v" @edit="edit" @del="del"></dm-video-item>
    </ul>
    <div class="text-center" v-if="videoList.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="$router.push('/wechat/temp/video/add')">新建视频</el-button>
    </div>
    <el-pagination v-show="videoList.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>
  </section>
</template>
<script>
import { loadVideoList , delVideoService } from "@/service/api/wechatApi.js";
import {formateDateTimeByType} from '@/utils/index.js'
import dmVideoItem from './videoItem';

export default {
  props: {
    mediaId:{
      type:String,
      default:''
    },
    chooseFlag:{
      type:Boolean,
      default:false
    },
    scrollStyle:Object,
  },
  created(){
    this.loadVideoList();
  },
  data() {
    return {
      videoList:[],
      listParams:{
        currentPage:1,
        pageSize:20
      },
      total:1,
      loading:false
    }
  },
  components: {
    dmVideoItem
  },
  methods: {
    handleSizeChange(val) {
      this.listParams.pageSize = val;
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
    },
    async loadVideoList() {
      this.loading = true;
      let res = await loadVideoList(this.listParams);
      this.total = res.result.totalCount;
      this.videoList = res.result.result || [];
      this.videoList.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.$router.push('/wechat/temp/video/edit/'+val)
    },
    del(val) {
      this.$confirm('是否删除该视频?', '提示', {
      confirmButtonText: '确定',
      cancelBUttonText: '取消',
      type: 'warning'
      }).then(() => {
          this.delVideoService(val);
      }).catch(() => {
          this.$tips({type: 'info',message: '已取消删除'});
      });
    },
    async delVideoService(val) {
      try {
        this.loading = true;
        let res = await delVideoService(val);
        this.$tips({type:'success',message:'删除成功'});
        this.loadVideoList();
        this.loading = false;
      } catch (err) {
        this.$tips({type:'error',message:'删除失败'});
        this.loading = false;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dm-vlib {
  header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
