<template>
  <div class="media" v-loading="loading">
    <h2 class="media-title">素材管理</h2>
    <div>
      <ul class="media-navs">
        <!---->
        <!--<li class="media-nav js_top" :class="type === 'view' ? 'media-current-nav' : ''" @click="getMediaType('view')">-->
          <!--<a href="javascript:void(0);">图文消息<br /></a>-->
        <!--</li>-->
        <li class="media-nav js_top" :class="type === 'image' ? 'media-current-nav' : ''"  @click="getMediaType('image')">
          <a href="javascript:void(0);">图片<br /></a>
        </li>
        <li class="media-nav js_top" :class="type === 'voice' ? 'media-current-nav' : ''" @click="getMediaType('voice')">
          <a href="javascript:void(0);">语音<br /></a>
        </li>
        <li class="media-nav js_top" :class="type === 'video' ? 'media-current-nav' : ''" @click="getMediaType('video')">
          <a href="javascript:void(0);">视频<br /></a>
        </li>
        <!---->
      </ul>
      <div class="media-panel">
        <div class="media-panel-top flex-bt">
          <div class="media-panel-top-left">
            {{typeText[type]}}(共{{total}}条)
          </div>
          <div class="progress" v-if="showProgress">
            <el-progress :percentage="progress" status="success"></el-progress>
          </div>
          <div class="media-panel-top-right">
            <el-upload
              class="upload-demo"
              ref="upload"
              action="/api/public/upload/zone"
              :http-request="uploadFile"
              :show-file-list="false"
              :data="uploadParam">
              <!--:on-success="handleUploadSuccess"-->
              <el-button style="order:2;" slot="trigger" size="small" type="primary" v-if="!$store.state.readonly">选取文件</el-button>
              <!--<div slot="tip" class="el-upload__tip">大小不超过5M</div>-->
            </el-upload>
          </div>
        </div>
        <div v-if="mediaList.length > 0">
          <el-table
            :data="mediaList"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="media_id"
              label="mediaId">
            </el-table-column>
            <el-table-column
              label="URL">
              <template slot-scope="scope">
                <a :href="scope.row.url" v-if="type === 'image'">
                  <img style="width: 60px;" :src="scope.row.url"/>
                </a>
                <video v-if="type === 'video'" width="100" height="100" controls="controls">
                  <source :src="scope.row.url"/>
                  Your browser does not support the video tag.
                </video>
                <audio v-if="type === 'voice'" id="myAudio" controls>
                  <source :src="scope.row.url"/>
                  Your browser does not support the audio element.
                </audio>
              </template>
            </el-table-column>
          </el-table>
          <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getMediaListApi,uploadFileApi} from "../../service/api";
  import page from '../framework/page'
  export default {
      name: "resource",
      data() {
        return {
          mediaList: [],
          nowPage: 1,
          total: 0,
          limit: 5,
          loading: false,
          type: 'image',
          imageList: [],
          uploadParam: {
            type: 'wechat',
            chunk: 0,
            count: 1
          },
          fileUid:null,
          showProgress: false,
          typeText: {
            'image' : '图片',
            'video' : '视频',
            'voice' : '语音'
          }
        }
      },
      components:{
        page
      },
      mounted(){
        this.getMediaList(this.type)
      },
      computed:{
        progress(){
          return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100
        }
      },
      methods: {
        getMediaType(type){
            this.type = type;
            this.nowPage = 1;
            this.getMediaList(type);
        },
        onPageChange(val){
          this.nowPage = val
          this.getMediaList(this.type)
        },
        getMediaList(type){
          let json = {
            type: type,
            page: this.nowPage,
            limit: this.limit
          };
          this.loading = true;
          getMediaListApi(json).then(res=>{
            this.loading = false;
            this.type = type;
            this.mediaList = res.item;
            this.total = res.total_count;
            if (res.item.length === 0 ) {
              this.$message({
                showClose: true,
                message: '暂无数据'
              });
            }
          }).catch(() => {
            this.loading = false;
          })
        },
        handleUploadSuccess(res) {
            console.log('handleUploadSuccess', res)
          if (res.code === 200) {
            this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
          }
        },
        uploadFile(a) {
          this.loading = true;
          this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
          this.fileUid = a.file.uid;
          this.showProgress = true;
          uploadFileApi({file:a.file,type:'wechat'}).then(res=>{
            this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
            this.getMediaList(this.type)
            this.loading = false;
            this.showProgress = false;
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
          }).catch(()=>{
            this.loading = false;
            this.showProgress = false;
          })
        }
      }
    }
</script>

<style scoped lang="less">
  .progress {
    width: 50%;
  }
  .flex-bt {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .el-upload__tip {
    margin-right: 15px;
    font-size: 13px;
    color: #8d8d8d;
    order: 1;
  }
  .upload-demo {
    display: flex;
    .el-upload {
      order: 2;
    }
  }
  .media {
    margin-bottom: 40px;
    padding: 20px 0;
    &-title {
       font-size: 26px;
       font-weight: 400;
       line-height: 1;
       margin-bottom: 20px;
       margin-left: 20px;
    }
    &-navs {
       text-align: left;
       line-height: 1;
       border-bottom: 1px solid #E0E1E2;
       font-size: 16px;

    }
    &-nav {
       display: inline-block;
       margin-right: 24px;
       margin-bottom: -1px;
       line-height: 40px;
        a {
          display: block;
          text-decoration: none;
          color: #353535;
          width: auto;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
          max-width: 120px;
        }
    }
    &-current-nav {
      border-bottom: 2px solid #1AAD19;
      a {
        color: #44B549;
      }
    }
    &-panel {
       padding: 24px 40px;
       margin-bottom: 30px;
       background-color: #FFFFFF;
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
      .el-upload {
        order: 2;
      }
    }
  }
</style>