<template>
  <div>
    <el-dialog class="content-selector-dialog" :title="title" :visible.sync="isShow" @open="beforeDialogOpen" modal-class="page-bg-color" :disguise-page="true">
      <div>
        <el-row class="dialog-row" :gutter="5">
          <el-col :span="6" class="dialog-col">
            <el-tree :data="catalogTree" :render-content="renderContent" :props="defaultProps" node-key="ID" :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false" @node-click="handleNodeClick">
            </el-tree>
          </el-col>
          <el-col :span="18" class="dialog-col">
            <div id="dialog-search-div">
              <el-input placeholder="请输入搜索关键字" v-model="search.content" @keyup.enter.native="searchClickHandler" :style="{width:'25%'}"></el-input>
              内容类型：
              <el-select v-model="search.contentType" clearable @change="contentTypeSelectChange" :style="{width:'15%'}">
                <el-option v-for="item in contentTypes" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
                </el-option>
              </el-select>
              <el-button type='primary' @click="searchClickHandler">搜 索</el-button>
            </div>
            <div id="dropdown-div">
              <el-select v-model="search.sort" @change="sortTypeSelectChange">
                <el-option v-for="item in sortTypes" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
            <el-table :data="contentList" ref="table" tooltip-effect="dark" highlight-current-row @selection-change="onselectionChange">
              <el-table-column type="selection" width="45" align="center"></el-table-column>
              <el-table-column label="标题">
                <template slot-scope="scope">
                  <span :title="'标题：'+scope.row.title">{{scope.row.title}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="statusName" label="状态" width="100"></el-table-column>
              <el-table-column width="180" label="发布时间">
                <template slot-scope="scope">
                  <span :title="'发布时间：'+scope.row.publishDate">{{scope.row.publishDate}}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="page-wrap">
              <el-pagination class="page" @current-change="currentChangeHandler" @size-change="chooseSizeChangeHandler" :page-sizes="[5,10, 15, 20, 30, 50]" :current-page.sync="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer">
        <el-button @click="isShow= false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="comfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    title: String,
    show: Boolean,
    dimensionCatalogInnerCode: String,
    dimensionId: [Number, String],
    dimensionCatalogId: [Number, String],
    dimensionType: String,
    contentTypes: Array,
    sortTypes: Array
  },
  data() {
    return {
      selectedRows: [], //  选中的文章
      search: {
        content: '',
        contentType: '',
        sort: 'Default',
        catalogID: 0,
        innerCode: '0'
      }, //  查询条件
      submitLoading: false,
      catalogTree: [],
      defaultProps: {
        //  树节点默认配置
        children: 'children',
        label: 'name'
      },
      pageSize: 10,
      currentPage: 1,
      total: 0,
      contentList: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    beforeDialogOpen() {
      this.selectedRows = []
      this.search = {
        content: '',
        contentType: '',
        sort: 'Default',
        catalogID: 0,
        innerCode: '0'
      }
      this.pageSize = 15
      this.currentPage = 1
      this.total = 0
      this.bindEditorTree()
      this.loadContentList()
    },
    async comfirm() {
      if (!this.selectedRows || this.selectedRows.length === 0) {
        this.$emit('dialog', '请至少选择一行')
        return
      }
      let ids = util.getSelectedIDs(this.selectedRows).join()
      let opts = {
        ids: ids,
        dimensionID: this.dimensionId,
        dimensiontype: this.dimensionType
      }
      this.submitLoading = true
      try {
        let res = await axios.put(`/ui/dimesion/${this.dimensionCatalogId}/content/adddimension`, opts)
        this.submitLoading = false
        util.showMessage(res)
        if (res.data.status === 1) {
          this.$emit('update:show', false)
          this.$emit('callback')
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    },
    // 树节点渲染
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store },
        status: true
      }
      return util.renderTreeContent(params)
    },
    async bindEditorTree() {
      try {
        let res = await axios.get('/ui/catalog/bindeditortree')
        this.catalogTree = res.data.data
      } catch (e) {
        this.submitLoading = false
        util.showErrorNotification(e)
      }
    },
    handleNodeClick(row) {
      this.search.catalogID = row.ID
      this.search.innerCode = row.innerCode
      this.loadContentList()
    },
    async loadContentList() {
      let opts = {
        innerCode: this.search.innerCode,
        contentType: this.search.contentType,
        dimensionCatalogInnerCode: this.dimensionCatalogInnerCode,
        orderType: this.search.sort,
        pageIndex: this.currentPage - 1,
        pageSize: this.pageSize,
        keywords: encodeURIComponent(this.search.content),
        publishStatus: 'All'
      }
      try {
        let res = await axios.get(`/ui/dimesion/${this.search.catalogID}/content/bindcontentlist`, { params: opts })
        this.contentList = res.data.data
        this.total = res.data.total
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    },
    contentTypeSelectChange(value) {
      this.search.contentType = value
    },
    sortTypeSelectChange(value) {
      this.search.sort = value
      this.loadContentList()
    },
    chooseSizeChangeHandler(val) {
      this.pageSize = val || this.pageSize
      this.loadContentList()
    },
    currentChangeHandler(val) {
      this.currentPage = val || this.currentPage
      this.loadContentList()
    },
    onselectionChange(selection) {
      this.selectedRows = selection
    },
    searchClickHandler() {
      this.loadContentList()
    }
  }
}
</script>
<style>
</style>
<style scoped>
.pageBar {
  width: 100%;
  position: relative;
  top: 5px;
  margin-left: 10px;
}

.catalog-tree {
  color: black;
}

.dialog-input {
  width: 270px;
}

.dialog-row {
  height: calc(100vh - 133px);
  border: 1px solid #eee;
}

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

#dialog-search-div {
  padding: 5px;
  text-align: right;
  border: 1px solid #f5f5f5;
  background-color: #fff;
}

#dropdown-div {
  text-align: right;
  width: 100%;
  background-color: #f2f3f4;
  padding: 5px 10px;
}
</style>
