<template>
  <div>
    <el-dialog title="新建视频" :visible.sync="addVideoDialog" class="pop-dialog" @open="dialogOpen" @close="addVideoDialogCloseClick">
      <el-form ref="addVideoForm" :model="tmpAddVideo" :rules="addVideoRules" label-width="110px" class="content-form">
        <el-form-item prop="sourcetype" label="类型：">
          <el-radio-group v-model="tmpAddVideo.sourcetype" @change="sourceTypeChange">
            <el-radio class="radio" label="upload">本地上传</el-radio>
            <el-radio class="radio" label="web">网络</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文件：" v-show="localUploadShow">
          <el-upload class="upload-iamge" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
            :on-remove="handleRemove" :file-list="tmpAddVideo.videofilelist" :auto-upload="false" :accept="allowtypes" :on-change="selectVideoChange">
            <el-tag type="gray" class="gray-tags">{{allowtype}}</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button slot="trigger" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item prop="convertFlag" label="是否转换格式：" v-show="localUploadShow">
          <el-radio class="radio" label="Y" v-model="tmpAddVideo.convertFlag">是</el-radio>
          <el-radio class="radio" label="N" v-model="tmpAddVideo.convertFlag">否</el-radio>
          <span>（注：转换格式在栏目管理统一设置）</span>
        </el-form-item>
        <el-form-item prop="externalSource" label="网络视频内容：" v-show="webShow">
          <el-input type="textarea" v-model="tmpAddVideo.externalSource" style="width: 390px;"></el-input>
          <el-tooltip class="item" effect="dark" content="输入外部视频flash地址" placement="right-start">
            <sapn class="selfIcon">
              <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
            </sapn>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="title" label="标题：">
          <el-input v-model="tmpAddVideo.title" style="width: 390px;" :style="{color: titlecolor}" @change="setCounterChange"></el-input>
          <el-color-picker v-model="titlecolor" size="small" style="vertical-align: middle;" show-alpha class="image-color-picker"
            @change="setTitleColor"></el-color-picker>
          <span style="margin: 6px;">{{counter}}</span>

          <el-checkbox v-model="titleshow" label="showshorttile" @change="shortTitleChange">短标题</el-checkbox>
          <el-checkbox v-model="titleshow" label="showsubtitle" @change="subTitleChange">副标题</el-checkbox>
        </el-form-item>
        <el-form-item prop="sourceTitle" label="原标题：">
          <el-input v-model="tmpAddVideo.sourceTitle" style="width: 390px;"></el-input>
        </el-form-item>
        <el-form-item prop="shortTitle" label="短标题：" v-show="shortTitleShow">
          <el-input v-model="tmpAddVideo.shortTitle" style="width: 390px;" :style="{color: shorttitlecolor,fontWeight: shorttitlebold,fontStyle: shorttitleitalic, textDecoration: shorttitleunderline }"></el-input>
          <el-color-picker v-model="shorttitlecolor" size="small" style="vertical-align: middle;" show-alpha class="image-color-picker"
            @change="setShortTitleColor"></el-color-picker>
          <i @click="setBoldClick($event)" :class="{active: boldChecked}" class="fa fa-bold font-border" style="color:#000000" aria-hidden="true"></i>
          <i @click="setItalicClick($event)" :class="{active: italicChecked}" class="fa fa-italic font-border" style="color:#000000"
            aria-hidden="true"></i>
          <i @click="setUnderlineClick($event)" :class="{active: underlineChecked}" class="fa fa-underline font-border" style="color:#000000"
            aria-hidden="true"></i>
        </el-form-item>
        <el-form-item prop="subTitle" label="副标题：" v-show="subTitleShow">
          <el-input v-model="tmpAddVideo.subTitle" style="width: 390px;"></el-input>
        </el-form-item>
        <el-form-item prop="author" label="作者：">
          <el-input v-model="tmpAddVideo.author" style="width: 195px;"></el-input>
        </el-form-item>
        <el-form-item prop="editor" label="编辑：">
          <el-input v-model="tmpAddVideo.editor" style="width: 195px;"></el-input>
        </el-form-item>
        <!-- float: right 样式在此处影响点击事件不可点击 故把图片控件放在左边-->
        <el-form-item prop="logoFile" label="图片：">
          <logo-path :path.sync="tmpAddVideo.logoFile" upload-title="上传Logo图片" :resource-dialog-props="resourceDialogProps"></logo-path>
        </el-form-item>
        <el-form-item prop="contentattribute" label="内容属性：" class="content-attriute">
          <el-checkbox v-for="attribute in contentAttributes" :key="attribute.value" @change="contentAttributeChange(attribute.value)">{{attribute.name}}</el-checkbox>
        </el-form-item>

        <el-form-item prop="platformAttribute" label="发布平台：">
          <el-checkbox v-model="tmpAddVideo.platformAttribute">PC</el-checkbox>
        </el-form-item>
        <el-form-item prop="summary" label="摘要：">
          <el-input v-model="tmpAddVideo.summary" type="textarea" style="width: 390px;" @change="setSummaryCounterChange"></el-input>
          <span v-show="summaryCounterShow" class="summary-font-counter">{{summarycounter}}</span>
        </el-form-item>
        <el-form-item prop="keyword" label="关键字：">
          <el-input v-model="tmpAddVideo.keyword" style="width: 390px;"></el-input>
        </el-form-item>
        <el-form-item prop="tag" label="tag：">
          <el-input v-model="tmpAddVideo.tag" style="width: 390px;"></el-input>
          <el-button @click="tagBrowseClick">浏览</el-button>
        </el-form-item>
        <el-form-item prop="source" label="来源：">
          <el-input v-model="tmpAddVideo.source" style="width: 390px;"></el-input>
          <el-button @click="sourceBrowseClick">浏览</el-button>
        </el-form-item>
        <el-form-item prop="sourceURL" label="来源地址：">
          <el-input v-model="tmpAddVideo.sourceURL" style="width: 390px;"></el-input>
        </el-form-item>
        <el-form-item prop="publishDate" label="发布时间：">
          <el-date-picker id="avd-date-picker1" v-model="tmpAddVideo.publishDate" type="datetime" placeholder="请选择发布时间"></el-date-picker>
        </el-form-item>
        <el-form-item prop="downlineDate" label="下线时间：">
          <el-date-picker id="avd-date-picker2" v-model="tmpAddVideo.downlineDate" type="datetime" placeholder="请选择下线时间"></el-date-picker>
        </el-form-item>
        <el-form-item prop="templatevalue" label="模板：">
          <el-checkbox v-model="tmpAddVideo.templateFlag" @change="templateFlagChange">独立模板</el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;
          <span v-show="templateShow">
            <el-input v-model="tmpAddVideo.templatevalue" style="width: 210px"></el-input>
            <el-button @click="templateValueBrowseClick">浏览</el-button>
          </span>
        </el-form-item>
        <el-form-item prop="weight" label="权重：">
          <el-slider v-model="tmpAddVideo.weight" show-input :format-tooltip="formatTooltip" class="weight-slider"></el-slider>
        </el-form-item>
        <el-form-item prop="allowcomment" label="允许评论：">
          <el-radio-group v-model="tmpAddVideo.allowcomment" @change="allowCommentChange">
            <el-radio class="radio" label="Y">是</el-radio>
            <el-radio class="radio" label="N">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="评论起止时间：" v-show="allowCommentShow">
          <el-date-picker id="addVideoDialog-date-picker" type="datetimerange" placeholder="请选择评论起止时间" v-model="tmpAddVideo.commenttime"></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="addVideoDialogCloseClick">关 闭</el-button>
        <el-button type="primary" @click="confirmAddVideoDialogClick" :loading="addVideoLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 浏览文件弹框 -->
    <file-dialog :title="fileChoicePath.title" :show.sync="fileChoicePath.isShowModal" :path="fileChoicePath.fileAttribute.path"
      :extension="fileChoicePath.fileAttribute.extension" :selectType="fileChoicePath.fileAttribute.selectType" @callback="getFilePath">
    </file-dialog>

    <!--tag浏览-->
    <el-dialog title="选择tag词" :visible.sync="selectTagDialog" size="tiny" class="tag-dialog" @close="tagDialogClose">
      <el-form>
        <el-form-item label="通过名称查询：">
          <el-input v-model="searchTag.keyword" style="width:180px" @change="keyWordTagSearchChange"></el-input>
        </el-form-item>
        <el-form-item label="最近使用过的tag词：">
          {{tagWord}}
        </el-form-item>
      </el-form>

      <div v-loading="tagWordLoading">
        <div v-for="item in selecttagwords" :key="item.index" class="letter-item">
          <div>
            <a :id="item.letter">{{item.letter}}</a>
          </div>
          <div v-for="i in item.tagwords" :key="i.index">
            <a class="link" @click="tagClick(i.tagWord)">{{i.tagWord}}</a>
          </div>
        </div>
        <aside class="letter-aside">
          <ul>
            <li @click="naver(letter)" v-for="letter in letters" :key="letter.index">{{letter}}</li>
          </ul>
        </aside>
      </div>
    </el-dialog>

    <!--来源浏览-->
    <el-dialog title="选择来源" :visible.sync="selectSourceDialog" size="tiny" class="tag-dialog">
      <el-form>
        <el-form-item label="通过名称查询：">
          <el-input v-model="searchSource.keyword" style="width:180px" @change="keyWordSourceSearchChange"></el-input>
        </el-form-item>
        <el-form-item label="最近使用过的：">
          {{source}}
        </el-form-item>
      </el-form>

      <div v-loading="sourceLoading">
        <div v-for="item in selectsources" :key="item.index" class="letter-item">
          <div>
            <a :id="item.letter">{{item.letter}}</a>
          </div>
          <div v-for="i in item.sources" :key="i.index">
            <a class="link" @click="sourceClick(i.source)">{{i.source}}</a>
          </div>
        </div>
        <aside class="letter-aside">
          <ul>
            <li @click="naver(letter)" v-for="letter in letters" :key="letter.index">{{letter}}</li>
          </ul>
        </aside>
      </div>
    </el-dialog>

    <!--模板浏览-->

    <el-dialog title="选择模板文件" :visible.sync="selectTemplateDialog" class="tag-dialog">
      <el-form>
        <el-form-item label="名称：">
          <el-input v-model="searchTemplate.name" @keyup.enter.native="templateSearchClick" style="width:180px"></el-input>
          <el-button @click="templateSearchClick">
            <i class="fa fa-search" aria-hidden="true"></i>查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="templateTable" @current-change="templateCurrentChange" tooltip-effect="dark" highlight-current-row v-loading="templateLoading">
        <el-table-column width="50" align="center">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column width="65" align="center">
          <template slot-scope="scope">
            <el-radio class="radio" v-model="currentRow" :label="scope.row.id">{{''}}</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="文件">
          <template slot-scope="scope">
            <i class="fa fa-file-code-o"></i>
            <a href="##">{{scope.row.fileName}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="fileSize" label="大小" width="80"></el-table-column>
        <el-table-column prop="name" label="名称" width="120"></el-table-column>
        <el-table-column prop="modifyTime" label="最后修改时间" width="200"></el-table-column>
      </el-table>

      <div slot="footer">
        <el-button @click="selectTemplateCloseClick">取 消</el-button>
        <el-button type="primary" @click="confirmSelectTemplateClick" :loading="templateHandlerLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import LogoPath from './LogoPath.vue'
import fileDialog from '../filePathSelectDialog.vue'
export default {
  components: {
    'logo-path': LogoPath,
    'file-dialog': fileDialog
  },
  data() {
    return {
      siteID: this.$root.siteID,
      platformID: 'pc',
      catalogDefaultProps: null,
      formatTooltip: '',
      titleshow: false,
      source: '',
      tagWord: '',
      // 新建视频form对象
      tmpAddVideo: {
        sourcetype: 'upload',
        videofilelist: [],
        convertFlag: 'Y',
        title: '',
        sourceTitle: '',
        shortTitle: '',
        subTitle: '',
        author: '系统管理员',
        editor: '系统管理员',
        logoFile: '',
        contentattribute: '',
        platformAttribute: true,
        summary: '',
        keyword: '',
        tag: '',
        source: '',
        sourceURL: '',
        publishDate: '',
        downlineDate: '',
        templateFlag: '',
        templatevalue: '',
        weight: 0,
        allowcomment: 'Y',
        commenttime: ''
      },
      // 选择来源对话框显示状态
      selectSourceDialog: false,

      // 选择来源数据
      selectsources: [],

      // 支持的视频上传类型
      allowtypes: '.mpg,.mp4,.rmvb,.rm,.mpeg,.avi,.wmv,.mov,.flv,.swf',
      allowtype: '*.mpg,*.mp4,*.rmvb,*.rm,*.mpeg,*.avi,*.wmv,*.mov,*.flv,*.swf',

      // 选择来源加载
      sourceLoading: false,

      // 选择tag词数据
      tags: [],

      // 选择tag词搜索
      searchTag: {
        keyword: ''
      },

      // 选择来源搜索
      searchSource: {
        keyword: ''
      },

      // 选择tag词数据加载
      tagWordLoading: false,

      // tag词选择
      selecttagwords: {
        letter: '',
        tagwords: []
      },

      // 字母
      letters: [],

      // 选择tag词对话框显示状态
      selectTagDialog: false,

      // 选中当前行
      currentRow: null,

      // 模板数据加载
      templateTable: [],

      // 模板文件数据加载状态
      templateLoading: false,

      // 选择模板文件对话框显示状态
      selectTemplateDialog: false,

      // 模板浏览显示状态
      templateShow: false,

      // 选择模板确定按钮加载状态
      templateHandlerLoading: false,

      // 内容类型
      contentType: 'File',

      // 搜索模板
      searchTemplate: {
        name: ''
      },

      // 允许评论起止时间显示状态控制
      allowCommentShow: true,

      // 内容属性
      contentAttributes: [],

      // 短标题加粗
      shorttitlebold: '',

      // 短标题倾斜
      shorttitleitalic: '',

      // 短标题下划线
      shorttitleunderline: '',

      // 短标题显示状态
      shortTitleShow: false,

      // 副标题显示状态
      subTitleShow: false,

      // 本地上传显示状态
      localUploadShow: true,

      // 网络显示状态
      webShow: false,

      // 字体 加粗/倾斜/下划线设置统计点击次数
      boldCount: 1,
      italicCount: 1,
      underlineCount: 1,

      // 字体 加粗/倾斜/下划线设置点击后的样式改变状态
      boldChecked: false,
      italicChecked: false,
      underlineChecked: false,

      // 统计标题字数
      counter: 0,

      // 标题颜色选择器默认颜色
      titlecolor: 'rgba(0, 0, 0, 1)',

      // 短标题颜色选择器默认颜色
      shorttitlecolor: 'rgba(0, 0, 0, 1)',

      // 验证规则
      addVideoRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 360, message: '长度在 1 到 360 个字符', trigger: 'blur' }
        ],
        shortTitle: [
          { min: 1, max: 150, message: '长度在 1 到 150 个字符', trigger: 'blur' }
        ],
        subTitle: [
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ],
        author: [
          { min: 1, max: 49, message: '长度在 1 到 49 个字符', trigger: 'blur' }
        ],
        editor: [
          { min: 1, max: 49, message: '长度在 1 到 49 个字符', trigger: 'blur' }
        ],
        summary: [
          { min: 1, max: 1200, message: '长度在 1 到 1200 个字符', trigger: 'blur' }
        ],
        keyword: [
          { min: 1, max: 80, message: '长度在 1 到 80 个字符', trigger: 'blur' }
        ],
        tag: [{ min: 1, max: 80, message: '长度在 1 到 80 个字符', trigger: 'blur' }],
        source: [
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        sourceURL: [
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ]
      },

      // 统计摘要字数
      summarycounter: 0,

      // 模板文件
      fileName: '',

      // 内容属性赋值
      attributes: [],
      // 摘要字体统计显示状态
      summaryCounterShow: false,
      fileChoicePath: {
        isShowModal: false,
        title: '',
        fileAttribute: { path: '', selectType: 'Path', extension: '' }
      }, //  文件浏览组件属性
      resourceDialogProps: {}
    }
  },
  methods: {
    dialogOpen() {
      this.resourceDialogProps = {
        dataType: 'Video',
        dataID: this.contentID,
        resourceType: 'image',
        catalogID: this.catalogID,
        imageWidth: 120,
        imageHeight: 120,
        inputType: 'radio'
      }
    },
    getFilePath(path) {
      console.error('方法未实现')
    },
    setShortTitleColor() {
      console.error('方法未实现')
    },
    setTitleColor() {
      console.error('方法未实现')
    },
    handleRemove() {
      console.error('方法未实现')
    },
    handlePreview() {
      console.error('方法未实现')
    },
    selectVideoChange(file, files) {
      this.tmpAddVideo.videofilelist = files.slice(-1)
    // console.log(this.tmpAddVideo.videofilelist)
    },

    // 新建视频确定点击事件
    confirmAddVideoDialogClick() {
      if (!this.tmpAddVideo.videofilelist.length) {
        this.dialog('请先选择文件')
        return
      }

      util
        .validateForm(this.$refs['addVideoForm'])
        .then(() => {
          this.addVideoLoading = true
          if (this.editVideoMode === 1) {
            this.$emit('loadAddVideo', this.tmpAddVideo)
          } else if (this.editVideoMode === 2) {
            this.$emit('loadEditVideo', this.tmpAddVideo)
          }
        })
        .catch(() => {
          this.msgPop('没有正确填写表单项！', 'error')
        })
    },

    // 切换类型控制显示
    sourceTypeChange(val) {
      if (val === 'upload') {
        this.localUploadShow = true
        this.webShow = false
      } else if (val === 'web') {
        this.webShow = true
        this.localUploadShow = false
      }
    },

    // 选择模板文件取消事件
    selectTemplateCloseClick() {
      this.selectTemplateDialog = false
      this.fileName = ''
      this.currentRow = ''
    },

    // 选择模板文件确定事件
    confirmSelectTemplateClick() {
      if (!this.currentRow) {
        this.dialog('请先选择一条记录！')
        return
      }
      this.templateHandlerLoading = true
      this.selectTemplateDialog = false
      if (this.fileName) {
        this.tmpAddVideo.templatevalue = this.fileName
        this.templateHandlerLoading = false
      }
    },

    // 模板 选择
    templateCurrentChange(val) {
      try {
        throw (this.fileName = val.fileName)
      } catch (e) { }
      try {
        throw (this.currentRow = val.id)
      } catch (e) { }
    },

    // 模板查询
    templateSearchClick() {
      this.loadTemplateData()
    },

    // 模板浏览点击事件
    templateValueBrowseClick() {
      this.selectTemplateDialog = true
      this.loadTemplateData()
    },

    // 模板数据加载
    async loadTemplateData() {
      this.currentRow = ''
      this.fileName = ''
      this.searchTemplate.name = this.searchTemplate.name
        ? this.searchTemplate.name.trim()
        : ''
      this.templateLoading = true
      let params = { name: this.searchTemplate.name, contentType: this.contentType }
      let res = await axios.get(`/ui/site/indextemplates`, { params: params })
      this.templateTable = res.data.data
      this.templateLoading = false
    },

    // 模板事件
    templateFlagChange(e) {
      if (e.target.checked) {
        this.templateShow = true
      } else {
        this.templateShow = false
      }
    },

    // 模板事件
    staticFileNameFlagChange(e) {
      if (e.target.checked) {
        this.staticFileNameShow = true
      } else {
        this.staticFileNameShow = false
      }
    },

    // 选择tag词搜索
    keyWordTagSearchChange() {
      this.getTagWords()
    },

    // 选择来源搜索
    keyWordSourceSearchChange() {
      this.getSources()
    },

    // 关闭选择tag词对话框
    tagDialogClose() {
      this.selectTagDialog = false
    },

    // 选择来源点击事件
    sourceClick(val) {
      this.tmpAddVideo.source = val
      this.selectSourceDialog = false
    },

    // 选择tag词点击事件
    tagClick(val) {
      this.tags.push(val)
      this.tmpAddVideo.tag = this.tags.join()
    },

    // 点击右边字母滚动
    naver(id) {
      try {
        throw document.getElementById(id).scrollIntoView()
      } catch (e) { }
    },

    // 选择tag词数据加载
    async getTagWords() {
      this.tagWordLoading = true
      let res = await axios.get('/ui/contentnocatalog/selecttaglist', {params: {keyword: this.searchTag.keyword}})
      this.selecttagwords = res.data.data
      this.tagWordLoading = false
    },

    // 选择来源数据加载
    async getSources() {
      this.sourceLoading = true
      let res = await axios.get('/ui/contentnocatalog/selectsourcelist', {params: {keyword: this.searchSource.keyword}})
      this.selectsources = res.data.data
      this.sourceLoading = false
    },

    // 构建字母项
    buildLetter() {
      let letter = ''
      for (let i = 0; i < 26; i++) {
        letter = String.fromCharCode(65 + i)
        this.letters.push(letter)
      }
    },

    // 来源浏览
    sourceBrowseClick() {
      this.getSources()
      this.selectSourceDialog = true
    },

    // tag浏览
    tagBrowseClick() {
      this.getTagWords()
      this.selectTagDialog = true
    },

    // 允许评论起止时间显示状态控制
    allowCommentChange(val) {
      if (val === 'N') {
        this.allowCommentShow = false
      } else if (val === 'Y') {
        this.allowCommentShow = true
      }
    },

    // 内容属性赋值事件
    contentAttributeChange(val) {
      this.tmpAddVideo.contentattribute = this.attributes.join()
    },

    // 内容属性数据加载
    async getContentAttributes() {
      let res = await axios.get('/ui/contentnocatalog/contentattributes')
      this.contentAttributes = res.data.data
    },

    // 控制短标题显示或隐藏
    shortTitleChange(e) {
      if (e.target.checked) {
        this.shortTitleShow = true
      } else {
        this.shortTitleShow = false
      }
    },
    // 控制副标题显示或隐藏
    subTitleChange(e) {
      if (e.target.checked) {
        this.subTitleShow = true
      } else {
        this.subTitleShow = false
      }
    },

    // 标题字体统计设置
    setCounterChange(val) {
      this.counter = val.length
    },

    // 摘要字数统计设置
    setSummaryCounterChange(val) {
      this.summaryCounterShow = true
      this.summarycounter = val.length
    },

    // 点击后改变加粗边框颜色并设置字体加粗
    setBoldClick(e) {
      // e.target.style.backgroundColor = "#eed2c1";
      // let active = document.getElementsByClassName('active');
      this.boldCount++
      if (this.boldCount % 2 === 0) {
        this.boldChecked = true
        this.shorttitlebold = 'bold'
      } else {
        this.boldChecked = false
        this.shorttitlebold = ''
      }
    },
    // 点击后改变斜体边框颜色并设置字体倾斜
    setItalicClick(e) {
      this.italicCount++
      if (this.italicCount % 2 === 0) {
        this.italicChecked = true
        this.shorttitleitalic = 'italic'
      } else {
        this.italicChecked = false
        this.shorttitleitalic = ''
      }
    },
    // 点击后改变下划线边框颜色并设置字体加下划线
    setUnderlineClick(e) {
      this.underlineCount++
      if (this.underlineCount % 2 === 0) {
        this.underlineChecked = true
        this.shorttitleunderline = 'underline'
      } else {
        this.underlineChecked = false
        this.shorttitleunderline = ''
      }
    },

    // 返回图片logo路径
    logoFileSelectCallback(src, path) {
      this.tmpAddVideo.logoFile = path
      this.tmpAddVideo.logoSrc = src
    },

    // 消息显示封装
    msgPop(msg, type) {
      if (!type) {
        this.$message(msg)
        return
      }
      this.$message({
        message: msg,
        type: type
      })
    },
    // 消息Dialog封装
    dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    }
  },

  created() {
    this.getContentAttributes()
    this.buildLetter()
  },

  props: {
    'addVideoDialog': Boolean,
    'addVideoLoading': Boolean,
    'editVideoMode': {
      type: Number,
      default: 1
    },
    'contentID': [String, Number],
    'catalogID': [String, Number]
  }
}
</script>
<style scoped>
  .selfIcon {
    font-size: 20px;
    padding: 0 5px;
    cursor: pointer;
  }

  .gray-tags {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 25%;
    float: left;
  }

  .content-form {
    height: 600px;
    overflow: auto;
  }

  .font-border {
    width: 20px;
    height: 16px;
    margin: 1px;
    text-align: center;
    border: 1px solid #bfcbd9;
    background-color: transparent;
    border-radius: 2px;
  }

  .font-border:hover {
    border: 1px solid #ffb820;
  }

  .active {
    background-color: #eed2c1;
    border-color: #b39;
  }

  .summary-font-counter {
    font-family: Constantia, Corbel;
    font-size: 26px;
    line-height: 12px;
    margin-right: 5px;
  }

  .letter-aside {
    position: fixed;
    right: 23px;
    top: 10.3rem;
  }

  .letter-aside ul {
    line-height: 1.4em;
    font-size: 14px;
    color: #bbb;
  }

  .letter-aside li {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial,
    sans-serif;
    font-size: 12px;

    text-align: center;
    cursor: pointer;
    list-style: none;
  }

  .letter-item .link {
    font-size: 14px;
    font-weight: bold;
    color: #2f3e46;
  }

  .letter-item>div {
    padding-right: 6%;
    padding-left: 6%;
    border-bottom: 1px solid #d2e2f9;
    margin-right: 10px;
    margin-left: 10px;
    line-height: 2em;
  }

  .letter-item>div:first-child {
    font-size: 16px;
    line-height: 2em;
    background: #d2e2f9;
    background-image: linear-gradient(#bcd0eb, #d2e2f9);
    margin-bottom: 2px;
    margin-right: 10px;
    margin-left: 10px;
  }

  .divider-current {
    background: #B6D6F4;
    background-image: linear-gradient(#9cc8f3, #b6d6f4);
  }

  .letter-item>div:first-child a {
    color: #fff;
    text-shadow: 0 1px 1px #3e6790;
  }

  .colors {
    color: #003399;
  }

  .upload-images {
    margin-top: -10px;
    margin-left: 8px;
  }

  .upload-images i {
    margin: 0 3px;
  }
</style>
<style>
  .el-input input {
    color: inherit !important;
    /*从父元素继承颜色*/
    text-decoration: inherit !important;
    /*从父元素继承下划线*/
  }

  .tag-dialog .el-dialog__body {
    height: 600px;
    overflow: auto;
  }
</style>
