<template>
  <div>
  <el-toolbar></el-toolbar>
  <el-form ref="specialForm" :model="special" :rules="audioRules" label-width="110px"  class="content-form" >

      <el-form-item prop="title" label="专题名称：" >
        <el-row>
          <el-col :span="12">
            <el-input v-model="special.title"></el-input>
         </el-col>
        </el-row>
      </el-form-item>

      <el-form-item prop="logoFile" label="引导图：">
        <el-row>
          <el-col :span="18">
            <logo-path
              :path.sync="special.logoFile"
              :preview-path.sync="special.fullLogoFile"
              upload-title="上传Logo图片"
              :resource-dialog-props="imgResourceDialogProps"
            ></logo-path>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item prop="file" label="上传：" >
        <el-upload ref="upload" action="" :multiple="false" :disabled="tmpFileList.length>0" :auto-upload="false" class="upload-additional-dic" :http-request="fileUploadHandler" :on-remove="removeFileHandler" :on-change="selectFileChangeHandler" :accept="allowType" style="width:330px;">
          <el-row :gutter="3">
            <el-col :span="18">
              <el-input disabled v-model="allowType"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary">选择文件</el-button>
            </el-col>
          </el-row>
          <div slot="tip" class="el-upload__tip" style="display:none">只能上传 {{allowType}} 文件</div>
        </el-upload>
      </el-form-item>

       <el-form-item prop="platformAttribute" label="发布平台：">
         <el-row>
          <el-col :span="18">
            <el-checkbox-group v-model="selectPlatAttributes">
              <el-checkbox   v-for="plat in platformAttributes"
              :key="plat.ID" :label="plat.ID"  @change="contentPlatChange(plat.ID)">{{plat.name}}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item prop="summary" label="摘要：">
        <el-row>
          <el-col :span="12">
            <el-input v-model="special.summary"   type="textarea" @change="setSummaryCounterChange"></el-input>
            <span v-show="summaryCounterShow" class="summary-font-counter">{{summarycounter}}</span>
          </el-col>
        </el-row>
      </el-form-item>

       <el-form-item prop="keyword" label="关键字：">
         <el-row>
          <el-col :span="12">
            <el-input v-model="special.keyword"  ></el-input>
         </el-col>
        </el-row>
      </el-form-item>

      <el-form-item prop="tag" label="Tag：">
        <el-row>
          <el-col :span="12">
            <el-input v-model="special.tag" ></el-input>
            </el-col>
            <el-col :span="4">
            <el-button @click="tagBrowseClick">浏览</el-button>
         </el-col>
        </el-row>
      </el-form-item>

      </el-form>
      <select-tags-dialog :wordFlag.sync="tagFlag" :contentType="contentType" @wordCallBack="tagCallBack" type="tag" title="选择Tag词"></select-tags-dialog>
      <resource-dialog :show.sync="resourceDialogModal" :resourceDialogProps="resourceDialogProps" title="缩略图上传" @callback="resourceDialogCallback"></resource-dialog>

</div>
</template>
<script>
import util from '@src/common/util.js'
import contentScript from '../js/contentScript.js'
import resouceDialog from '../resourceDialog.vue'
import selectTagsDialog from '../../wordmanage/components/WordPicker.vue'
import LogoPath from './LogoPath.vue'
export default {
  components: {
    'resource-dialog': resouceDialog,
    'select-tags-dialog': selectTagsDialog,
    'logo-path': LogoPath
  },
  data() {
    return {
      siteID: this.$root.siteID,
      // 选择tag词数据
      tags: [],
      // 字母
      letters: [],
      // 选中当前行
      currentRow: null,

      // 内容属性
      contentAttributes: [],
      // 短标题加粗
      shorttitlebold: '',
      // 短标题倾斜
      shorttitleitalic: '',
      // 短标题下划线
      shorttitleunderline: '',
      // 短标题显示状态
      showShortTitleFlag: false,
      // 副标题显示状态
      showSubtTitleFlag: false,
      // 新建专题form对象
      special: {
        'ID': '',
        'contentID': '',
        'catalogID': '',
        'siteID': '',
        'version': '',
        'method': '',
        'templateFlag': '',
        'sourceID': '',
        'subjectTopicID': '',
        'uploadLogoFlag': '',
        'linkFlag': '',
        'title': '',
        'fileName': '',
        'keywords': '',
        'tag': '',
        'summary': '',
        'subjectID': '',
        'styleID': '',
        'platformAttribute': '',
        'platFormAttributeChange': '',
        'logoFile': ''
      },
      // 字体 加粗/倾斜/下划线设置统计点击次数
      boldCount: 1,
      italicCount: 1,
      underlineCount: 1,
      // 字体 加粗/倾斜/下划线设置点击后的样式改变状态
      boldChecked: false,
      italicChecked: false,
      underlineChecked: false,
      // 验证规则
      audioRules: {
        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' }
        ]

      },
      allowType: '',
      // 音频对话框显示状态
      addAudioDialog: false,
      // 统计标题字数
      counter: 0,
      // 统计摘要字数
      summarycounter: 0,
      // 模板文件
      fileName: '',
      // 标题颜色选择器默认颜色
      titlecolor: 'rgba(0, 0, 0, 1)',
      // 短标题颜色选择器默认颜色
      shorttitlecolor: 'rgba(0, 0, 0, 1)',
      // 内容属性赋值
      attributes: [],
      // 摘要字体统计显示状态
      summaryCounterShow: false,
      selectAttributes: [],
      platformAttributes: [],
      selectPlatAttributes: [],
      tagFlag: false,
      showSetTopFlag: false,
      resourceDialogModal: false,
      resourceDialogProps: {},
      platformID: 'pc',
      tmpFileList: [],
      file: {},
      web: false,
      imgResourceDialogProps: {
        selectorURL: 'imageResources',
        resourceType: 'image',
        allowType: '.jpg,.jpeg,.png,gif,.bmp',
        height: 200,
        width: 200,
        url: ''
      }
    }
  },
  created() {
    this.init()
  },
  watch: {
    contentId() {
      if (this.contentId) {
        this.init()
      }
    }
  },
  methods: {
    setProperties(res) {
      if (res.data.status !== 1) {
        return
      }
      let keys = Object.keys(this.special)
      for (let key in res.data.data) {
        if (keys.includes(key) && res.data.data[key]) {
          this.special[key] = res.data.data[key]
        }
      }
    },
    async init() {
      // 初始化可选内容属性
      let attResp = await axios.get('/ui/contentcore/contentattrs')
      if (attResp.data.status === 1) {
        this.contentAttributes = attResp.data.data
      }
      // 初始化音频内容
      const res = await axios.get(`/ui/special/${this.contentId}`)
      this.setProperties(res)
      // 初始化可选平台属性
      let platResp = await axios.get(`/ui/contentcore/platforms/${this.special.siteID}`)
      if (platResp.data.status === 1) {
        this.platformAttributes = platResp.data.data
      }
      if (this.special.title) {
        this.counter = this.special.title.length
      }
      this.showSubtTitleFlag = !!this.special.subTitle
      this.showShortTitleFlag = !!this.special.shortTitle
      this.selectAttributes = this.special.attribute ? this.special.attribute.split(',') : []
      this.selectPlatAttributes = this.special.platformAttribute ? this.special.platformAttribute.split(',') : []
    },
    uploadAudio() {
      let specialType = this.allowType
      this.resourceDialogProps = {
        selectorURL: 'specialResources',
        resourceType: 'special',
        allowType: specialType,
        url: ''
      }
      this.resourceDialogModal = true
    },
    // 文件上传确定事件
    async fileUploadHandler(e) {
      let file = e.file
      const formData = new FormData()
      if (file) {
        formData.append('file', file, file.name)
      }
      for (let i in this.special) {
        formData.append(i, this.special[i])
      }
      //  formData.append('catalogID'this.catalogId)
      //  formData.append('groupID'this.contentId)
      // console.log(formData.get('file'))
      let resp = await axios.post(`/ui/special/${this.contentId}/upload`,
        formData,
        {
          headers: { 'Content-Type': 'multipart/form-data' }
        }
      )
      util.showResponseMessage(resp.data)
    },
    removeFileHandler(file, files) {
      this.tmpFileList = JSON.parse(JSON.stringify(files))
    },
    // 改变选中文件触发事件
    selectFileChangeHandler(file, files) {
      if (files.length > 1) {
        this.$message.info('文件总数量限制为1')
        return
      }
      this.file = file
      this.tmpFileList = JSON.parse(JSON.stringify(files))
    },
    // 加载列表
    contentLogDatas() {

    },
    setTitleColor() {

    },
    setShortTitleColor() {

    },
    clearLogo() {

    },
    refreshContent(ID) {
      this.$emit('refreshlist', ID)
    },
    resourceDialogCallback(val1, val2, resourceid, resourceselector) {
    //  console.log(val1 val2, resourceid)
      if (!resourceid) {
        resourceid = '0'
      }
      this.special.resourceID = resourceid
      this.special.fullLogoFile = val1
      this.special.logoFile = val2
    },
    // 新建音频对话框确定按钮点击事件
    confirmAddAudioDialogClick() {
      if (!this.special.audiofilelist.length) {
        this.dialog('请先选择文件')
        return
      }
      util.validateForm(this.$refs['specialForm']).then(() => {
        this.addAudioLoading = true
        // if (this.editMode === 1) {
        this.$emit('loadAddAudio', this.special)
        /* } else if (this.editMode === 2) {
           this.$emit('loadEditAudio', this.special);
         } */
      }).catch(() => {
        this.msgPop('没有正确填写表单项！', 'error')
      })
    },

    // 音频文件事件
    selectAudioFileChange(file, files) {
      this.special.audiofilelist = files.slice(-1)
    },
    // 模板事件
    staticFileNameFlagChange(e) {
      if (e.target.checked) {
        this.staticFileNameShow = true
      } else {
        this.staticFileNameShow = false
      }
    },

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

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

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

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

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

    tagCallBack(val) {
      this.tags = contentScript.handleTags(this.special.tag, this.tags, val)
      this.special.tag = this.tags.join()
    },

    // 内容属性赋值事件
    contentAttributeChange(val) {
      this.special.attribute = this.selectAttributes.join(',')
    },
    contentPlatChange(val) {
      this.content.platformAttribute = this.selectPlatAttributes.join(',')
    },
    // 控制短标题显示或隐藏
    shortTitleChange(e) {
      this.showShortTitleFlag = e
    },
    // 控制副标题显示或隐藏
    subTitleChange(e) {
      this.showSubtTitleFlag = e
    },

    // 标题字体统计设置
    setCounterChange(val) {
      this.counter = val.length
    },
    // 摘要字数统计设置
    setSummaryCounterChange(val) {
      this.summaryCounterShow = true
      this.summarycounter = val.length
    },
    // 点击后改变加粗边框颜色并设置字体加粗
    setBoldClick(e) {
      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 = ''
      }
    },

    // 消息显示封装
    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'
      })
    }
  },
  props: ['contentId', 'catalogId', 'contentType']

}
</script>

<style scoped>
.image-color-picker {
  vertical-align: middle;
  height: auto;
}

.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 {
  padding: 12px;
}

.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>
