<template>
  <div>
    <el-row :style="{height:contentHeight || '390px'}">
      <el-col :span="7" class="dialog-col">
        <div v-if="from === 'ContentList'">
          <site-select v-model="siteID" :name="siteName" @callback="siteSelectCallback"></site-select>
        </div>
        <dim-select :dim-info="{'enable':true}" @callback="callback"></dim-select>
        <el-tree :render-content="renderContent" :data="catalogTree" @node-click="handleNodeClick" default-expand-all highlight-current
          :node-key="treeOptions.key" :props="treeOptions" :expand-on-click-node="false" class="catalog-tree"></el-tree>
      </el-col>
      <el-col :span="17" class="dialog-col">
        <div id="dialog-search-div">
          <el-input v-model="searchAddress" class="dialog-input" placeholder="请输入关键词" @keyup.enter.native="search"></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <div id="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-radio-group v-model="selectedRow.ID" style="width:100%;">
          <el-table :data="catalogContentData" :data-read-url="getData" :page-size="10" :auto-get-data="false" ref="datatable" highlight-current-row
            @selection-change="selectionChange" @current-change="currentChangeRow" style="margin:0;">
            <el-table-column :type="selectType === 'selection' ? 'selection' : 'index'" width="50" align="center"></el-table-column>
            <el-table-column prop="" show-overflow-tooltip label="内容标题">
              <template slot-scope="scope">
                <span v-if="selectType === 'selection'">
                  {{scope.row.title}}
                </span>
                <span v-else>
                  <el-radio :label="scope.row.ID">{{scope.row.title}}</el-radio>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="catalogName" show-overflow-tooltip min-width="80" 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>
        </el-radio-group>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import siteSelectDialog from '@src/pages/contentcore/siteSelectDialog.vue'
import DimSelect from '../DimSelect.vue'
export default {
  components: {
    'site-select': siteSelectDialog,
    'dim-select': DimSelect
  },
  data() {
    return {
      searchAddress: '', // 链接栏目内容查询值
      dropdown: {
        i: 'fa fa-building',
        content: '默认排序'
      }, // 栏目内容弹框下拉列表
      catalogContentData: [],
      treeOptions: { key: 'ID', label: 'name', children: 'children' },
      catalogTree: [], // 栏目树数据
      lastCatalogID: null,
      orderType: '',
      selectedRows: [],
      selectedRow: {},
      siteName: '',
      catalogId: null

    }
  },
  props: ['siteID', 'selectType', 'from', 'tabName', 'contentHeight', 'catalogID', 'contentType', 'clearSelection'],
  watch: {
    tabName(val) {
      if (val === 'Normal') {
        // this.init()
      }
    },
    clearSelection(val) {
      if (val) {
        this.$refs.datatable.clearSelection()
      }
    }
  },
  methods: {
    callback(val) {
      this.catalogTree = val
    },
    init() {
      this.$refs.datatable.clearSelection()
      this.catalogId = null
      this.orderType = ''
      this.searchAddress = ''
      this.loadingCatalogTree()
      this.$nextTick(() => {
        this.search()
      })
      this.initApplication()
    },
    async initApplication() {
      if (this.from === 'ContentList') {
        let initApplication = await axios.get('/ui/sites/initapplication')
        this.siteID = initApplication.data.data.siteID
        this.siteName = initApplication.data.data.siteName
      }
    },
    // 站点选择回调
    siteSelectCallback(val) {
      this.siteID = val
      this.loadingCatalogTree()
      this.search()
    },
    search(CID) {
      if (typeof CID === 'undefined') {
        this.catalogId = this.lastCatalogID
      } else {
        this.lastCatalogID = CID
      }
      this.selectedRows = []
      this.selectedRow = {}
      this.$refs.datatable.getData()
    },

    // 获取栏目列表数据
    async loadingCatalogTree() {
      let bindEditorTree = await axios.get('/ui/catalog/bindeditortree', {
        params: {
          siteID: this.siteID,
          contentType: this.contentType
        }
      })
      this.catalogTree = bindEditorTree.data.data
    },
    getData() {
      return [
        this.contentType === 'Image' ? '/ui/contentselector/imagegroups' : '/ui/contentselector',
        {
          params: {
            catalogID: this.catalogId === null ? this.catalogID : this.catalogId,
            contentType: this.contentType,
            keywords: encodeURIComponent(this.searchAddress),
            orderType: this.orderType
          }
        }
      ]
    },

    // 栏目内容表格数据选中事件
    selectionChange(selection) {
      this.selectedRows = selection
      if (this.selectType === 'selection') {
        this.$emit('select', selection)
      }
    },
    currentChangeRow(row) {
      this.selectedRow = Object.assign({}, row)
      if (this.selectType !== 'selection') {
        this.$emit('select', row)
      }
    },
    handleNodeClick(val) {
      let CID = val.ID
      if (!CID) {
        CID = 0
      }
      this.catalogId = CID
      this.search(CID)
    },
    // 链接到内容弹框选中数据排序下拉列表
    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.search()
    },
    // 获取选中
    getSelected() {
      if (this.selectType === 'selection') { // 获取所有选中的
        return this.selectedRows
      } else { // 获取最后点击选中的行
        return this.selectedRow
      }
    },
    confirm() {
      let html = ''
      this.selectedRows.forEach(row => {
        html += '<p><a href="' + row.link + '" articlerela="' + row.value + '" target="_blank">' + row.title + '</a></p>'
      })

      if (this.contentType === 'Image') {
        html = ''
        this.selectedRows.forEach(row => {
          html += `<span id="imagegroupjs_${row.ID}" _prefix="${row.prefix}" _path="${row.path}" _id="${row.ID}" ztype="zimagegroup" class="edui-faked-imagegroup"><`
          html += `script  src="${row.path}"><`
          html += '/script></span>'
        })
      }
      window.editor.execCommand('insertHTML', html)
      window.dialog.close(false)
    },
    // 渲染树样式
    renderContent: function (createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store }
      }
      return util.renderTreeContent(params)
    }
  }
}
</script>
<style scoped>
  .pageBar {
    width: 100%;
    position: relative;
    top: 5px;
    margin-left: 10px;
  }

  .catalog-tree {
    color: black;
  }

  .dialog-input {
    width: 270px;
  }

  .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>
