<template>
  <el-dialog
    title="自动回复"
    center
    :visible.sync="dialogObj.show"
    width="900px"
    append-to-body>
    <div class="focus-reply">
      <div class="content">
        <div class="inner" v-loading="loading">
          <ul class="weui-desktop-msg-sender__tabs">
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news')">图文</li>
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news-item' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news-item')">图文链接</li>
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'link' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('link')">链接</li>
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('text')">文字</li>
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li>
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('voice')">语音</li>
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" :class="type === 'video' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('video')">视频</li>
          </ul>
          <div class="inner-bottom">
            <div class="img-action" v-if="type === 'image'">
              <template v-if="imageContent ">
                <img style="max-width: 80%;" v-if="imageContent.content" :src="imageContent.content"/>
              </template>
              <div class="display-b">
                <div class="img-create-access" v-if="!showMedia">
                  <a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
                </div>
              </div>
              <div v-if="showMedia && mediaList.length > 0">
                <el-table
                  :data="mediaList"
                  @row-click="onChooseMedia"
                  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" target="_blank">
                        <img style="width: 60px;" :src="scope.row.url"/>
                      </a>
                    </template>
                  </el-table-column>
                </el-table>
                <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
              </div>
            </div>
            <div class="img-action" v-if="type === 'link' || type === 'news-item'">
              <el-form ref="form">
                <el-form-item label="标题">
                  <el-input v-model="linkContent.title"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                  <el-input v-model="linkContent.description"></el-input>
                </el-form-item>
                <el-form-item label="跳转链接">
                  <el-input v-model="linkContent.url"></el-input>
                </el-form-item>
                <el-form-item label="缩略图">
                  <el-upload
                    action="/api/public/upload/zone"
                    :http-request="uploadFile"
                    :class="{disabled:!uploadLinkShow}"
                    :before-upload="beforeAvatarUpload"
                    list-type="picture-card"
                    :file-list="imageLinkList"
                    :on-success="handleAvatarSuccess"
                    :on-remove="handleRemove"
                    :limit="1">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
              </el-form>
            </div>
            <div class="img-action" v-if="type === 'news'">
              <template v-if="newsContent && newsContent.content">
                <div class="news-media">
                  <div v-for="(child, childIndex) in newsContent.content.news_item" style="position: relative">
                    <div v-if="newsContent.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="newsContent.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 clear-both" 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>
                </div>
              </template>
              <div class="display-b">
                <div class="img-create-access" v-if="!showMedia">
                  <a href="javascript:;" class="img-create-access__link" @click="getMediaList(type)">从素材库中选择</a>
                </div>
              </div>
              <div v-if="showMedia && mediaList.length > 0">
                <el-table
                  :data="mediaList"
                  @row-click="onChooseMedia"
                  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="图文"
                  className="news-media">
                    <template slot-scope="scope">
                      <div v-for="(child, childIndex) in scope.row.content.news_item" style="position: relative">
                        <div v-if="scope.row.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="scope.row.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 clear-both" 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>
                    </template>
                  </el-table-column>
                </el-table>
                <page2 :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
              </div>
            </div>
            <div class="img-action" v-if="type === 'video'" style="text-align: left">
              <template v-if="videoContent && videoContent.content">
                <a :href="videoContent.content.down_url" target="_blank" v-if="videoContent.content && videoContent.content.down_url">
                  {{videoContent.content.title}}
                </a>
              </template>
              <div class="display-b">
                <div class="img-create-access" v-if="!showMedia">
                  <a href="javascript:;" class="img-create-access__link" @click="getMediaList(type)">从素材库中选择</a>
                </div>
              </div>
              <div v-if="showMedia && mediaList.length > 0">
                <el-table
                  :data="mediaList"
                  @row-click="onChooseMedia"
                  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.info.down_url" target="_blank" v-if="scope.row.info && scope.row.info.down_url">
                        {{scope.row.info.title}}
                      </a>
                    </template>
                  </el-table-column>
                </el-table>
                <page3 :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
              </div>
            </div>
            <div class="img-action" v-if="type === 'voice'" style="text-align: left">
              <div class="display-b">
                <div class="img-create-access" v-if="!showMedia">
                  <a href="javascript:;" class="img-create-access__link" @click="getMediaList(type)">从素材库中选择</a>
                </div>
              </div>
              <div v-if="showMedia && mediaList.length > 0">
                <el-table
                  :data="mediaList"
                  @row-click="onChooseMedia"
                  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.info.down_url" target="_blank" v-if="scope.row.info && scope.row.info.down_url">
                        {{scope.row.info.title}}
                      </a>
                    </template>
                  </el-table-column>
                </el-table>
                <page4 :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
              </div>
            </div>
            <div class="inner-emotion_editor" v-else-if="type === 'text'">
              <div class="inner-edit_area">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8}"
                  placeholder="请输入内容"
                  v-model="content">
                </el-input>
              </div>
             <div style="float: right">
               <el-popover
                 placement="bottom-end"
                 width="400"
                 :offset="10"
                 trigger="hover"
                 v-model="showEmotion">
                 <div>
                   <emotion @emotion="handleEmotion" :height="200" ></emotion>
                 </div>
                 <el-button @click="showEmotion = !showEmotion" slot="reference" type="text">
                   <span class="icon_emotion emotion_switch"></span>
                 </el-button>
               </el-popover>
             </div>
            </div>
          </div>
          <div class="tool_bar">
            <el-button @click="close">取 消</el-button>
            <el-button class="weui-desktop-btn weui-desktop-btn_primary" @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
    import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi,getTeacherListApi,uploadFileApi} from "../../service/api";
    import page from '../framework/page'
    import page2 from '../framework/page'
    import page3 from '../framework/page'
    import page4 from '../framework/page'
    import emotion from '../framework/Emotion/index'
    export default {
      name: "focusReplyDialog",
      props:[
        'dialogObj'
      ],
      data(){
        return{
          show: false,
          loading:false,
          showEmotion: false,
          total:0,
          nowPage:1,
          limit: 3,
          id: null,
          form:{
            index: -1,
            desc: {}
          },
          content: '',
          imageContent: '',
          newsContent: '',
          videoContent: '',
          voiceContent: '',
          type: 'news',
          mediaList: [],
          mediaListMock:  [],
          showMedia: false,
          pickerOptions1: {
            disabledDate(time) {
              return !(time.getTime() > Date.now());
            }
          },
          rules:{
            value:[
              { required: true, message: '请输入规则名称', trigger: 'change' }
            ],
            desc:[
              { required: true, message: '请输入回复内容', trigger: 'change' }
            ],
            qr:[
              { required: true, message: '请输入二维码', trigger: 'change' }
            ]
          },
          imageList: [],
          uploadShow: true,
          uploadLinkShow: true,
          linkContent: {
            title: '',
            description: '',
            url: '',
            thumb_url: ''
          },
          imageLinkList: []
        }
      },
      components:{
        page,
        page2,
        page3,
        page4,
        emotion
      },
      mounted(){
        this.initDialog();
      },
      filters: {
      },
      methods:{
        handleEmotion (i) {
          this.content += i
        },
        onChangeType(type){
           this.type = type;
           this.mediaList = [];
           this.showMedia = false;
           this.nowPage = 1;
        },
        initDialog(){
          this.form.index = this.dialogObj.index
          this.form.desc = this.dialogObj.desc
          if (this.form.index === -1) {
            this.type = 'news'
            this.newsContent = ''
          } else {
            this.type = this.form.desc.type;
            if (this.type === 'text') {
              this.content = this.form.desc.content
            } else {
              let obj = {
                type: this.type
              }
              if(this.form.desc.content) {
                obj.content = this.form.desc.content
              }
              if(this.form.desc.media_id) {
                obj.media_id = this.form.desc.media_id
              }
              if (this.type === 'image') {
                this.imageContent = obj;
              } else if (this.type ==='news') {
                this.newsContent = obj
              } else if (this.type === 'voice') {
                this.voiceContent = obj
              } else if (this.type === 'video') {
                this.videoContent = obj
              } else if (this.type === 'link' || this.type === 'news-item') {
                this.linkContent = {
                  title: this.form.desc.title,
                  description: this.form.desc.description,
                  url: this.form.desc.url,
                  thumb_url: this.form.desc.thumb_url
                }
                this.imageLinkList = [{name:this.form.desc.thumb_url,url:this.form.desc.thumb_url}]
              }
            }
          }

        },
        close(){
          this.$emit("changeShow", false);
        },
        save(){
          let json = this.form
          if (this.type === 'text') {
            if (!this.content) {
              this.$message({
                showClose: true,
                message: '请输入文本内容'
              });
              return;
            }
            let obj = {
              type : this.type,
              content: this.content
            };
            json.desc = obj
          } else if (this.type === 'image') {
            if (!this.imageContent) {
              this.$message({
                showClose: true,
                message: '请选择图片'
              });
              return
            }
            json.desc = this.imageContent
          } else if (this.type === 'news') {
            if (!this.newsContent) {
              this.$message({
                showClose: true,
                message: '请选择图文'
              });
              return
            }
            json.desc = this.newsContent
          }else if (this.type === 'video') {
            if (!this.videoContent) {
              this.$message({
                showClose: true,
                message: '请选择视频'
              });
              return
            }
            json.desc = this.videoContent
          }else if (this.type === 'news-item' || this.type === 'link') {
            this.linkContent.type = this.type
            if (!this.linkContent.title) {
              this.$message({
                showClose: true,
                message: '请输入标题'
              });
              return;
            }
            if (!this.linkContent.description) {
              this.$message({
                showClose: true,
                message: '请输入描述'
              });
              return;
            }
            if (!this.linkContent.url) {
              this.$message({
                showClose: true,
                message: '请输入跳转链接'
              });
              return;
            }
            if (!this.linkContent.thumb_url) {
              this.$message({
                showClose: true,
                message: '请上传缩略图'
              });
              return;
            }
            json.desc = this.linkContent
          }
          this.$emit("changeShow", false);
          this.$emit("reflash", json)
        },
        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.total = res.total_count;
            if (res.item.length === 0 ) {
              this.$message({
                showClose: true,
                message: '暂无数据'
              });
              this.showMedia = false;
            } else {
              this.showMedia = true;
              this.mediaList = res.item;
            }
          }).catch(() => {
            this.loading = false;
            this.showMedia = false;
          })
        },
        onChooseMedia(val){
          if(this.type === 'news') {
            this.addContent(this.type, val.content, val.media_id);
          } else if(this.type === 'video'){
            this.addContent(this.type, val.info, val.media_id);
          } else {
            this.addContent(this.type, val.url, val.media_id);
          }
          this.showMedia = false;
        },
        addContent(type, content, mediaId) {
          let obj = {};
          if (content) {
            obj = {
              type: type,
              content: content
            };
          }
          if (mediaId) {
            obj.media_id = mediaId;
          }
          if (type === 'news') {
              this.newsContent = obj
          } else if(type === 'video'){
             this.videoContent = obj
          } else{
            this.imageContent = obj
          }
        },
        uploadFile(a) {
          this.loading = true;
          this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
          if (this.type === 'link' || this.type === 'news-item') {
            uploadFileApi({file:a.file,type:'local'}).then(res=>{
              this.imageLinkList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
              this.loading = false;
              this.$message({
                type: 'success',
                message: '上传成功!'
              });
              this.linkContent.thumb_url = process.env.IMAGE_URL_HEAD + res.url;
            }).catch(()=>{
              this.loading = false;
            })
          }
        },
        handleAvatarSuccess(res) {
          if (this.type === 'link' || this.type === 'news-item') {
            this.imageLinkList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
          }
        },
        beforeAvatarUpload(){
          if (this.type === 'link' || this.type === 'news-item') {
            this.uploadLinkShow = false
          }
        },
        handleRemove(){
          if (this.type === 'link' || this.type === 'news-item') {
            this.uploadLinkShow = true
          }
        }
      }
    }
</script>

<style scoped>
  .focus-reply {
    padding: 30px;
  }
  ul, ol {
    padding-left: 0;
    list-style-type: none;
  }
  .title {
    color: #353535;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }
  .content {
  }
  .inner {
    position: relative;
    border: 1px solid #E4E8EB;
    background-color: #FFFFFF;
  }
  .inner-bottom {
    border-top: 1px solid #E4E8EB;
  }
  .img-action {
    padding: 17px 20px;
    min-height: 215px;
    text-align: center;
  }
  .img-create-access {
    position: relative;
    border: 2px dotted #E4E8EB;
    width: 48.6%;
    height: 211px;
    text-align: center;
  }
  /*.img-create-access:first-child {*/
    /*float: left;*/
  /*}*/
  .img-create-access__link {
    display: inline-block;
    vertical-align: middle;
    color: #9A9A9A;
    margin: 0 10px;
    margin-top: 68px;
    text-decoration: none;
  }
 .img-create-access__link:before {
    content: " ";
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 5px;
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/images/icon36_add_gray.png) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tabs {
    line-height: 38px;
    background-color: #FFFFFF;
  }
  .sender__tab_selected {
    color: #44B549;
  }
  .weui-desktop-msg-sender__tab:hover, .weui-desktop-msg-sender__tab_selected {
    color: #44B549;
  }
  .weui-desktop-msg-sender__tab {
    display: inline-block;
    padding: 0 20px;
    cursor: pointer;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_text:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_text:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_text_current.svg);
  }
  .weui-desktop-msg-sender__tab_img:before {
      background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img.svg) no-repeat 0 0;
    }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_img:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_img:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img_current.svg);
  }
  .weui-desktop-msg-sender__tab_video:before {
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_video:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_video:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video_current.svg);
  }
  .weui-desktop-msg-sender__tab_audio:before {
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_audio:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_audio:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio_current.svg);
  }
  .weui-desktop-msg-sender__tab_appmsg:before {
    background: transparent url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg3c96b5.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_appmsg:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_appmsg:before {
    background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg_current3c96b5.svg);
  }
  .weui-desktop-msg-sender__tab:before {
    content: " ";
    display: inline-block;
    width: 22px;
    height: 20px;
    vertical-align: middle;
    margin: -0.2em 5px 0 0;
  }
  .tool_bar {
    padding-top: 0;
    padding-bottom: 50px;
    /*margin-top: 40px;*/
    margin-left: 20px;
  }
  .tool_bar > .weui-desktop-btn {
    margin-right: 1em;
  }
  .weui-desktop-btn_primary {
    background-color: #1AAD19;
    border-color: #1AAD19;
    color: #FFFFFF;
  }
  .weui-desktop-btn {
    display: inline-block;
    padding: 0 22px;
    min-width: 54px;
    line-height: 2.42857143;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    box-sizing: content-box;
  }
  .weui-desktop-popover__wrp {
    display: inline;
    position: relative;
    font-size: 14px;
  }
  .weui-desktop-btn_default {
    background-color: #FBFBFB;
    border-color: #E4E8EB;
    color: #353535;
  }
  .inner-emotion_editor {
    margin: 2%;
  }
  .shotcut {
    width: 50px;
  }
  .emotion_switch {
    float: left;
    height: 28px;
    line-height: 999em;
    overflow: hidden;
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/reply/images/icon_emotion_switch.png) no-repeat 0 0;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
  }
  .display-b {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .my-teacher{
    height: 150px;
    line-height: 150px;
    width: 50%;
    margin-left: 25%;
    border: 1px dashed #666;
    margin-bottom: 10px;
  }
  .news-media {
    padding: 10px;
    width: 300px;
  }
  .news-media img{
    width: 100%;
  }
  .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-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;
  }
  .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>
<style>
  .clear-both:after{
    content: '';
    display: block;
    clear: both;
  }
  .disabled .el-upload--picture-card {
    display: none !important;
  }
</style>
