<template>
  <transition appear name="custom-classes-transition" enter-active-class="animated slideInRight speed" leave-active-class="animated slideOutRight speed">
    <div class="hots-panel" v-show="show">
      <div class="ui-between header" app-border dir-bottom>
        <span></span>
        <i class="iconfont iconedit_close" @click="confirmCancel"></i>
      </div>
      <div class="content">
        <div class="ui-title">解说音频简介</div>
        <div>
          <input type="text" class="ui-input" placeholder="请填写简介限15字" :maxlength="15" v-model="musicInfo.musicDesc" />
        </div>
        <div class="preview-con">
          <div class="preview">
            <img v-if="!musicInfo.music.url" :src="require('@/assets/images/default/img_bgm_default.png')" alt="" />
            <div v-else>
              <span class="delname">{{musicInfo.music.name}}</span>
              <div class="del">
                <span @click="del" class="ui-button submit">删除</span>
              </div>
            </div>
          </div>
          <div class="upload-con">
            <button class="ui-button submit" @click="$emit('openMaterial')">上传</button>
            <div class="ui-remark">解说音频（&lt;20M）</div>
            <!-- （&lt;20M） -->
          </div>
        </div>
      </div>
      <div class="ui-between footer" app-border dir-top>
        <button class="ui-button submit" :class="{ disable: false }" @click="save">完成</button>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: ["show", "data"],

  data() {
    return {
      canSave: false,
      musicInfo: {...this.data},
    };
  },

  watch: {
  'musicInfo.musicDesc':function (newVal) {
      this.$emit('updateMD',newVal)
  },
  
  data:{
     deep:true,
     handler:function (newVal) {
      this.musicInfo = {...newVal}
     }
   }
  },
  beforeDestroy() {
  },
  computed: {
    ...mapGetters({
    }),
 
  },
  mounted() {
  
  },

  methods: {
    confirmCancel() {
      this.$confirm({
        content: "音频内容未编辑完，确定要关闭吗",
        ok: () => {
          this.cancel();
        },
      });
    },
    del(){
      this.musicInfo.music = {
        url:'',
        name:''
      }
      this.$emit('delmusic')
    },
    cancel() {
      this.$emit("close", 'return');
    },
    
    save() {
      this.$emit("close");
      this.$emit("save", this.musicInfo);
    },
  },
};
</script>
<style lang="less" scoped>
.icon_checkbox {
  font-size: 14px;
  &::before {
    content: "\e667";
  }
}

.checkbox {
  cursor: pointer;
  &.checked {
    color: @color;
    .icon_checkbox::before {
      content: "\e671";
    }
  }
}

.hots-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 236px;
  background: rgba(38, 39, 41, 1);
  box-shadow: 0px 0px 20px #090909;
  z-index: 10;
  display: flex;
  flex-direction: column;
  .header {
    height: 51px;
    padding: 0 10px;
    display: flex;
    .iconedit_close {
      cursor: pointer;
    }
  }
  .footer {
    padding: 15px;
    .ui-button {
      width: 100%;
    }
  }
  .content {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    width: 90%;
    margin: 10px auto;
   
.preview-con {
  display: flex;
  margin-top: 10px;
  .preview {
    width: 90px;
    height: 90px;
    overflow: hidden;
    margin-right: 10px;
    position: relative;
    & > div {
      position: relative;
      width: 100%;
      height: 100%;
      .delname {
        z-index: 8;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        width: 90%;
        text-align: center;
        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: 60%;
          min-width:unset;
          padding: 0 10px;
          margin: 0;
          line-height: 24px;
          height: 24px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      &:hover{
        .del{
          display: block;
        }
      }
    }
  }
  .upload-con {
    flex: 1;
    .ui-button {
      width: 100%;
    }
    .ui-remark {
      margin-top: 10px;
      width: 100%;
      word-break: keep-all;
    }
  }
  .bars {
  }
}
  }
}
</style>
