<template>
  <div class="van-hairline--bottom type-two" style="padding: 15px 0;padding-top:10px;">
    <div class="title" style="margin-bottom: 10px;margin-top:10px;color:#666C70;">{{proofSubItem.label}}</div>
    <div v-for="(file,index) in fileList" :key="index" style="margin-bottom: 10px;">
      <video controls  :poster="file.snapshot_url" style="margin-bottom: 10px;width: 100%;">
         <source :src="file.url">
          你的浏览器不支持Video标签
      </video>
      <div style="text-align:right;color:#3175FF;" @click="del(index)">删除</div>
    </div>
    <label class="uploader">
      <input type="file" @change="handleFileChange" accept="video/*" style="display:none;">
      <!-- <common-svg name="shipin" width="32px" height="32px"></common-svg> -->
      <div class="title" style="font-size:18px;font-weight:500;color:#929295">上传视频</div>
      <common-svg name="jinru" class="righticon"></common-svg>
    </label>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Model, Emit, Vue, Watch } from 'vue-property-decorator';
@Component({
  name: 'TypeEight',
})
export default class TypeEight extends Vue {
  @Prop()
  private proofSubItem: any;
  @Prop()
  private value!: [];
  private fileList: any[] = [];
  private loaded: number = 0;
  private total: number = 0;
  @Watch('valHash', { immediate: true, deep: true })
  private async onChange(newVal: [], oldVal: []) {
    if (newVal.length <= 0) {
      this.fileList = [];
      return;
    }
    this.$api.file.getFiles(this.valHash).then((res: any) => {
      this.fileList = res.files;
    });
  }
  get valHash() {
    if (!Array.isArray(this.value)) {
      return [];
    }
    return this.value.map((val: any) => {
        return val.value;
    });
  }
  private del(index: number) {
    const value = [...this.value];
    value.splice(index, 1);
    this.$emit('update:value', value);
  }
  private handleFileChange(e: any) {
    const [ file ] = e.target.files;
    if (!file) { return; }
    if (file.size > 20 *  1024 * 1024) {
      this.$toast('文件太大');
      return;
    }
    const toast = this.$toast({
      message: '0%',
      duration: 0, // 持续展示 toast
      forbidClick: true,
    });
    this.$api.file.upload(file, (process: any) => {
      const { loaded, total } = process;
      const percent = Math.floor(loaded / total * 100);
      toast.message = `${ percent }%`;
      if (percent === 100) {
        toast.clear();
      }
    }).then((res: any) => {
      e.target.value = '';
      const temp: any = Array.isArray(this.value) ? this.value : [];
      this.$emit('update:value', [...temp, {
        type: 'media',
        format: 'hash',
        value: res.hash,
      }]);
    }).catch((err: any) => {
      toast.clear();
    });
  }
}
</script>
<style lang="scss" scoped>
audio{
  width: 100%;
}
  .type-two{
    text-align: left;
    padding-bottom: 10px;
    a{
      word-break: break-all;
      white-space: wrap;
    }
    .uploader{
      display: flex;
      flex-direction: row;
      align-items: center;
      .title{
        flex: auto;
        align-content: flex-start;
        // margin-left: 12px;
      }
    }
  } 
</style>
