<template>
  <div >
    <div>
      <el-toolbar>
        <el-button @click="open" :disabled="this.selectedRows.length === 0">
          <i class="fa fa-pencil"></i>打开
        </el-button>
        <el-button @click="publish" :disabled="this.selectedRows.length === 0">
          <i class="fa fa-refresh"></i>发布
        </el-button>
        <el-button @click="transfer" :disabled="this.selectedRows.length === 0">
          <i class="fa fa-paper-plane"></i>转移
        </el-button>
      </el-toolbar>
    </div>
    <div class="padding-horizontal-max">
      <div class="searchbar-wrap">
        <el-input placeholder="请输入搜索关键字" @keyup.enter.native="searchInsite" v-model="myKeyWord" style="width:460px;">
          <el-select v-model="myContentColumn" slot="prepend" style="width:120px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="标题" value="title"></el-option>
            <el-option label="作者" value="author"></el-option>
            <el-option label="编辑" value="editor"></el-option>
            <el-option label="来源" value="source"></el-option>
            <el-option label="关键字" value="keyword"></el-option>
          </el-select>
          <el-button slot="append" icon="search" @click="searchInsite" type="primary">站内搜索</el-button>
        </el-input>
      </div>
      <div class="timepicker-wrap">
        <table>
          <tr>
            <td>发布时间 ：</td>
            <td>
              <el-date-picker id="sl-date-picker1" v-model="myStartDate" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </td>
            <td>&nbsp;至&nbsp;</td>
            <td>
              <el-date-picker id="sl-date-picker2" v-model="myEndDate" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </td>
            <td>&nbsp;&nbsp;指定栏目搜索 ：</td>
            <td>
                <tree-select :value.sync="myCatalogID" style="width:215px" :items="catalogTrees" :itemsOptions="defaultProps" placeholder="请选择" ></tree-select>
            </td>
          </tr>
        </table>
      </div>

      <div class="padding-vertical-max">
        <el-checkbox-group v-model="myContentTypes">
          <el-checkbox  v-for="item in contentTypesData" :key="item.value" :label="item.value">
            {{item.label}}
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <div>
        <el-table  ref="searchResult" :data-read-url="getSearchResult" :auto-get-data="true" tooltip-effect="dark" style="width:100%" :page-size="20" @selection-change="onSelectionChange">
          <el-table-column type="index" label=" " width="60"></el-table-column>
          <el-table-column type="selection" width="60" align="center" ></el-table-column>
          <el-table-column prop="ID" label="内容ID" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="contentTypeName" label="内容类型 " width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="catalogName" label="所属栏目" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template slot-scope="scope">
                <span style="cursor: pointer;" @click.stop="editRow(scope.row)" v-html="scope.row.title"></span>
            </template>
          </el-table-column>
          <el-table-column width="58">
            <template slot-scope="scope">
              <el-button @click.native.prevent="editRow(scope.row)" type="text">
                <i class="fa fa-pencil"></i>
              </el-button>
           </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <move-catalog-dialog :visible.sync="transferDialog" :contentId="selectedIds"></move-catalog-dialog>
  </div>

</template>
<script>
import TreeSelect from '@src/components/TreeSelect.vue'
import moveCatalogDialog from './components/MoveCatalogDialog.vue'
import util from '@src/common/util.js'
export default {
  components: {
    'tree-select': TreeSelect,
    'move-catalog-dialog': moveCatalogDialog
  },

  data() {
    return {
      catalogTrees: [],
      transferDialog: false,
      siteID: this.$root.siteID,
      contents: [],
      selectedRows: [],
      myStartDate: '',
      myEndDate: '',
      myContentColumn: '',
      myKeyWord: '',
      myContentTypes: [],
      myCatalogID: '',
      contentTypesData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      contentId: '',
      selectedIds: ''
    }
  },

  watch: {
    selectContentTypes() {
      this.myContentTypes = this.selectContentTypes
    },
    catalogID() {
      this.myCatalogID = this.catalogID
    },
    keyWord() {
      this.myKeyWord = this.keyWord
    },
    contentColumn() {
      this.myContentColumn = this.contentColumn
    }
  },
  methods: {
    transfer() {
      if (this.selectedRows.length === 0) {
        this.$message('请选择一条记录')
        return
      }
      this.transferDialog = true
    },
    onSelectionChange(selection) {
      this.selectedRows = selection
      let ids = []
      this.selectedRows.forEach(v => {
        ids.push(v.ID)
      })
      this.selectedIds = ids.join(',')
    },
    handleCurrentChange() {
      this.loadingDatas()
    },
    searchInsite() {
      this.loadingDatas()
    },
    loadingDatas() {
      this.$refs.searchResult.getData()
    },
    getSearchResult() {
      let params = {
        siteID: this.siteID,
        contentColumn: this.myContentColumn,
        startDate: this.myStartDate,
        endDate: this.myEndDate,
        catalogID: this.myCatalogID,
        keyword: this.myKeyWord,
        contentType: this.myContentTypes.join()
      }
      return ['/ui/indexlist/bindsitesearchresult', {params}]
    },
    open() {
      if (this.selectedRows.length > 0) {
        this.editRow(this.selectedRows[0])
      }
    },
    async publish() {
      let ids = []
      this.selectedRows.forEach(v => {
        ids.push(v.ID)
      })
      let res = await axios.put(`/ui/contentcore/contentpublish/${ids.join(',')}/pub`)
      if (res.data.status === 1) {
        util.showSuccess(res.data.message)
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    },
    handleSizeChange() {

    },
    handleNodeClick() {

    },
    editRow(row) {
      let id = row.ID ? row.ID : 'new'
      let path = `/contentEditor/${id}?type=${row.contentTypeID}&cid=${row.catalogID}`
      window.open('contentEditor.html#' + path)
    }
  },

  async created() {
    let resp = await axios.get('/ui/contentcore/contenttypes')
    if (resp.data.status === 1) {
      this.contentTypesData = resp.data.data.filter(val => val.value !== 'Mix')
    }

    let res = await axios.get('/ui/editorworkspace/bindtree')
    if (res.data.status === 1) {
      this.catalogTrees = res.data.data
    }
  },
  props: [
    'contentColumn',
    'selectContentTypes',
    'keyWord',
    'catalogID'
  ]
}
</script>
<style>
  .searchbar-wrap {
    margin-top: 15px;
  }

  .timepicker-wrap {
    margin-top: 18px;
  }
  .dialog-wrap{
    overflow:auto;
  }
</style>
