<template>
  <div class="pane-up-wrap" v-loading="dataLoading">
    <el-toolbar>
      <el-button @click="save" :loading="confirmLoading" :priv="`com.zving.cms.Site.ExtendAdmin.${siteID}`">
        <i class="fa fa-floppy-o" aria-hidden="true"></i>保存</el-button>
    </el-toolbar>
    <div class="pane-wrap site-extend">
      <el-form label-width="180px" label-suffix="：">
        <div class="panel-fieldset">
          <h4 class="panel-legend">文章内容设置</h4>
          <el-form-item label="默认字体类型">
            <el-input v-model="extend.articleFontFamily" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="默认字体大小">
            <el-input v-model="extend.articleFontSize" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="默认文本间距">
            <el-input v-model="extend.articleLetterSpacing" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="默认行间距">
            <el-input v-model="extend.articleLineHeight" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="文章自动排版规则">
            <el-checkbox-group v-model="extend.articleAutoFormatRule">
              <div v-for="item in articleAutoFormatRuleSelection" :key="item.ID">
                <el-checkbox @change="autoFormatRuleItemChange(item)" :label="item.ID">{{item.name}}</el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="开启文章自动保存">
            <el-switch v-model="extend.articleAutoSave" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item label="文章正文图片查看原图">
            <el-switch v-model="extend.articleImageWhetherOriginal" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item label="长文章自动分页">
            <el-switch v-model="extend.articleAutoPaged" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item label="自动分页字数" v-if="extend.articleAutoPaged === 'Y'">
            <div v-for="item in plantforms" :key="item.name" class="form-item">
              <el-row>
                <el-col :span="6">{{item.name}}:</el-col>
                <el-col :span="18">
                  <el-input v-model="extend.articleAutoPagedWords[item.ID]"></el-input>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
          <el-form-item label="附件下载地址">
            <el-select clearable v-model="extend.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>
        </div>
        <div class="panel-fieldset">
          <h4 class="panel-legend">页面布局设置</h4>
          <el-form-item label="作者">
            <el-switch v-model="extend.articleCustomLayout.author" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="编辑">
            <el-switch v-model="extend.articleCustomLayout.editor" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="内容属性">
            <el-switch v-model="extend.articleCustomLayout.attributes" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="发布平台">
            <el-switch v-model="extend.articleCustomLayout.platformAttribute" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="发布渠道">
            <el-switch v-model="extend.articleCustomLayout.channelAttribute" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="Tag词">
            <el-switch v-model="extend.articleCustomLayout.tag" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="关键词">
            <el-switch v-model="extend.articleCustomLayout.keyword" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="来源">
            <el-switch v-model="extend.articleCustomLayout.source" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="下载远程图片">
            <el-switch v-model="extend.articleCustomLayout.copyImageFlag" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="权重">
            <el-switch v-model="extend.articleCustomLayout.weight" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="评论">
            <el-switch v-model="extend.articleCustomLayout.comment" active-value="R" inactive-value="L" active-text="页面右侧" inactive-text="页面左侧"></el-switch>
          </el-form-item>
          <el-form-item label="编辑区域宽度">
            <el-input-number v-model="extend.articleCustomLayout.bodyWidth" :step="5" :min="100" :max="880"></el-input-number>
            <el-tooltip placement="right" effect="dark">
              <div slot="content">编辑区域宽度值为100px-880px,不填默认为770px</div>
              <span><i class="fa fa-lightbulb-o f18" style="color:#FFC125; margin-left:5px"></i></span>
            </el-tooltip>
          </el-form-item>
        </div>
        <div class="panel-fieldset">
          <h4 class="panel-legend">微博设置</h4>
          <articletoweibo-site-config-extend :extends.sync="extend"></articletoweibo-site-config-extend>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import articletoweiboSiteConfigExtend from '../../articletoweibo/components/ArticletoweiboSiteConfigExtend.vue'

export default {
  components: {
    'articletoweibo-site-config-extend': articletoweiboSiteConfigExtend
  },
  props: {
    siteID: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      extend: {
        articleCustomLayout: {},
        articleFileDownloadPath: 'url'
      },
      downloadTypes: [
        { value: 'zaction', label: '动态地址下载' },
        { value: 'url', label: '绝对地址下载' }
      ], //  附件下载类型
      confirmLoading: false,
      dataLoading: true,
      plantforms: [], // 发布平台
      articleAutoFormatRuleSelection: [] // 文章自动排版规则
    }
  },
  methods: {
    async save() {
      this.confirmLoading = true
      let obj = Object.assign({}, this.extend)
      let articleAutoFormatRule = obj.articleAutoFormatRule
      obj.articleAutoFormatRule = ''
      for (let i = 0; i < articleAutoFormatRule.length; i++) {
        if (i === 0) {
          obj.articleAutoFormatRule += articleAutoFormatRule[i]
        } else {
          obj.articleAutoFormatRule += ',' + articleAutoFormatRule[i]
        }
      }
      if (obj.articleAutoPaged === 'Y') {
        let articleAutoPagedWords = obj.articleAutoPagedWords
        obj.articleAutoPagedWords = ''
        for (let i in articleAutoPagedWords) {
          obj.articleAutoPagedWords += i + '=' + articleAutoPagedWords[i] + ','
        }
        obj.articleAutoPagedWords = obj.articleAutoPagedWords.substring(0, obj.articleAutoPagedWords.lastIndexOf(','))
      }
      let res = await axios.put(`/ui/sites/${this.siteID}/extends`, { extends: obj })
      util.showResponseMessage(res.data)
      this.confirmLoading = false
    },
    setAutoPagedWords(val) {
      if (val === 'Y' && this.extend.articleAutoPagedWords === '500') {
        this.extend.articleAutoPagedWords = {}
      }
    },
    autoFormatRuleItemChange(rule) {
      let ruleID = rule.ID
      let clearID = 'ClearTableBorder'; let resetID = 'ResetTableBorder'
      if (ruleID === clearID || ruleID === resetID) {
        let clearIndex = this.extend.articleAutoFormatRule.indexOf(clearID)
        let resetIndex = this.extend.articleAutoFormatRule.indexOf(resetID)
        if (clearIndex !== -1 && resetIndex !== -1) {
          if (ruleID === clearID) {
            this.extend.articleAutoFormatRule.splice(resetIndex, 1)
          } else {
            this.extend.articleAutoFormatRule.splice(clearIndex, 1)
          }
        }
      }
    },
    async init() {
      try {
        let res = await axios.get(`/ui/sites/${this.siteID}/extends`)
        if (res.data.status === 1) {
          this.extend = res.data.data
          this.extend.articleAutoFormatRule = this.extend.articleAutoFormatRule ? this.extend.articleAutoFormatRule.split(',') : []
          if (this.extend.articleAutoPaged === 'Y') {
            if (this.extend.articleAutoPagedWords === '500') {
              this.extend.articleAutoPagedWords = {}
            } else {
              let arr = this.extend.articleAutoPagedWords.split(',')
              this.extend.articleAutoPagedWords = {}
              for (let i = 0; i < arr.length; i++) {
                let propArr = arr[i].split('=')
                Vue.set(this.extend.articleAutoPagedWords, propArr[0], propArr[1])
              }
            }
          }
          try {
            this.extend.articleCustomLayout = JSON.parse(this.extend.articleCustomLayout)
          } catch (e) {
            this.extend.articleCustomLayout = {}
          }
        }
      } catch (e) {}
      this.dataLoading = false
    }
  },
  async created() {
    let getPlantforms = await axios.get('/ui/publishplatform')
    this.plantforms = getPlantforms.data.data
    let getArticleAutoFormatRule = await axios.get('/ui/article/autoformatrule')
    this.articleAutoFormatRuleSelection = getArticleAutoFormatRule.data.data
  }
}
</script>
