<template>
  <div>
    <div class="medias">
    <div class="btn-push">
      <span v-if="!tVideo.fileName">请选择视频素材</span>
      <div class="video-con" v-else>
          <span>{{ tVideo.fileName }}</span>
          <div class="del">
              <span @click="del" class="ui-button submit">删除</span>
          </div>
      </div>
    </div>
  </div>
  <button class="ui-button submit" @click="selectHandle">选择视频</button>

  </div>
</template>


<script>

export default {
  props: ["video"],
  data() {
    return {
      type: "video",
      tVideo: { ...this.video[0] },
      list: [],
    };
  },
  methods: {
    del() {
      this.tVideo = {
        fileName:''
      };
      this.$emit("videoChange", []);
    },
    selectHandle() {
      this.$emit('uploadClick',{
        type:'video'
      })
    },
  },
  watch: {
     video:{
      deep:true,
      handler:function (newVal) {
        this.tVideo = newVal.length>0 ? newVal[0] : {}
      }
    },
  },
};
</script>

<style lang="less" src="./style.less"></style>

<style lang="less" scoped>
.ui-button{
  width: 100%;
  margin-top: 10px;
}
.medias{
  min-height: 122px;
  overflow-y: auto;
.video-con{
  width: 100%;
  height: 100%;
  position: relative;
  >span{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    color: @color;
  }
  .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;
        width: auto;
        padding: 0 10px;
        margin: 0;
        line-height: 24px;
        height: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        justify-content: center;
        transform: translate(-50%,-50%);
      }
    }
    &:nth-of-type(3n){
      margin-right: 0;
    }
    &:hover{
      .del{
        display: block;
      }
    }
}
}
</style>
