<template>
    <div class="template_content">
        <!-- 搜索 -->
        <div class="search_box">
            <a-form layout="inline">
                <a-form-item label="标签名：">
                    <a-input
                        v-model="searchPage.name"
                        placeholder="请输入标签名"
                        allowClear
                    ></a-input>
                </a-form-item>
                <a-form-item>
                    <a-button
                        icon="search"
                        type="primary"
                        @click="handleSubmit"
                    >查询</a-button>
                </a-form-item>
            </a-form>
        </div>
        <!-- 主体内容 -->
        <div class="content_box">
            <!-- 表格操作 -->
            <div class="table_top">
                <a-button
                    icon="plus"
                    type="primary"
                    class="btn_right_margin"
                    @click="showModal('')"
                >添加</a-button>
            </div>
            <a-table
                tableLayout="fixed"
                :columns="columns"
                :dataSource="data"
                :loading="loading"
                :pagination="pagination"
                bordered
                size="small"
                @change="handleTableChange"
                rowKey="id"
            >

                <!-- 操作 -->
                <template
                    slot="action"
                    slot-scope="text, record"
                >
                    <a-button
                        icon="edit"
                        type="link"
                        @click="showModal(record)"
                    >修改</a-button>
                    <a-button
                        icon="delete"
                        type="link"
                        @click="deleteRow(record)"
                    >删除</a-button>
                </template>
            </a-table>
        </div>

        <!-- 弹窗 -->
        <template>
            <a-modal
                :visible="modalVisible"
                :title="modalTitle"
                @ok="onSave"
                @cancel="onCancel"
            >
                <a-form-model
                    :model="formModel"
                    :label-col="{span:4}"
                    :wrapper-col="{span: 8}"
                    :rules="formRules"
                    ref="formModelRef"
                >
                    <a-form-model-item
                        label="标签名称"
                        ref="nameVal"
                        prop="name"
                    >
                        <a-input
                            v-model="formModel.name"
                            @blur="blurValidate('nameVal')"
                        ></a-input>
                    </a-form-model-item>
                </a-form-model>

            </a-modal>
        </template>
    </div>
</template>

<script>
import { fetchList, addObj, putObj, delObj } from "@/api/biz/courseTag";
import { disposereq } from "@/utils/util";

let columns = [
  {
    title: "标签名",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: 180,
  },
];

export default {
  data() {
    return {
      loading: false,
      searchPage: {
        pageIndex: 1,
        pageSize: 10,
        name: "",
      },
      columns: columns,
      data: [],
      pagination: {
        showQuickJumper: true,
        showSizeChanger: true,
      },
      modalVisible: false,
      modalTitle: "添加",
      modalType: "",
      rowData: "",
      formModel: {
        name: "",
      },
      formRules: {
        name: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList(this.searchPage);
  },
  beforeUpdate() {},
  methods: {
    getList(query) {
      this.loading = true;
      fetchList(query)
        .then((res) => {
          if (res.code == 200) {
            this.loading = false;
            this.data = res.data;
            const pager = { ...this.pagination };
            pager.current = query.pageIndex;
            pager.total = res.count;
            this.pagination = pager;
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          disposereq(this, err);
        });
    },
    blurValidate(prop) {
      this.$refs[prop].onFieldBlur();
    },
    // 表格数据变化触发事件
    handleTableChange(pagination, filters, sorter) {
      const searchPage = { ...this.searchPage };
      searchPage.pageIndex = pagination.current;
      searchPage.pageSize = pagination.pageSize;
      this.loading = true;
      this.getList(searchPage);
    },
    // 搜索事件
    handleSubmit() {
      const searchPage = { ...this.searchPage };
      this.getList(searchPage);
    },
    // 显示对话框
    showModal(row) {
      this.modalVisible = true;
      // 判断添加或者编辑
      if (row == "") {
        this.modalTitle = "添加";
        this.modalType = "add";
        this.formModel.name = "";
        this.rowData = "";
      } else {
        this.modalTitle = "编辑";
        this.modalType = "edit";
        this.formModel.name = row.name;
        this.rowData = row;
      }
    },
    // 删除行数据
    deleteRow(row) {
      delObj([row.id])
        .then((res) => {
          this.loading = false;
          if (res.resp_code == 200) {
            this.$message.success("删除成功");
            const searchPage = { ...this.searchPage };
            this.loading = true;
            this.getList(searchPage);
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch((err) => {
          disposereq(this, err);
        });
    },
    //对话框确定
    onSave() {
      this.$refs.formModelRef.validate((valid) => {
        if (valid) {
          if (this.modalType == "add") {
            let data = {};
            data.name = this.formModel.name;
            addObj(data)
              .then((res) => {
                if (res.resp_code == 200) {
                  this.modalVisible = false;
                  this.$message.success("保存成功");
                  const searchPage = { ...this.searchPage };
                  this.loading = true;
                  this.getList(searchPage);
                } else {
                  this.$message.info(res.resp_msg);
                }
              })
              .catch((err) => {
                disposereq(this, err);
              });
          } else if (this.modalType == "edit") {
            let data = {};
            data.id = this.rowData.id;
            data.name = this.formModel.name;
            putObj(data)
              .then((res) => {
                if (res.resp_code == 200) {
                  this.modalVisible = false;
                  this.$message.success("保存成功");
                  const searchPage = { ...this.searchPage };
                  this.loading = true;
                  this.getList(searchPage);
                } else {
                  this.$message.info(res.resp_msg);
                }
              })
              .catch((err) => {
                disposereq(this, err);
              });
          }
        }
      });
    },
    //对话框取消
    onCancel() {
      this.modalVisible = false;
      this.$refs.formModelRef.resetFields();
    },
  },
};
</script>
<style>
.template_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background-color: #fff;
}
.content_box {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 14px;
}
.table_top {
  padding-bottom: 14px;
}
.btn_margin {
  margin: 0px 5px;
}
.btn_right_margin {
  margin-right: 10px;
}
</style>