<!--
 * @Author: your name
 * @Date: 2021-12-07 15:14:51
 * @LastEditTime: 2021-12-31 15:26:11
 * @LastEditors: JinxuChen
 * @Description:  自动报警分类
 * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\index.vue
-->

<template>
  <div class="app-container">
    <el-dialog
      :title="titleTypeAddorModify"
      :visible.sync="dialogVisibleType"
      width="400px"
    >
      <el-form :model="currentAddType" ref="currentAddType">
        <el-form-item label="类型" prop="kindId">
          <el-radio v-model="currentAddType.kindId" label="1">关键字</el-radio>
          <el-radio v-model="currentAddType.kindId" label="2">固定地点</el-radio>
        </el-form-item>
        <el-form-item
          label="类别"
          prop="typeLabel"
          :rules="[{ required: true, message: '类别不能为空' }]"
        >
          <el-input
            :xs="24" :sm="24" :lg="8"
            v-model="currentAddType.typeLabel"
            placeholder="请输入类别"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('currentAddType')"
            >提交</el-button
          >
          <!-- todo重置功能存在bug,暂时去掉 -->
          <!-- <el-button @click="resetForm('currentAddType')">重置</el-button> -->
          <el-button @click="dialogVisibleType = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-circle-plus"
        @click="AddDialog"
        >添加</el-button
      >
      <!-- 搜索 -->
      <el-input
        v-model="searchValue"
        :placeholder="placeholder"
        style="width: 200px; margin-left: 10px"
        class="filter-item"
        @keyup.enter.native="onSearch"
        @clear="onClear"
        clearable
      />
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-search"
        @click="onSearch"
        >搜索</el-button
      >
    </div>
    <!-- 表格 -->
    <!-- <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            @sort-change="sortChange"
        ></el-table>-->
    <TTable
      :tableData="list"
      :columns="columns"
      @update="onUpdate"
      @delete="onDelete"
    ></TTable>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      ref="pages"
      :total="total"
      :page.sync="page"
      :limit.sync="limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import TTable from "../../../../components/TTable/TTable";
import Pagination from "@/components/Pagination";
import CategoryAPI from "@/api/area-category.js";

export default {
  name: "",
  components: { TTable, Pagination },

  data() {
    return {
      titleTypeAddorModify: "新增类别",
      dialogVisibleType: false,
      searchValue: "",
      list: [],
      columns: [
        { prop: "kindIdName", title: "类型", fixed: 'left' },
        { prop: "categoryName", title: "类别" },
        { prop: "createTime", title: "创建时间" },
        {
          action: true,
          title: "操作",
          actions: [
            { fnName: "update", title: "修改", type: "primary", icon: 'el-icon-edit' },
            { fnName: "delete", title: "删除", type: "danger" , icon: 'el-icon-delete'},
          ],
        },
      ],

      total: 1,
      page: 1,
      limit: 10,
      currentAddType: {
        categoryId:"",
        kindId: "1",
        typeLabel: "",
      },
      placeholder: '请输入内容'
    };
  },
  methods: {
    AddDialog() {
      this.dialogVisibleType = true;
      this.titleTypeAddorModify="新增类别";
      this.initForm(); //添加时初始化表单内容
    },
    initForm() {
        this.currentAddType.kindId = '1';
        this.currentAddType.typeLabel = '';
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //alert('submit!');
          if (this.titleTypeAddorModify == "新增类别") {
            this.addType();
          } else {
            this.save();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //新增
    addType() {
      var data = {
        categoryId: "", //分类ID。（不为空：编辑操作；为空：新增操作）
        categoryName: this.currentAddType.typeLabel, //分类名称
        kindId:parseInt(this.currentAddType.kindId),
        status: true,
      };

      CategoryAPI.AddAreaCategory(data).then(() => {
        this.$message({
          message: "新增类别成功",
          type: "success",
        });
        this.onSearch();
        this.dialogVisibleType=false;
      });
    },
    save() {
        var data = {
        categoryId: this.currentAddType.categoryId, //分类ID。（不为空：编辑操作；为空：新增操作）
        categoryName: this.currentAddType.typeLabel, //分类名称
        kindId:parseInt(this.currentAddType.kindId),
        status: true,
      };

      CategoryAPI.AddAreaCategory(data).then(() => {
        this.$message({
          message: "修改类别成功",
          type: "success",
        });
        this.onSearch();
        this.dialogVisibleType=false;
      });
    },
    // 搜索
    onSearch() {
      this.getList();
    },
     // 点击清除按钮时
        onClear() {
            this.$refs["pages"].currentPage = 1;
            this.getList();
        },
    // 获取分页数据
    getList() {
      let reqBody = {
        pageNumber: this.page, //页面
        begNumber: this.limit, //每页条数
        keyword: this.searchValue, //查询关键词条件，（为空：查全部）
      };

      CategoryAPI.AreaCategoryQuery(reqBody).then((res) => {
        console.log("res", res);
        this.list = res.data;
        this.total=res.count;
        this.list.forEach((x) => {
          if (x.kindId === 2) {
            x.kindIdName = "固定地点";
          } else {
            x.kindIdName = "关键字";
          }
        });
      });
    },
    // 修改
    onUpdate(row) {
      console.log("修改", row);
      this.currentAddType.kindId=row.kindId+'';
      this.currentAddType.typeLabel=row.categoryName;
      this.currentAddType.categoryId=row.categoryId;
      this.dialogVisibleType=true;
      this.titleTypeAddorModify="修改类别";
    },
    // 删除
    onDelete(row) {
      console.log("删除", row);
      this.$confirm("是否删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
        }).then(() => {
            let reqBody = {
                id: row.keyId,
                type: "category"
            };
            CategoryAPI.DeleteAreaCategory(reqBody).then(res => {
                if (res.code === 0) {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this.getList();
                }
            })
        })
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped>
</style>
