<template>
   <div class="right-list-toolbar right-list-panel-card">
      <el-toolbar>
        <el-col :span="14">
            <el-button @click="addMessageBoardClick" priv="MessageBoardManage.Add"><i class="fa fa-plus"></i>新建留言板</el-button>
            <!-- <el-button :disabled="selectedRows.length === 0" @click="deleteMessageBoardClick(selectedRows)">
              <i class="fa fa-remove"></i>删除</el-button> -->
        </el-col>

        <el-col :span="10" class="search-box-r tool-search-box-r">
          <el-input v-model="searchMessageBoardName" @keyup.enter.native="searchMessageBoard" placeholder="请输入名称或别名" class="search-bar-algin-toolbar"></el-input>
          <span class="search-icon"><i class="fa fa-search" @click="searchMessageBoard" title="查询"></i></span>
        </el-col>
      </el-toolbar>

        <el-list-view ref="messageBoardsTable" :data="messageBordData" :data-read-url="getMessageBoardsURL" :pageSize="10" @selection-change="messageBoardOnSelectionChange" selectable :multi-operates="multiOperates" class="message-board-list-view">
          <template slot-scope="row">
            <div class="panel-card">
              <el-row>
                <el-col :span="18">
                  <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(row)">{{row.name}}</a>
                  <span class="gray f16 p-l-30">别名：{{row.code}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span>关联栏目：</span>
                  <em>{{row.catalogName || '无'}}</em>
                </el-col>
                <el-col :span="8">
                  <span>留言是否需要登录：</span>
                  <em>{{row.configProps.messageLogin=='Y'?'是':'否'}}</em>
                </el-col>
                <el-col :span="8">
                  <span>留言是否需要审核：</span>
                  <em>{{row.configProps.messageVerify=='Y'?'是':'否'}}</em>
                </el-col>
              </el-row>
              <el-row class="middle-row">
                <el-col :span="8">
                  <span>是否替换(链接/敏感词)：</span>
                  <em>{{row.configProps.messageboardRLSWord=='Y'?'是':'否'}}</em>
                </el-col>
                <el-col :span="8">
                  <span>(链接/敏感词)替换为：</span>
                  <em>{{row.configProps.messageboardLinkSensitiveWord||'无'}}</em>
                </el-col>
                <el-col :span="8">
                  <span>添加人：</span>
                  <em>{{row.addUser || '无'}}</em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span>添加时间：</span>
                  <em>{{row.addTime | fixDateTime}}</em>
                </el-col>
                <el-col :span="16">
                  <div class="description" :title="row.description">
                    <span>留言板描述：</span>
                    <em>{{row.description}}</em>
                  </div>
                </el-col>
              </el-row>
              <el-row class="list-card-buttons">
                <el-col :span="10">
                  <el-tag size="small">{{row.isOpen=='Y'?'公开':'不公开'}}</el-tag>
                </el-col>
                <el-col :span="14" class="tar">
                  <el-button @click.stop="editMessageBoardClick(row.ID)" type="text" title="编辑" :priv="'com.zving.cms.MessageBoard.Edit.'+row.ID">
                    <i class="fa fa-edit"></i>编辑</el-button>
                  <el-button @click.stop="deleteMessageBoardClick([row])" type="text" title="删除" :priv="'com.zving.cms.MessageBoard.Delete.'+row.ID">
                    <i class="fa fa-times"></i>删除</el-button>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
    </div>

</template>

<script>
import util from '@src/common/util.js'
import Privilege from '@src/common/privilege.js'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      messageBoardID: 0,
      messageBordData: [],
      // 搜索留言板名称
      searchMessageBoardName: '',
      // 选中的留言板行
      selectedRows: [],
      boardID: 0,
      multiOperates: [
        {
          label: '删除',
          value: 'delete',
          fn: rows => {
            this.deleteMessageBoards(rows)
          }
        }
      ]
    }
  },

  methods: {
    // 批量删除
    async deleteMessageBoards(rows) {
      this.$confirm(`确认删除选择的<span class='icon-danger'>${rows.length}个</span>留言板吗 ？`, {
        title: '提示',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      })
        .then(async r => {
          let ids = []
          rows.forEach(item => {
            Privilege.hasPriv(`com.zving.cms.MessageBoard.Delete.${item.ID}`) && ids.push(item.ID)
          })

          if (!ids.length) {
            return
          }

          let res = await axios.delete(`/ui/messageboard/delete`, {
            params: { ids }
          })
          util.showResponseMessage(res.data)
          if (res.data.status === 1) {
            this.$refs.messageBoardsTable.getData()
          }
        })
        .catch(err => { console.error(err) })
    },

    // 搜索留言板
    searchMessageBoard() {
      this.$refs.messageBoardsTable.getData()
    },

    getMessageBoardsURL() {
      return [
        '/ui/messageboard',
        {
          params: {
            searchContent: this.searchMessageBoardName
          }
        }
      ]
    },

    // 添加留言板
    addMessageBoardClick() {
      this.messageBoardID = 0
      this.$router.push({path: '/plugins/messageboard/new'})
    },

    // 编辑留言板
    async editMessageBoardClick(row) {
      this.messageBoardID = row.ID ? row.ID : row
      this.$router.push({path: `/plugins/messageboard/${this.messageBoardID}`})
    },

    // 处理删除留言板
    async deleteMessageBoardClick(rows) {
      if (rows.length === 0) {
        this.$alert('请先选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let rowIds = []
      rows.forEach(function(row) {
        rowIds.push(row.ID)
      })
      if (!rowIds) {
        return
      }
      let strids = rowIds.join(',')
      let res = await axios.delete(`/ui/messageboard/${strids}`, {})
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$refs.messageBoardsTable.getData()
      }
    },

    // 留言板选中行改变
    messageBoardOnSelectionChange(selection) {
      this.selectedRows = selection
      if (this.selectedRows.length > 0) {
        this.boardID = this.selectedRows[0].ID
        this.boardID = 0
      }
    },

    // 点击名称进入详情页
    gotoDetailPage(row) {
      this.boardID = row.ID
      this.$router.push({path: `/plugins/messageboard/${this.boardID}/list`})
    }
  }
}
</script>

<style scoped>
.content_wrap {
  margin-top: 10px;
  border: 1px solid #eee;
  border-color: #ddd #ddd #ddd;
}

.d1_wrap {
  min-height: 70px;
  width: 100%;
  background: white;
  padding: 5px 10px;
}

.content-title {
  padding: 0 5px 5px 5px;
  background-color: #f9f9ff;
  line-height: 23px;
}

.el-pagination__rightwrapper {
  float: right;
}

.p-l-30 {
  padding-left: 30px;
}

.p-l-0 {
  padding-left: 0px;
}
.message-board-list-view .description{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 600px;
}
</style>
