<template>
  <div class="app-container">
    <div class="head-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="query.blurry" size="small" clearable placeholder="请输入名称或描述" style="width: 100%;"
            class="filter-item" @keyup.enter.native="getTableData" />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="head-container">
      <el-button type="primary" icon="el-icon-plus" @click="$refs.addRef.show()">
        添加字典
      </el-button>
      <add ref="addRef" @success="getTableData" />
    </div>
    <div class="head-container">
      <el-table :data="tableData.list" v-loading="tableData.loading" row-key="id"
        :tree-props="{ children: 'dictDetails' }">
        <!-- <el-table-column type="index" width="50"></el-table-column> -->
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="描述" prop="value"></el-table-column>
        <el-table-column label="标签" prop="dictName"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template v-slot="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
              @change="changeHot($event, scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template v-slot="scope">
            <el-button type="text" size="mini" round icon="el-icon-plus"
              @click="$refs.addRef.show({ pid: scope.row.id })" v-if="!scope.row.releId">添加下级字典</el-button>
            <el-button type="text" size="mini" round icon="el-icon-edit"
              @click="$refs.addRef.show(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
              <el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
        @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
  </div>
</template>

<script>
import add from "./components/add";
import { dict, dictPut } from "@/api/setting";
export default {
  components: {
    add
  },
  data() {
    return {
      query: { blurry: "" },
      tableData: {
        page: 0,
        size: 10,
        total: 0,
        loading: false,
        list: []
      }
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 切换状态
    async changeHot(e, row) {
      try {
        this.tableData.loading = true
        await dictPut({ ...row })
        this.getTableData()
      } catch (error) {
        console.log(error);
      }
    },
    // 查询table
    toQuery() {
      this.getTableData();
    }, // 重置查询
    resetHandle() {
      this.tableData.page = 0;
      this.query.blurry = "";
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    // 删除
    async delHandle(ids) {
      try {
        await dict(ids, "delete");
        this.$notify({
          title: "成功",
          message: `删除成功`,
          type: "success"
        });
        this.getTableData();
      } catch (error) {
        console.log(error);
      }
    },
    // 获取商品列表
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await dict(
          {
            page: this.tableData.page,
            size: this.tableData.size,
            blurry: this.query.blurry
          }
        );
        this.tableData.loading = false;
        this.tableData.list = res.content;
        this.tableData.total = res.totalElements;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
