<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" label-width="90px" class="demo-form-inline"
        @keyup.enter="handleSubmitSearch">
        <el-form-item label="抓取日期" prop="publishDate" style="width:300px">
          <template #label>
            <span>
              <el-tooltip content="搜索范围是开始日期（包含）至结束日期（包含）" placement="top-start">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
              抓取日期
            </span>
          </template>
          <el-date-picker v-model="searchInfo.dateRange" type="daterange" value-format="YYYY-MM-DD" :clearable="false"
            :editable="false" />
        </el-form-item>
        <!-- <el-form-item prop="state" style="width:200px">
          <el-select v-model="searchInfo.state" placeholder="请选择状态" clearable style="width:300px">
            <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="关键词" style="width:300px">
          <template #label>
            <span>
              <el-tooltip content="从标题中搜索" placement="top-start">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
              关键词
            </span>
          </template>
          <el-input v-model="searchInfo.keyword" class="keyword" placeholder="请输入" clearable style="width:100%" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleSubmitSearch">查询</el-button>
          <el-button icon="refresh" @click="handleResetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
      <el-table ref="multipleTable" :data="tableData" row-key="ID">
        <el-table-column align="left" label="ID" min-width="60" prop="ID" />
        <el-table-column align="left" label="标题" min-width="300" prop="title">
          <template #default="scope">
            <el-text tag="b">{{ scope.row.title }}</el-text>
            <el-link v-if="scope.row.sourceUrl != ''" type="primary" :href="scope.row.sourceUrl" target="_blank">
              <el-icon>
                <Link />
              </el-icon>
              查看原文
            </el-link>
          </template>
        </el-table-column>
        <el-table-column align="left" label="来源" min-width="240" prop="source" />
        <el-table-column align="left" label="作者" min-width="100" prop="author" />
        <el-table-column align="left" label="采集时间" min-width="120" prop="createtime">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="状态" min-width="80" prop="state">
          <template #default="scope">
            {{ formatStatus(scope.row.state) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="发布时间" min-width="120" prop="createtime">
          <template #default="scope">
            {{ formatDate(scope.row.publicTime) }}
          </template>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="80">
          <template #default="scope">
            <div>
              <el-button :type="scope.row.state === 1 ? 'info' : 'primary'" link icon="plus"
                :disabled="scope.row.state === 1" @click="handleRowEdit(scope.row.ID)">导入</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" />
      </div>
    </div>

    <ArticleEdit ref="articleEditRef" title="导入文章" @on-save="handlerSaveArticle" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { formatDate } from '@/utils/format'
import { formatTimeToStr } from '@/utils/date'
import { getFetcherArticleList } from '@/api/fetcher'
import ArticleEdit from '@/view/content/components/articleEdit.vue'

const showDrawer = ref(false)
const articleEditRef = ref(null)

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const searchInfo = ref({})
const tableData = ref([])
const elSearchFormRef = ref()
const statusOptions = ref([
  { key: 0, label: '未导入' },
  { key: 1, label: '已导入' },
])

const formatStatus = (value) => {
  const rowLabel = statusOptions.value.filter(item => item.key === value)
  return rowLabel && rowLabel[0] && rowLabel[0].label
}

const initSearchInfo = () => {
  const endDate = new Date()
  const startDate = new Date(endDate.getTime() - 7 * 24 * 60 * 60 * 1000)
  searchInfo.value = {
    dateRange: [
      formatTimeToStr(startDate, 'yyyy-MM-dd'),
      formatTimeToStr(endDate, 'yyyy-MM-dd'),
    ],
    state: 0,
  }
}

initSearchInfo()

// 重置
const handleResetSearch = () => {
  initSearchInfo()
  getTableData()
}

// 搜索
const handleSubmitSearch = () => {
  elSearchFormRef.value?.validate(async (valid) => {
    if (!valid) return
    getTableData()
  })
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

// 修改页面容量
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 修改
const handleRowEdit = (ID) => {
  // const query = { fetcherId: ID }
  // router.push({ name: 'articleEdit', query })
  showDrawer.value = true
  articleEditRef.value.openPage({ fetcherId: ID })
}

// ----- 查询 -----
const getTableData = async () => {
  const res = await getFetcherArticleList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (res.code === 0) {
    tableData.value = res.data.list
    total.value = res.data.total
  }
}
getTableData()

// 保存文章后
const handlerSaveArticle = () => {
  getTableData()
}

</script>

<style type="scss">
.admin-box .el-table td .cell {
  line-height: 28px;
}

.text-truncate .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
</style>
