<!--
 * @Author: liuyx 1517482303@qq.com
 * @Date: 2022-11-15 10:36:14
 * @LastEditors: liuyx 1517482303@qq.com
 * @LastEditTime: 2022-11-19 20:01:27
 * @FilePath: \admin\src\views\category\Category.vue
 * @Description: 分类管理
 *
 * Copyright (c) 2022 by liuyx 1517482303@qq.com, All Rights Reserved.
-->
<template>
  <el-card>
    <div class="operation-container">
      <el-button type="primary" @click="openAddDialog"
        ><el-icon><Plus /></el-icon>新增</el-button
      >
      <el-button type="danger" plain :disabled="isMultiple" @click="multipleDelete"
        >批量删除</el-button
      >
    </div>
    <el-table
      :data="categoryList"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <!-- 多选 -->
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="name" label="分类名称" align="center" />
      <el-table-column prop="articleNum" label="文章量" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" @click="openUpdateDialog(scope.row._id)">修改</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm="deleteCategoryById(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="[10, 20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginition.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- “新增分类”对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增分类" width="30%">
      <el-form :model="categoryFrom" label-width="120px" label-position="left" class="dialog-form">
        <el-form-item label="名称" label-width="auto">
          <el-input v-model="categoryFrom.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAddForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- “修改分类”对话框 -->
    <el-dialog v-model="updateDialogVisible" title="修改分类" width="30%">
      <el-form :model="categoryFrom" label-width="120px" label-position="left" class="dialog-form">
        <el-form-item label="名称" label-width="auto">
          <el-input v-model="categoryFrom.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUpdateForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  getCategoryList as apiGetCategoryList,
  getCategoryById,
  deleteCategoryById as apiDelCategoryById,
  updateCategory as apiUpdateCategory
} from '@/api/category'
import { ElMessage } from 'element-plus'

const isMultiple = ref(true)
const multipleSelection = ref([])
const categoryList = ref([])
const categoryFrom = ref({
  _id: '',
  name: ''
})
const paginition = ref({
  currentPage: 1,
  pageSize: 10,
  total: 40
})
const addDialogVisible = ref(false)
const updateDialogVisible = ref(false)

onMounted(async () => {
  getCategoryList()
})

const getCategoryList = async () => {
  const { data } = await apiGetCategoryList()
  categoryList.value = data
}

// 批量删除
const multipleDelete = () => {
  console.log(multipleSelection.value)
}

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

// 显示新增分类弹窗
const openAddDialog = () => {
  addDialogVisible.value = true
  categoryFrom.value.name = ''
}

// 显示修改分类弹窗
const openUpdateDialog = async (id) => {
  updateDialogVisible.value = true
  categoryFrom.value._id = id
  const { data } = await getCategoryById(id)
  categoryFrom.value.name = data.name
}

// 根据id删除分类
const deleteCategoryById = async (id) => {
  // console.log(id)
  const { code, message } = await apiDelCategoryById(id)
  if (code === 200) {
    ElMessage({
      type: 'success',
      message
    })
  }
  getCategoryList()
}

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

// 提交新增表单
const submitAddForm = async () => {
  if (categoryFrom.value.name.trim() === '') {
    ElMessage({
      type: 'error',
      message: '分类名不能为空！'
    })
    return
  }
  addDialogVisible.value = false
  const { code, message } = await apiUpdateCategory(categoryFrom.value)
  ElMessage({
    type: code === 200 ? 'success' : 'error',
    message
  })
  getCategoryList()
}

// 提交修改后的标签
const submitUpdateForm = async () => {
  if (categoryFrom.value.name.trim() === '') {
    ElMessage({
      type: 'error',
      message: '标签名不能为空！'
    })
    return
  }
  updateDialogVisible.value = false
  const { code, message } = await apiUpdateCategory(categoryFrom.value)
  ElMessage({
    type: code === 200 ? 'success' : 'error',
    message
  })
  getCategoryList()
}
</script>

<style lang="scss" scoped>
.operation-container {
  margin: 10px 0 20px 0;
}
.pagination-container {
  margin-top: 25px;
  justify-content: flex-end;
}
.dialog-form {
  padding: 10px;
  .el-input {
    width: 350px;
    margin-left: 15px;
  }
}
</style>
