<template>
  <div>
     <div class="panel-fieldset middle-label" v-if="extendsData.contentType==='Article'||!extendsData.contentType">
      <h4 class="panel-legend">文章配置项</h4>
      <el-form-item label="文章正文图片默认尺寸">
        <label>宽度</label><el-input v-model="extendsData.articleImageWidth" :style="{width:'60px'}" ></el-input>
        <label>高度</label><el-input v-model="extendsData.articleImageHeight" :style="{width:'60px'}" ></el-input><label>默认值为700*700</label>
      </el-form-item>
      <el-form-item label="自动将正文首图设为Logo">
        <el-switch v-model="extendsData.articleDefaultLogo" active-value="Y" inactive-value="N"></el-switch>
      </el-form-item>
      <el-form-item label="自动设置logo图最小尺寸">
        <label>宽度</label><el-input v-model="extendsData.articleLogoWidth" :style="{width:'60px'}" ></el-input>
        <label>高度</label><el-input v-model="extendsData.articleLogoHeight" :style="{width:'60px'}" ></el-input><label>默认值为120*120</label>
      </el-form-item>
      <el-form-item label="附件下载地址">
        <el-select clearable v-model="extendsData.articleFileDownloadPath" placeholder="请选择" :style="{width:'150px'}">
          <el-option
            v-for="item in downloadTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="UE编辑器导入样式">
        <path-picker
        :path.sync="extendsData.articleUEEditorImportCSS"
        select-title="选择css文件"
        style="width:300px"
        select-type="File"
        extension="css"
        :disabled="catalogId===0"
        ></path-picker>
      </el-form-item>
    </div>
    <div class="panel-fieldset short-label" v-if="extendsData.contentType==='Article'">
      <h4 class="panel-legend">视频转换配置</h4>
      <el-form-item label="转换类型">
        <el-select v-model="extendsData.videoFormatType" clearable 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')" type="small">应用到子栏目</el-button>
      </el-form-item>
      <el-form-item label="默认清晰度">
        <div v-show="!isShow">
          <el-select v-model="videoResolution" @change="videoResolutionChangeHandler" clearable 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')" 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>
    </div>
    <div class="panel-fieldset" v-if="extendsData.contentType==='File'||!extendsData.contentType">
      <h4 class="panel-legend">文件配置项</h4>
      <el-form-item label="附件下载地址选项">
        <el-select v-model="extendsData.fileDownloadPath" clearable placeholder="请选择" :style="{width:'150px'}">
          <el-option
            v-for="item in downloadTypes"
            :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 PathPicker from '../../contentcore/components/PathPicker.vue'
export default {
  components: {
    'path-picker': PathPicker
  },
  props: {
    extendsData: {
      type: Object,
      default: function() {
        return {
          fileDownloadPath: 'zaction', //  附件下载地址选项
          videoFormatType: 'mp4', //  转换类型
          videoResolution: '', //   自定义码率
          videoMultiResolution: '', //  多码率
          contentType: '',
          articleUEEditorImportCSS: '', //  UE编辑器导入样式
          articleFileDownloadPath: '', //  附件下载地址
          articleLogoWidth: 120, //  自动设置logo图宽度
          articleLogoHeight: 120, //  自动设置logo图高度
          articleDefaultLogo: 'Y', //  自动将正文首图设为Logo
          articleImageHeight: 700, //  文章正文图片默认高度
          articleImageWidth: 700 //  文章正文图片默认宽度
        }
      }
    },
    catalogId: [Number, String]
  },
  data() {
    return {
      downloadTypes: [
        { value: 'zaction', label: '动态地址下载' },
        { value: 'url', label: '绝对地址下载' }
      ], //  附件下载类型
      videoResolutionType: 'select', //   视频分辨率类型
      isShow: false, //  是否显示自定义码率
      videoMultiResolutions: [], //  视频清晰度选项
      videoResolutionVBRTypes: [
        { value: '-qscale', label: '-qscale' },
        { value: '-b', label: '-b' }
      ], //  码率选项
      videoFormatType: [], //  视频类型选项
      videoResolution: '', //  默认清晰度
      videoResolutionVBRType: '', //  自定义码率
      videoResolutionVBR: '' // 输入码率
    }
  },
  watch: {
    extendsData: function(val) {
      if (this.extendsData.videoMultiResolution) {
        this.showValue()
      }
      if (this.extendsData.articleFileDownloadPathRealValue === '') {
        this.extendsData.articleFileDownloadPath = ''
      }
    }
  },
  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')
    },
    // 加载视频类型选项
    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>
