<template>
  <el-card>
    <el-popconfirm
      title="都要删了嘛？"
      @confirm="multipleDelete"
      confirm-button-text="是"
      cancel-button-text="否"
    >
      <template #reference>
        <el-button style="margin-bottom: 20px" type="danger" plain :disabled="isMultiple"
          >批量删除</el-button
        >
      </template>
    </el-popconfirm>

    <el-table
      :data="articleList"
      :border="true"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选 -->
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="cover" label="文章图片" align="center">
        <template #default="scope">
          <el-image
            class="article-cover"
            :src="
              scope.row.cover
                ? scope.row.cover
                : 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png'
            "
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="文章标题" align="center" />
      <el-table-column prop="category" label="分类" align="center">
        <template #default="scope">
          <el-tag type="success">{{ scope.row.category }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="tags" label="标签" align="center">
        <template #default="scope">
          <el-tag v-for="tag in scope.row.tagList" :key="tag._id" style="margin: 0 6px 5px 0">
            {{ tag.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="views" label="浏览量" align="center" width="70" />
      <el-table-column prop="createTime" label="发表时间" align="center" width="115" />
      <el-table-column prop="updateTime" label="更新时间" align="center" width="115" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" @click="updateArticle(scope.row._id)">修改</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm="deleteArticle(scope.row._id)"
            confirm-button-text="是"
            cancel-button-text="否"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-container"
      v-model:current-page="paginition.currentPage"
      v-model:page-size="paginition.pageSize"
      :page-sizes="[5, 10, 20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginition.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  getArticleList as apiGetArticleList,
  deleteArticleById,
  deleteMutipleArticle
} from '@/api/article'
import { ElMessage } from 'element-plus'

const isMultiple = ref(true)
const multipleSelection = ref([])
const router = useRouter()
const articleList = ref([])
const paginition = ref({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

onMounted(() => {
  getArticleList()
})

const getArticleList = async () => {
  const { data } = await apiGetArticleList(paginition.value.currentPage, paginition.value.pageSize)
  articleList.value = data.articleList
  paginition.value.total = data.count
}

const multipleDelete = async () => {
  const idArray = []
  for (const item of multipleSelection.value) {
    idArray.push(item._id)
  }
  const { code, message } = await deleteMutipleArticle(idArray)
  ElMessage({
    type: code === 200 ? 'success' : 'error',
    message
  })
  getArticleList()
}

const handleSelectionChange = (selection) => {
  // 当选择项发生变化时，multipleSelection数组中的值变为selection
  multipleSelection.value = selection
  if (multipleSelection.value.length <= 0) {
    isMultiple.value = true
  } else {
    isMultiple.value = false
  }
}

const updateArticle = (id) => {
  router.push({
    name: '修改文章',
    params: {
      id
    }
  })
}

const deleteArticle = async (id) => {
  const { code, message } = await deleteArticleById(id)
  ElMessage({
    type: code === 200 ? 'success' : 'error',
    message
  })
  getArticleList()
}

const handleSizeChange = (val) => {
  paginition.value.pageSize = val
  getArticleList()
}

const handleCurrentChange = (val) => {
  paginition.value.currentPage = val
  getArticleList()
}
</script>

<style lang="scss" scoped>
.pagination-container {
  margin-top: 25px;
  justify-content: flex-end;
}
</style>
