<template>
  <div class="app-container">
    <!-- 顶部搜索区域 -->
    <el-form :model="queryData" :inline="true">
      <el-form-item>
        <el-input
            v-model="queryData.title"
            placeholder="请输入论文题目"
            class="m-2"
            style="width: 300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button
            type="primary"
            icon="search"
            size="default"
            @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="refresh" size="default" @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
      <!-- <el-form-item style="float: right"> </el-form-item> -->
    </el-form>
    <el-row class="mb8">
      <el-button type="primary" @click="btnAdd">新增论文</el-button>
      <el-button :disabled="!ids.length" type="danger" @click="delList()"
      >批量删除
      </el-button
      >
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="title" label="论文题目" align="center"/>
      <el-table-column prop="ext" label="期刊名称" align="center"/>
      <el-table-column prop="author" label="作者" align="center"/>
      <el-table-column label="关键词" align="center">
        <template #default="{ row }">
          {{ row.keyword }}
        </template>
      </el-table-column>
      <el-table-column prop="publishTime" label="出版日期" align="center"/>
      <el-table-column prop="" label="操作" align="center">
        <template #default="{ row }">
          <el-button size="small" type="text" @click="editBtn(row.id)"
          >编辑
          </el-button
          >
          <el-button size="small" type="text" @click="delList(row.id)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryData.pageNum"
        v-model:limit="queryData.page_size"
        @pagination="getList"
    />

    <!-- 弹出框 -->
    <el-dialog
        :title="formData.id ? '编辑论文' : '新增论文'"
        v-model="isShow"
        @close="close"
    >
      <el-form :model="formData" label-width="100px">
        <el-form-item label="论文题目">
          <el-input
              v-model="formData.title"
              placeholder="请输入论文题目"
          ></el-input>
        </el-form-item>
        <el-form-item label="期刊名称">
          <el-input
              v-model="formData.ext"
              placeholder="请输入期刊名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input
              v-model="formData.author"
              placeholder="请输入作者"
          ></el-input>
        </el-form-item>
        <el-form-item label="出版日期">
          <el-input
              v-model="formData.publishTime"
              placeholder="请输入出版日期"
          ></el-input>
        </el-form-item>
        <!-- :labelWidth="labelWidth" -->
        <InputBoxAdd
            :labelWidth="100"
            v-model="formData"
            title="标签"
            fieldKey="keywords"
        />
        <!-- <el-form-item label="标签">
          <template #default="{ row }">
            <el-input
              style="width: 88%; margin-right: 5px"
              v-model="formData.tags"
              placeholder="多个标签（请用','分割）"
            ></el-input
            ><el-button type="primary" style="float: right" @click="addTag"
              >确认</el-button
            >
            <el-row>
              <el-tag
                type=""
                closable
                v-for="val in tags"
                @close="handleClose(val)"
                >{{ val }}</el-tag
              >
            </el-row>
          </template>
        </el-form-item> -->
        <el-form-item label="摘要">
          <el-input
              v-model="formData.remark"
              :rows="4"
              type="textarea"
              placeholder="请输入摘要"
          />
        </el-form-item>
        <el-form-item label="上传论文:" prop="fileUrl">
          <FileUpload
              v-model="formData.fileUrl"
              :limit="1"
              :fileType="['docx', 'doc', 'pdf']"
          ></FileUpload>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="" @click="close">取消</el-button>
        <el-button type="primary" v-if="formData.id" @click="btnPut"
        >修改
        </el-button
        >
        <el-button type="primary" v-else @click="btnReady">保存</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  expertList,
  delItem,
  addItem,
  editItem,
  rebtnItem,
} from "@/api/thesis/index";
import InputBoxAdd from "@/views/components/InputBoxAdd";
import {ElMessageBox, ElMessage} from "element-plus";
import {reactive, ref, toRefs} from "vue";

const data = reactive({
  queryData: {
    pageNum: 1,
    pageSize: 10,
  },
});
const form = reactive({
  formData: {
    title: "",
    ext: "",
    author: "",
    publishTime: "",
    tags: "",
    remark: "",
  },
});
const {formData} = toRefs(form);
const dataList = ref([]);
const total = ref(0);
const isShow = ref(false);
const ids = ref([]);
const {queryData} = toRefs(data);
// const tags = ref([]);
// 获取论文列表
const getList = async () => {
  const res = await expertList(queryData.value);
  dataList.value = res.rows;
  total.value = res.total;
};

const handleSelectionChange = (selection) => {
  ids.value = selection.map((el) => el.id);
};
// 搜索查询
const handleQuery = () => {
  getList(queryData.value);
};
// 重置按钮
const resetQuery = () => {
  queryData.value = {
    pageNum: 1,
    pageSize: 10,
    title: "",
  };
  getList();
};
// 删除按钮
const delList = async (id) => {
  const delIds = id || ids.value.join(",");
  ElMessageBox.confirm(`是否确认删除编号为${delIds}的数据项？`)
      .then(async () => {
        await delItem(delIds);
        getList();
        ElMessage.success("删除成功");
      })
      .catch(() => {
      });
  getList();
};
// 新增功能
const btnAdd = () => {
  formData.value.keywords = [];
  isShow.value = true;
};
// 确认添加标签
// const addTag = () => {
//   if (!formData.value.tags) return;
//   tags.value.push(formData.value.tags);
//   formData.value.tags = "";
// };
// 删除标签
// const handleClose = (val) => {
//   tags.value.splice(tags.value.indexOf(val), 1);
// };
// 添加/编辑
const btnReady = async () => {
  formData.value.keyword = formData.value.keywords.join(",");
  await addItem(formData.value);
  ElMessage.success("添加成功");
  getList();
  isShow.value = false;
};
// 修改
const btnPut = async () => {
  formData.value.keyword = formData.value.keywords.join(",");
  await rebtnItem(formData.value);
  ElMessage.success("修改成功");
  getList();
  isShow.value = false;
};
// 编辑按钮
const editBtn = async (id) => {
  const resp = await editItem(id);
  formData.value = resp.data;
  formData.value.keywords = formData.value.keyword
      ? formData.value.keyword.split(",")
      : [];
  // tags.value = formData.value.tags && formData.value.tags.split(",");
  // formData.value.tags = "";
  isShow.value = true;
};
// 弹框关闭时间
const close = () => {
  formData.value = {};
  isShow.value = false;
};
getList();
</script>
