<template>
  <el-dialog title="截取引导图" :visible.sync="isVisible" :append-to-body="true" width="400px">
    <div v-for="(item,i) in cutData.times" :key="i">
      <label class="capture-label-item">第{{i+1}}张图片时间点: </label><el-input-number v-model="item.time" :min="0" :max="duration" size="small"></el-input-number><span>&nbsp; 秒</span><el-button type="text" @click="removePic(item,i)" v-show="i !== 0"><i class="fa fa-minus"></i></el-button><el-button type="text" v-if="cutData.times.length==(i+1)" @click="addPic"><i class="fa fa-plus"></i></el-button>
    </div>
    <div class="capture-period">
      <label class="capture-label-item">gif动图播放间隔: </label><el-input-number v-model="cutData.period" :precision="1" :step="0.1" size="small"></el-input-number><span>&nbsp; 秒</span>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="capture">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: ''
    },
    content: {
      type: Object,
      default: _ => ({})
    },
    perId: {
      type: [String, Number],
      default: ''
    },
    duration: {
      type: [Number],
      default: 0
    }
  },
  data() {
    return {
      cutData: {
        period: 0.7,
        times: [
          {
            time: 0
          }
        ]
      },
      show: false
    }
  },
  computed: {
    isVisible: {
      get() {
        return !!this.visible
      },
      set(val) {
        this.tmpFileList = []
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    async capture() {
      try {
        let formData = Object.assign({}, this.cutData, {catalogID: this.content.catalogID})
        let resp = await axios.put(this.captrueUrl(), formData)
        if (resp.data.status === 1) {
          await util.showProgress(resp.data.taskID, `正在转换`, '转换成功')
          let res = await axios.get(this.refreshUrl())
          this.$emit('replacelogo', res)
          this.isVisible = false
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
    },
    captrueUrl() {
      switch (this.type) {
        case 'group':
          return `/ui/videogroup/${this.content.ID}/capture/${this.perId}`
        default:
          return `/ui/video/${this.content.ID}/capture`
      }
    },
    refreshUrl() {
      switch (this.type) {
        case 'group':
          return `/ui/videogroup/${this.content.ID}/refreshlogo/${this.perId}`
        default:
          return `/ui/video/${this.content.ID}/refreshlogo`
      }
    },
    addPic() {
      let lastTime = this.cutData.times[this.cutData.times.length - 1].time
      this.cutData.times.push({ time: lastTime + 1 })
    },
    removePic(item, i) {
      if (i === 0) {
        return
      }
      this.cutData.times.splice(i, 1)
    }
  }
}
</script>
<style scoped>
  .capture-period {
    border-top:1px solid #ebebeb;
    background:#fafafa;
    padding:10px 0;
    margin-top:10px;
  }
  .capture-label-item {
    min-width:120px;
    padding-left:10px;
    display:inline-block;
    text-align:left;
  }
</style>
