<template>
  <div class="app-container">
    <div class="head-container">
      <el-input
        v-model="name"
        clearable
        placeholder="请输入标签词"
        style="width: 200px;"
        class="filter-item"
      />
      <el-button class="filter-item" size="mini" @click="getLists(1)"
        >搜索</el-button
      >
      <el-button class="filter-item" type="success" size="mini" @click="creat()"
        >添加</el-button
      >
    </div>

    <el-table
      v-loading="loading"
      :data="data"
      size="small"
      style="width: 100%;"
    >
      <el-table-column label="序号" align="center" type="index" fixed />
      <el-table-column prop="name" align="center" label="标签">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="creat(scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            title="确定删除该标签吗？"
            icon="el-icon-info"
            icon-color="red"
            placement="top"
            @confirm="deleteTag(scope.row)"
          >
            <el-button slot="reference" type="danger" size="mini"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: inline-block">
      <el-dialog
        :visible.sync="dialog"
        :close-on-click-modal="false"
        :title="title"
        append-to-body
        width="700px"
      >
        <el-form>
          <el-form-item>
            <el-input
              v-model="tag.name"
              clearable
              placeholder="请输入标签名称"
              style="width: 100%;"
              :maxlength="20"
              show-word-limit
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="mini"
            :loading="editLoading"
            type="primary"
            @click="editTag(tag)"
            >提交</el-button
          >
          <el-button size="mini" @click="dialog = false">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 50px;"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { queryTagList, tagSave, tagUpdate, updateStatus } from "@/api/tag.js";

export default {
  name: "标签管理",
  data() {
    return {
      dialog: false,
      loading: false,
      delLoading: false,
      editLoading: false,
      newTag: "",
      total: 0,
      page: 1,
      size: 10,
      data: [],
      name: "",
      title: "",
      tag: {
        id: "",
        name: ""
      }
    };
  },

  mounted() {
    this.getLists(1);
  },

  methods: {
    creat(val) {
      if (val) {
        this.tag.id = val.id;
        this.tag.name = val.name;
        this.title = "修改标签";
        this.dialog = true;
      } else {
        this.tag.id = null;
        this.tag.name = "";
        this.title = "添加标签";
        this.dialog = true;
      }
    },
    update() {},
    async getLists(val) {
      if (val === 1) {
        this.page = 1;
      }
      this.loading = true;
      const { data } = await queryTagList({
        current: this.page,
        size: this.size,
        status: 1,
        type: 3,
        name: this.name
      });
      this.data = data.list;
      this.total = data.total;
      this.loading = false;
    },
    // 添加标签
    async addTag(newTag) {
      if (newTag.trim().length === 0) {
        this.$message({
          message: "标签名称不能为空",
          type: "error"
        });
        return false;
      }
      if (newTag.trim().length > 20) {
        this.$message({
          message: "标签名称长度不能超过20个字符",
          type: "error"
        });
        return false;
      }
      const data = await tagSave({
        name: newTag,
        type: 3
      });
      if (data.code === 0) {
        this.$message.success("添加成功");
        this.newTag = "";
        this.getLists();
      } else {
        this.$message.error(data.message);
      }
    },
    // 修改标签名
    async editTag(tag) {
      if (this.title === "添加标签") {
        if (this.tag.name.trim().length === 0) {
          this.$message({
            message: "标签名称不能为空",
            type: "error"
          });
          return false;
        }
        if (this.tag.name.trim().length > 20) {
          this.$message({
            message: "标签名称长度不能超过20个字符",
            type: "error"
          });
          return false;
        }
        const data = await tagSave({
          name: this.tag.name,
          type: 3
        });
        if (data.code === 0) {
          this.$message.success("添加成功");
          this.tag.name = "";
          this.dialog = false;
          this.getLists();
        } else {
          this.$message.error(data.message);
        }
      } else {
        if (tag.name.trim().length === 0) {
          this.$message({
            message: "标签名称不能为空",
            type: "error"
          });
          return false;
        }
        if (tag.name.trim().length > 20) {
          this.$message({
            message: "标签名称长度不能超过20个字符",
            type: "error"
          });
          return false;
        }
        const data = await tagUpdate(tag);
        if (data.code === 0) {
          this.$message.success("修改成功");
          this.getLists();
          this.dialog = false;
        } else {
          this.$message.error(data.message);
        }
      }
    },
    // 删除标签
    async deleteTag(row) {
      const params = {
        id: row.id,
        status: 2
      };
      const data = await updateStatus(params);
      // console.log(data)
      if (data.code === 0) {
        this.$message.success("删除成功");
        if (this.data.length === 1 && this.page !== 1) {
          this.page -= 1;
        }
        this.getLists();
        this.dialog = false;
      } else {
        this.$message.error(data.message);
      }
    },
    // 分页器
    sizeChange(e) {
      this.page = 1;
      this.size = e;
      this.getLists();
    },
    pageChange(e) {
      this.page = e;
      this.getLists();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-pagination {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
