<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="goBack()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" :priv="isEdit()?'com.zving.cms.MessageBoard.Edit.'+ID:'MessageBoardManage.Add'" class="el-button el-button--default save" :loading="confirmLoading" @click="confirm"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <el-form :model="tmpMessageBoard" ref="addMessageBoardForm" label-width="170px" v-loading="dataLoading">
          <el-form-item label="留言板名称：" prop="name" :verify="['NotNull','Length<100']">
            <el-input class="form-item" v-model="tmpMessageBoard.name" @blur="setAlias"></el-input>
          </el-form-item>
          <el-form-item label="别名：" prop="code" :verify="['NotNull','Regex=^\\w+$','Length<100']">
            <el-input class="form-item" v-model="tmpMessageBoard.code" :disabled="!!tmpMessageBoard.ID"></el-input>
          </el-form-item>
          <el-form-item label="留言板描述：" prop="description" :verify="['NotNull','Length<150']">
            <el-input class="form-item" type="textarea" :rows="3" v-model="tmpMessageBoard.description"></el-input>
          </el-form-item>
          <el-form-item label="关联栏目：" prop="catalogID">
            <tree-select :value.sync="tmpMessageBoard.catalogID" :items="catalogTree" width="80%" placeholder="请选择">
            </tree-select>
          </el-form-item>
          <el-form-item prop="isOpen" label="是否开放留言：">
            <el-switch v-model="tmpMessageBoard.isOpen" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item prop="messageLogin" label="留言是否需要登录：">
            <el-switch v-model="tmpMessageBoard.messageLogin" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item prop="messageVerify" label="留言是否需要审核：">
            <el-switch v-model="tmpMessageBoard.messageVerify" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item prop="timesLimit" label="每人留言次数限制：">
            <el-input-number v-model="messageTimesLimit[2]" :min="1" :max="100000" controls-position="right" style="width:80px;" size="small"></el-input-number>
            条/
            <el-input-number v-model="messageTimesLimit[1]" :min="1" :max="100000" controls-position="right" style="width:80px;" size="small"></el-input-number>
            <el-select v-model="messageTimesLimit[0]" style="width:80px;" @change="timeLimitChange">
              <el-option v-for="item in this.timesUnit" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>（频率：{{messageTimesLimit[2]}}次/{{messageTimesLimit[1]}}{{timesName}}）
          </el-form-item>
          <el-form-item prop="messageboardRLSWord" label="是否替换(链接/敏感词)：">
            <el-switch v-model="tmpMessageBoard.messageboardRLSWord" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item prop="messageboardLinkSensitiveWord" label="(链接/敏感词)替换为：">
            <el-input class="form-item" v-model="tmpMessageBoard.messageboardLinkSensitiveWord"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import TreeSelect from '@src/components/TreeSelect.vue'
import util from '@src/common/util.js'

export default {
  components: {
    'tree-select': TreeSelect
  },

  props: {
    ID: {
      required: true
    }
  },

  data() {
    return {
      dataLoading: false,
      confirmLoading: false,
      catalogTree: [],
      timesUnit: [],
      tmpMessageBoard: {
        name: '', // 别名
        code: '', // 关联栏目
        catalogID: '',
        description: '', // 是否开放留言
        isOpen: 'Y', // 链接、敏感词替换为
        messageboardLinkSensitiveWord: '****', // 是否替换链接、敏感词
        messageboardRLSWord: 'N', // 是否需要审核
        messageVerify: 'Y',
        messageTimesLimit: 'd|1|5', // 是否需要登录
        messageLogin: 'Y'
      },
      messageTimesLimit: [],
      timesName: '天'
    }
  },

  created() {
    this.initData()
  },

  methods: {
    async initData() {
      this.dataLoading = true
      this.confirmLoading = false
      try {
        let catalogTree = await axios.get('/ui/catalog')
        this.catalogTree = catalogTree.data.data
        let timesUnit = await axios.get('/ui/messageboard/timeunit', {
          params: { l: 'y', r: 's' }
        })
        this.timesUnit = timesUnit.data.data
        if (this.isEdit()) {
          let res = await axios.get(`/ui/messageboard/${this.ID}`)
          this.tmpMessageBoard = res.data.data
        }
        if (this.tmpMessageBoard.messageTimesLimit) {
          this.messageTimesLimit = this.tmpMessageBoard.messageTimesLimit.split('|')
        }
      } catch (e) {
      }
      this.dataLoading = false
    },
    async confirm() {
      try {
        await util.validateForm(this.$refs['addMessageBoardForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      this.confirmLoading = true
      this.tmpMessageBoard.messageTimesLimit = this.messageTimesLimit[0] + '|' + this.messageTimesLimit[1] + '|' + this.messageTimesLimit[2]
      let res = this.isEdit() ? (await axios.put(`/ui/messageboard/${this.ID}`, this.tmpMessageBoard))
        : (await axios.post('/ui/messageboard', this.tmpMessageBoard))
      util.showResponseMessage(res.data)
      this.confirmLoading = false
      if (res.data.status === 1) {
        this.goBack()
      }
    },

    setAlias() {
      if (this.tmpMessageBoard.name !== '' && this.tmpMessageBoard.code === '') {
        this.tmpMessageBoard.code = window.util.getSpell(this.tmpMessageBoard.name, true)
      }
    },

    timeLimitChange(val) {
      this.timesUnit.forEach(o => {
        if (o.value === val) {
          this.timesName = o.text
        }
      })
    },

    isEdit() {
      return this.ID && this.ID !== 'new'
    },

    goBack() {
      this.$router.back()
    }
  }
}
</script>
<style scoped>
  .form-item {
    width: 80%;
  }
  .el-textarea{
    position: relative;
  }
</style>
