<template>
  <div>
    <el-row class="recommended-content-selector" :gutter="5">
      <el-col style="padding:0px;">
        <div class="dialog-search-div">
          <el-input v-model="searchAddress" class="dialog-input" @keyup.enter.native="search" placeholder="请输入关键词"></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <div class="dropdown-div">
          <el-dropdown @command="handleSortCommand">
            <el-button type="text">
              <i :class="dropdown.i"></i>{{dropdown.content}}
              <i class="fa fa-caret-down"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="Default">
                <i class="fa fa-building"></i>默认排序</el-dropdown-item>
              <el-dropdown-item command="AddTime">
                <i class="fa fa-calendar-plus-o"></i>按添加日期</el-dropdown-item>
              <el-dropdown-item command="PublishDate">
                <i class="fa fa-calendar-check-o"></i>按发布日期</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-table :data="ContentData" ref="datatable" class="catalogcontent-table" height="380" highlight-current-row @selection-change="selectionChange"
          @current-change="currentChangeRow">
          <el-table-column :type="selectType === 'selection' ? 'selection':'index'" width="60" align="center"></el-table-column>
          <el-table-column prop="title" show-overflow-tooltip width="285" label="内容标题"></el-table-column>
          <el-table-column prop="siteName" show-overflow-tooltip label="来源站点"></el-table-column>
          <el-table-column prop="catalogName" show-overflow-tooltip label="来源栏目"></el-table-column>
          <el-table-column prop="addUser" show-overflow-tooltip label="编辑"></el-table-column>
          <el-table-column prop="publishDate" show-overflow-tooltip label="发布时间"></el-table-column>
          <el-table-column prop="addTime" show-overflow-tooltip label="推送时间"></el-table-column>
          <!-- <el-table-column prop="publishDate" show-overflow-tooltip width="185" label="最后修改时间"></el-table-column> -->
          <el-table-column prop="statusName" show-overflow-tooltip width="95" label="状态"></el-table-column>
        </el-table>
        <!--分页-->
        <div class="dialog-pageBar">
          <el-pagination class="page" @size-change="sizeChangeHandler" @current-change="currentChangeHandler" :current-page.sync="pageIndex"
            :page-sizes="pageSizes" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    'siteID': [Number, String],
    'selectType': [String],
    'blockID': [Number, String],
    'tabName': String,
    'clearSelection': Boolean
  },
  data() {
    return {
      pageIndex: 1, // 栏目内容当前页
      pageSizes: [10, 20, 50], // 栏目内容可选每页数据条数
      pageSize: 10, // 栏目内容当前每页条数
      total: 0, // 栏目内容总条数
      searchAddress: '', // 链接栏目内容查询值
      dropdown: {
        i: 'fa fa-building',
        content: '默认排序'
      }, // 栏目内容弹框下拉列表
      ContentData: [],
      contentType: null,
      orderType: '',
      selectedRows: [],
      selectedRow: {},
      currentSiteID: 0
    }
  },
  methods: {
    // 渲染树样式
    renderContent: function (createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store }
      }
      return util.renderTreeContent(params)
    },
    search() {
      this.loadContentList()
    },
    // 栏目内容页面大小改变事件
    sizeChangeHandler(val) {
      this.pageSize = val
      this.search()
    },
    // 栏目内容当前页改变触发事件
    currentChangeHandler(val) {
      this.pageIndex = val
      this.search()
    },
    // 栏目内容表格数据选中事件
    selectionChange(selection) {
      this.selectedRows = selection
      if (this.selectType === 'selection') {
        this.$emit('callback', selection)
      }
    },
    currentChangeRow(row) {
      this.selectedRow = Object.assign({}, row)
      if (this.selectType !== 'selection') {
        this.$emit('callback', row)
      }
    },
    async loadContentList() {
      let opts = {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        contentType: this.contentType,
        keywords: this.searchAddress,
        orderType: this.orderType,
        blockID: this.blockID
      }
      opts.pageIndex--
      let res = await axios.get('/ui/recommendedselector', { params: opts })
      this.ContentData = res.data.data
      this.total = res.data.total
    },
    handleSortCommand(val) {
      this.orderType = val
      if (val === 'Default') {
        this.dropdown.i = 'fa fa-building'
        this.dropdown.content = '默认排序'
      }
      if (val === 'AddTime') {
        this.dropdown.i = 'fa fa-calendar-plus-o'
        this.dropdown.content = '按添加日期'
      }
      if (val === 'PublishDate') {
        this.dropdown.i = 'fa fa-calendar-check-o'
        this.dropdown.content = '按发布日期'
      }
      this.loadContentList()
    }
  },
  watch: {
    tabName(val) {
      if (val === 'Recommend') {
        this.ContentData = []
        this.currentSiteID = this.siteID
        this.total = 0
        this.contentType = ''
        this.searchAddress = ''
        this.orderType = 'Default'
        this.pageSize = 10
        this.pageIndex = 1
        this.selectedRows = []
        this.selectedRow = {}
        this.loadContentList()
      }
    },
    clearSelection(val) {
      if (val) {
        this.$refs.datatable.clearSelection()
      }
    }
  }
}
</script>
<style>
  .recommended-content-selector {
    height: calc(100vh - 133px);
    border: 1px solid #eee;
  }

  .recommended-content-selector .dialog-col {
    background-color: #f5f5f5;
    overflow: auto;
    height: 100%;
  }

  .recommended-content-selector .dialog-search-div {
    padding: 5px;
    text-align: right;
    border: 1px solid #f5f5f5;
  }

  .recommended-content-selector .dialog-search-div .dialog-input {
    width: 270px;
  }

  .recommended-content-selector .dropdown-div {
    text-align: right;
    width: 100%;
    background-color: #f2f3f4;
    padding: 5px 10px;
  }

  .recommended-content-selector .catalogcontent-table {
    width: 100%;
    font-size: 13px;
    margin: 0px;
  }
</style>
