<!--
 * @Author: liuyx 1517482303@qq.com
 * @Date: 2022-11-15 10:35:54
 * @LastEditors: liuyx 1517482303@qq.com
 * @LastEditTime: 2022-11-21 17:46:38
 * @FilePath: \admin\src\views\tag\Tag.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="tagList" 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="updateTag(scope.row._id)">修改</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm="deleteTag(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="tagFrom" label-width="120px" label-position="left" class="dialog-form">
        <el-form-item label="名称" label-width="auto">
          <el-input v-model="tagFrom.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="tagFrom" label-width="120px" label-position="left" class="dialog-form">
        <el-form-item label="名称" label-width="auto">
          <el-input v-model="tagFrom.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 { ElMessage } from 'element-plus'
import {
  getTagList as apiGetTagList,
  getTagById,
  updateTag as apiUpdateTag,
  deleteTagById
} from '@/api/tag'

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

onMounted(() => {
  getTagList()
})

// 获取标签列表
const getTagList = async () => {
  const { data } = await apiGetTagList()
  tagList.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 updateTag = async (id) => {
  updateDialogVisible.value = true
  tagFrom.value._id = id
  const { data } = await getTagById(id)
  tagFrom.value.name = data.name
}

// 删除标签
const deleteTag = async (id) => {
  const { code, message } = await deleteTagById(id)
  ElMessage({
    type: code === 200 ? 'success' : 'error',
    message
  })
  getTagList()
}

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

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

// 打开“添加标签”的弹窗
const openAddDialog = () => {
  addDialogVisible.value = true
  tagFrom.value.name = '' // 清空
  tagFrom.value._id = ''
}

// 提交新增标签表单
const submitAddForm = async () => {
  if (tagFrom.value.name.trim() === '') {
    ElMessage({
      type: 'error',
      message: '标签名不能为空！'
    })
    return
  }
  addDialogVisible.value = false
  // 提交的表单中，id为-1
  const { code, message } = await apiUpdateTag(tagFrom.value)
  ElMessage({
    type: code === 200 ? 'success' : 'error',
    message
  })
  getTagList()
}

// 提交修改后的标签
const submitUpdateForm = async () => {
  if (tagFrom.value.name.trim() === '') {
    ElMessage({
      type: 'error',
      message: '标签名不能为空！'
    })
    return
  }
  updateDialogVisible.value = false
  const { code, message } = await apiUpdateTag(tagFrom.value)
  ElMessage({
    type: code === 200 ? 'success' : 'error',
    message
  })
  getTagList()
}
</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>
