<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 === 'news' ? 'media-current-nav' : ''" @click="getMediaType('news')">
          <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" v-if="type !== 'news'">
            <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 && type === 'news'" class="d-start" style="margin-bottom: 20px">
          <div v-for="(item,index) in mediaList" :key="index" class="news-media">
            <el-card :body-style="{ padding: '0px' }">
              <div v-for="(child, childIndex) in item.content.news_item" style="position: relative">
                <div v-if="item.content.news_item.length === 1" class="single-cover">
                  <div class="title">{{child.title}}</div>
                  <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
                  <div class="digest">{{child.digest}}</div>
                  <a class="preview" :href="child.url" target="_blank">
                    预览文章
                  </a>
                </div>
                <div v-else-if="item.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
                  <div v-if="childIndex === 0" class="muti-cover">
                    <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
                    <div class="bottom-title">{{child.title}}</div>
                  </div>
                  <div class="next-cover" v-else>
                    <span class="next-title">{{child.title}}</span>
                    <img class="next-img" :src="child.thumb_url"/>
                  </div>
                  <a class="preview" :href="child.url" target="_blank">
                    预览文章
                  </a>
                  </div>
              </div>
            </el-card>
          </div>
        </div>
        <page v-if="mediaList.length > 0 && type === 'news'" :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
        <div v-if="mediaList.length > 0 && type !== 'news'">
          <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'" target="_blank">
                  <img style="width: 60px;" :src="scope.row.url"/>
                </a>
                <!--<video v-if="type === 'video'" width="100" height="100" controls="controls">-->
                  <!--<source :src="scope.row.info.down_url"/>-->
                  <!--Your browser does not support the video tag.-->
                <!--</video>-->
                <a :href="scope.row.info.down_url" v-if="type === 'video' && scope.row.info && scope.row.info.down_url" target="_blank">
                  {{scope.row.info.title}}
                </a>
                <audio v-if="type === 'voice'" id="myAudio" controls>
                  <source :src="scope.row.url"/>
                  Your browser does not support the audio element.
                </audio>
                <!--<div v-if="type === 'news'">-->
                  <!--<div v-html="scope.row.content.news_item[0].content"></div>-->
                <!--</div>-->
              </template>
            </el-table-column>
          </el-table>
          <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
        </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: 'news',
          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)
        },
        onSizeChange(val){
          this.nowPage = 1
          this.limit = 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) {
          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: inline-block;
    .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;
      }
    }
  }
  .clear-both{
  &:after{
     content: '';
     display: block;
     clear: both;
   }
  }
</style>
<style>
  .news-media {
    padding: 10px;
    width: 300px;
  }
  .news-media img{
    width: 100%;
  }
  .f-news {
    max-height: 300px;
    overflow: hidden;
  }
  .s-news img {
    width: 50px;
    float: right;
  }
  .title {
    /* font-size: 16px; */
    font-weight: 400;
    display: block;
    /* line-height: 1.2; */
    color: #353535;
  }
  .digest {
    padding-top: 12px;
    color: #9A9A9A;
    font-size: 14px;
  }
  .single-cover {
    padding: 20px 15px 15px;
  }
  .muti-title {
    position: absolute;
  }
  .muti-cover {
    position: relative;
    padding: 20px 15px 0 15px;
  }
  .bottom-title {
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.55);
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    padding: 8px 12px;
  }
  .next-cover {
    padding: 12px 15px;
    position: relative;
  }
  .next-img {
    float: right;
    margin-left: 12px;
    width: 60px !important;
    height: 60px !important;
  }
  .next-title {
    overflow: hidden;
    font-weight: 400;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    color: #353535;
  }
  .single-cover:hover .preview,.bottomCover:hover .preview{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .d-start {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .preview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    text-decoration: none;
  }
</style>