<template>
  <div v-if="extendsData.contentType==='Video'||extendsData.contentType==='VideoGroup'||!extendsData.contentType">
    <div class="panel-fieldset short-label">
      <h4 class="panel-legend">视频转换配置</h4>
      <el-form-item label="转换类型">
        <el-select v-model="extendsData.videoFormatType" placeholder="请选择" :style="{width:'100px','margin-right':'5px'}">
          <el-option
            v-for="item in videoFormatType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select><el-button @click="applyCatalogMediaToChildren('VideoFormatType')" :disabled="catalogId===0" type="small">应用到子栏目</el-button>
      </el-form-item>
      <el-form-item label="默认清晰度">
        <div v-show="!isShow">
          <el-select v-model="videoResolution" @change="videoResolutionChangeHandler" placeholder="请选择" :style="{width:'100px','margin-right':'5px'}">
          <el-option
            v-for="item in videoMultiResolutions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
          </el-select><el-button @click="applyCatalogMediaToChildren('VideoResolution')" :disabled="catalogId===0" type="small">应用到子栏目</el-button><br>
          <a @click="setVideoResolution('custom',true)">自定义码率</a>
        </div>
        <div v-show="isShow">
          <el-select v-model="videoResolutionVBRType" @change="videoResolutionVBRTypeChangeHandler"  cleanable placeholder="请选择" :style="{width:'100px','margin-right':'5px'}">
            <el-option
              v-for="item in videoResolutionVBRTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select><el-input @blur="setVideoResolution('custom')" v-model="videoResolutionVBR" :style="{width:'60px','margin-right':'5px'}"></el-input><el-button @click="applyCatalogMediaToChildren('VideoResolution')" type="small">应用到子栏目</el-button>
          <p :style="{'word-wrap':'break-word',width:'70%'}">
            <i :style="{color:'#669900'}">-qscale支持0～255的整数(数值越低清晰度越高 文件体积越大)，-b建议在300～10000之间(数值越高清晰度越高 文件体积越大)</i>
          </p><a @click="setVideoResolution('select',false)">选择清晰度</a>
        </div>
      </el-form-item>
      <el-form-item label="多码率" v-show="extendsData.contentType==='Video'||extendsData.contentType==='VideoGroup'||!extendsData.contentType">
          <el-checkbox-group v-model="checkedData" @change="changeClickHandler">
            <el-checkbox v-for="videoResolution in videoMultiResolutions" :label="videoResolution.value" :key="videoResolution.value">{{videoResolution.label}}</el-checkbox>
          </el-checkbox-group>
      </el-form-item>
    </div>
    <div class="panel-fieldset short-label">
      <h4 class="panel-legend">视频水印设置</h4>
      <el-form-item label="水印图片" :style="{'margin-top':'5px;'}">
        <water-path
          :path.sync="extendsData.videoWaterImagePath"
          :video-water="true"
          :disabled="catalogId===0"
          :catalog-id="catalogId"
        ></water-path>
        <p><i :style="{color:'#669900'}">注：图片宽高不能超过视频宽高！</i></p>
      </el-form-item>
      <el-form-item label="水印位置">
        <el-select v-model="extendsData.videoWaterImagePosition" placeholder="请选择">
            <el-option
              v-for="item in videoWaterImagePositions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import WaterPath from '../../contentcore/components/WaterPath.vue'
export default {
  components: {
    'water-path': WaterPath
  },
  props: {
    extendsData: {
      type: Object,
      default: function() {
        return {
          videoFormatType: 'mp4', //  转换类型
          videoResolution: '', //   自定义码率
          videoMultiResolution: '', //  多码率
          videoWaterImagePath: '', //  视频水印图片
          videoWaterImagePosition: '0',
          prefix: ''
        }
      }
    },
    catalogId: [Number, String]
  },
  data() {
    return {
      videoResolutionType: 'select', //   视频分辨率类型
      isShow: false, //  是否显示自定义码率
      videoMultiResolutions: [], //  视频清晰度选项
      videoWaterImagePositions: [
        { value: '1', label: '左上' },
        { value: '2', label: '右上' },
        { value: '3', label: '左下' },
        { value: '4', label: '右下' }
      ], //  视频水印位置选项
      videoResolutionVBRTypes: [{ value: '-qscale', label: '-qscale' }, { value: '-b', label: '-b' }], //  码率选项
      videoFormatType: [{'label': 'mp4', 'value': 'mp4'}], //  视频类型选项
      submitLoading: false,
      isShowModal: false, //  上传视频水印图片模态框显隐
      checkedData: [],
      videoResolution: '', //  默认清晰度
      videoResolutionVBRType: '', //  自定义码率
      videoResolutionVBR: '' // 输入码率
    }
  },
  watch: {
    extendsData: function(val) {
      if (val.videoMultiResolution) {
        this.checkedData = val.videoMultiResolution.split(',')
      } else {
        this.checkedData = ['default']
      }
      this.showValue()
    }
  },
  created() {
    // this.loadVideoFormatTypes()
    this.loadVideoResolutionTypes()
  },
  methods: {
    // 设置视频的清晰度类型
    setVideoResolution(operate, isShow) {
      if (isShow !== undefined) {
        this.isShow = isShow
      }
      this.videoResolutionType = operate
      if (operate === 'custom') {
        this.extendsData.videoResolution = this.videoResolutionVBRType + ':' + this.videoResolutionVBR
      } else {
        this.extendsData.videoResolution = this.videoResolution
      }
    },
    showValue() {
      let currentValue = this.extendsData.videoResolution
      let mp = {
        default: ['-qscale', 0],
        smd: ['-b', 384],
        hd: ['-b', 768],
        spd: ['-qscale', 4],
        '-qscale:4': 'spd',
        '-b:768': 'hd',
        '-b:384': 'smd'
      }
      let subIndex = 0
      if (currentValue) {
        subIndex = currentValue.indexOf(':')
      }
      if (subIndex > 0) {
        var type = currentValue.substring(0, subIndex)
        var val = currentValue.substring(subIndex + 1)
        this.videoResolutionVBRType = type
        this.videoResolutionVBR = val
        if (mp[currentValue]) {
          this.videoResolution = mp[currentValue]
        } else {
          this.videoResolution = 'default'
        }
        this.isShow = true
      } else {
        this.videoResolution = currentValue
        if (mp[currentValue]) {
          this.videoResolutionVBRType = mp[currentValue][0]
          this.videoResolutionVBR = mp[currentValue][1]
        } else {
          this.videoResolution = 'default'
        }
        this.isShow = false
      }
    },
    videoResolutionVBRTypeChangeHandler(val) {
      this.setVideoResolution('custom')
    },
    videoResolutionChangeHandler(val) {
      this.setVideoResolution('select')
    },
    changeClickHandler(val) {
      this.extendsData.videoMultiResolution = this.checkedData.join()
    },
    // 加载视频类型选项
    async loadVideoFormatTypes() {
      let codeid = 'VideoFormatType'
      let res = await axios.get(`/ui/platform/codes/${codeid}`)
      this.videoFormatType = res.data.data
    },
    // 加载视频清晰度选项
    async loadVideoResolutionTypes() {
      let codeid = 'VideoResolutionType'
      let res = await axios.get(`/ui/platform/codes/${codeid}`)
      this.videoMultiResolutions = res.data.data
    },
    // 视频类型应用到子栏目
    async applyCatalogMediaToChildren(type) {
      let videoType = ''
      if (type === 'VideoFormatType') {
        videoType = this.extendsData.videoFormatType
      }
      if (type === 'VideoResolution') {
        videoType = this.extendsData.videoResolution
      }
      let params = {
        type: type,
        typeValue: videoType
      }
      try {
        let res = await axios.put(`/ui/video/${this.catalogId}/applycatalogconfigtochildren`, params)
        util.showMessage(res)
      } catch (e) {
        util.showErrorNotification(e)
      }
    }
  }
}
</script>
<style scoped>

</style>
