<template>
  <div class="right-detail-toolbar">
    <el-toolbar>
      <el-button @click="rankDetailClickHandler" priv="ContentCore.IndexMenu">
        <i class="fa fa-star"></i>排序得分详情
      </el-button>
      <el-button @click="queryDetailClickHandler" priv="ContentCore.IndexMenu">
        <i class="fa fa-search-plus"></i>查询条件分析
      </el-button>
      <el-button @click="contentDetailClickHandler" priv="ContentCore.IndexMenu">
        <i class="fa fa-search"></i>索引内容详情
      </el-button>
      <el-button @click="createIndexClickHandler" priv="ContentCore.IndexMenu">
        <i class="fa fa-bolt fa-fw"></i> {{ catalogId === 0 ? '生成全站索引' : '生成本栏目下的索引'}}
      </el-button>
    </el-toolbar>

    <div class="padding-top-bottom-intab scroll">
      <div class="padding-top-bottom bar contentcore-index-basic">
        <el-row type="flex" class="row-bg" justify="end" v-if="!isComplexSearch" :gutter="10">
          <el-col :span="8">
            <el-input v-model="search.query" @keyup.enter.native="searchClickHandler" placeholder="请输入检索词"></el-input>
          </el-col>
          <el-col class="search-btn-box" :span="5">
            <el-button-group>
              <el-button type="primary" @click="searchClickHandler">
                <i class="fa fa-search"></i>搜索
              </el-button>
              <el-button @click="searchTypeChange">高级搜索 ...</el-button>
            </el-button-group>
          </el-col>
        </el-row>
        <template v-else>
          <el-row type="flex" class="row-bg" justify="space-around" align="middle">
            <el-col :span="6">
              <el-select class="layout-select" v-model="search.type" clearable style="width:100%">
                <el-option v-for="type in types" :key="type.code" :label="type.name" :value="type.code">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input v-model="search.contentID" @keyup.enter.native="searchClickHandler" placeholder="内容ID"></el-input>
            </el-col>
            <el-col :span="10">
              <el-date-picker
                id="index-search-range-date"
                class="layout-date-picker"
                title="选择发布时间"
                v-model="search.rangeDate"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
          </el-row>
          <div style="padding:3px"></div>
          <el-row type="flex" class="row-bg" justify="space-around" align="middle">
            <el-col :span="6">
              <el-input v-model="search.query" @keyup.enter.native="searchClickHandler" placeholder="请输入检索词"></el-input>
            </el-col>
            <el-col :span="6">
              <el-checkbox v-model="search.synonym" style="margin-left:5px"><span class="layout-label">启用同义词检索</span></el-checkbox>
            </el-col>
            <el-col :span="10">
              <el-button-group style="float:left">
                <el-button  type="primary" @click="searchClickHandler">
                  <i class="fa fa-search"></i>高级搜索
                </el-button>
                <el-button @click="searchTypeChange">搜索 ...</el-button>
              </el-button-group>
            </el-col>
          </el-row>
        </template>
      </div>
      <el-table
        :data="contentList"
        :data-read-url="getData"
        :page-size="10"
        tooltip-effect="dark"
        @selection-change="onSelectionChange"
        ref="table">
        <el-table-column type="selection" width="60" align="left"></el-table-column>
        <el-table-column prop="ID" width="120" label="内容ID" align="left"></el-table-column>
        <el-table-column prop="catalogName" width="160" label="所在栏目" show-overflow-tooltip></el-table-column>
        <el-table-column prop="title" label="标题" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-html="scope.row.title"></span>
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="状态" width="120" align="left"></el-table-column>
        <el-table-column label="排序得分" width="140" align="left">
          <template slot-scope="scope">
            <a @click="rankDetailClickHandler(scope.row)">{{scope.row._score}}</a>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 排序得分详情 -->
    <index-score
      :show.sync="rankDetail.isShowModal"
      :query="rankDetail.query">
    </index-score>

    <!-- 查询条件分析 -->
    <index-query
      :show.sync="queryDetail.isShowModal"
      :query="queryDetail.query">
    </index-query>

    <index-field
      :show.sync="fieldDialog.isShowModal"
      :ID="fieldDialog.contentID">
    </index-field>

    <!-- 重建栏目索引 -->
    <index-dialog
      :show.sync="isShowModal"
      :catalog-id="catalogId"
      @callback="createIndexBack">
    </index-dialog>

  </div>
</template>
<script>
import './css/indexes.css'
import util from '@src/common/util.js'
import IndexScoreDialog from './indexScoreDialog.vue'
import IndexQueryDialog from './indexQueryDialog.vue'
import IndexFieldDialog from './indexFieldDialog.vue'
import IndexBasicDialog from './indexBasicDialog.vue'
export default {
  components: {
    'index-score': IndexScoreDialog,
    'index-query': IndexQueryDialog,
    'index-field': IndexFieldDialog,
    'index-dialog': IndexBasicDialog
  },
  props: {
    catalogId: [Number, String],
    tabName: String
  },
  data() {
    return {
      isComplexSearch: false,
      types: [{ code: 'all', name: '全部' }, { code: 'title', name: '标题' }], //   查询内容选项
      search: {
        type: '',
        contentID: '',
        rangeDate: [],
        endDate: '',
        query: '',
        synonym: false
      },
      contentList: [], //  检索列表
      selectedRows: [], //  选中的文章
      contentID: 0, //  当前选中的第一条文章ID
      rankDetail: { isShowModal: false, query: {} }, //  排序得分详情模态框
      queryDetail: { isShowModal: false, query: {} }, //  查询条件分析模态框
      fieldDialog: { isShowModal: false, contentID: 0 }, //   索引内容详情模态框
      confirmLoading: false,
      isShowModal: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    tabName(val) {
      if (val === 'basic') {
        this.resetCondition()
        this.loadIndexesContent()
      }
    }
  },
  methods: {
    async createIndexBack(taskID) {
      await util.showProgress(taskID, '正在重建栏目索引')
      this.loadIndexesContent()
    },
    // 搜索事件
    searchClickHandler() {
      this.loadIndexesContent()
    },
    // 高级检索切换
    searchTypeChange() {
      this.search.type = ''
      this.search.contentID = ''
      this.search.rangeDate = ''
      this.search.synonym = false
      this.search.query = ''
      this.isComplexSearch = !this.isComplexSearch
    },
    // 列表选中事件
    onSelectionChange(selection) {
      this.selectedRows = selection
      this.contentID = this.selectedRows.length ? this.selectedRows[0].ID : 0
    },
    getData() {
      let startDate = ''

      let endDate = ''
      if (this.search.rangeDate) {
        if (this.search.rangeDate[0]) {
          startDate = new Date(this.search.rangeDate[0])
        }
        if (this.search.rangeDate[1]) {
          endDate = new Date(this.search.rangeDate[1])
        }
      }
      let opts = {
        catalogID: this.catalogId,
        type: this.search.type,
        contentID: this.search.contentID,
        startDate: startDate,
        endDate: endDate,
        query: encodeURIComponent(this.search.query),
        synonym: this.search.synonym
      }
      return ['/ui/indexlist', { params: opts }]
    },
    // 加载索引文章
    loadIndexesContent() {
      this.$refs.table.getData()
    },
    // 排序得分详情
    rankDetailClickHandler(row) {
      let ID = row.ID
      if (!ID) {
        if (!this.selectedRows.length) {
          this.$alert('请至少选择一行数据', '系统提示', {
            type: 'warning'
          })
          return
        }
        ID = this.contentID
      }
      this.rankDetail.query = {
        ID: ID,
        catalogID: this.catalogId,
        type: this.search.type,
        query: this.search.query,
        synonym: this.search.synonym
      }
      this.rankDetail.isShowModal = true
    },
    // 查询条件分析
    queryDetailClickHandler() {
      this.queryDetail.query = {
        catalogID: this.catalogId,
        type: this.search.type,
        contentID: this.search.contentID,
        query: this.search.query,
        synonym: this.search.synonym
      }
      this.queryDetail.isShowModal = true
    },
    // 索引内容详情
    contentDetailClickHandler() {
      if (!this.selectedRows.length) {
        this.$alert('请至少选择一行数据', '系统提示', {
          type: 'warning'
        })
        return
      }
      this.fieldDialog.isShowModal = true
      this.fieldDialog.contentID = this.contentID
    },
    createIndexClickHandler () {
      if (this.catalogId === 0) {
        this.createSiteIndex()
      } else {
        this.isShowModal = true
      }
    },
    //  生成全站索引
    async createSiteIndex() {
      try {
        await this.$confirm('将重建全站索引，是否重建全站索引？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let res = await axios.get('/ui/indexlist/createindex')
        if (res.data.status === 1) {
          await util.showProgress(res.data.data.taskID, '正在重建索引')
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
    },
    resetCondition() {
      this.search = {
        type: '',
        contentID: '',
        rangeDate: [],
        query: '',
        synonym: false
      }
      this.contentList = []
      this.selectedRows = []
      this.contentID = 0
    }
  }
}
</script>
<style scoped>
.contentcore-index-basic .el-date-editor--datetimerange.el-input__inner {
  width: 100%;
}
</style>
