<template>
  <div class="favorInfoBox">
    <div class="deviceBox">
      <div class="deviceBtnGroup">
        <h4>二级收藏夹管理</h4>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click.native.stop="handleAddFaove()"
          >新增</el-button
        >
      </div>

      <div class="favorTable">
        <el-table
          ref="multipleTable"
          :data="tableDate"
          tooltip-effect="dark"
          stripe
          style="width: 100%"
          height="calc(100% - 40px)"
          v-loading="loading"
        >
          <template slot="empty">
            <el-empty :image-size="160" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="index" label="序号" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="mainname"
            label="一级收藏夹名称"
            show-overflow-tooltip
            min-width="280"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="二级收藏夹名称"
            show-overflow-tooltip
            min-width="280"
            align="center"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.stop="handleResive(scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                type="text"
                class="deleteText"
                @click.native.stop="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增时间表 -->
    <favoraddDialog :title="title" ref="favoraddDialogref"></favoraddDialog>
  </div>
</template>
<script>
import { listFavorApi, deleteFavorApi } from "@/utils/api/index";
import favoraddDialog from "./components/favoraddDialog.vue";

export default {
  components: {
    favoraddDialog,
  },
  data() {
    return {
      title: "", //弹窗标题
      tableDate: [],
      //multipleSelection: [], //获取当前选中
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: true,
    };
  },
  created() {
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
  },
  mounted() {
    this.favorList();
  },

  methods: {
    //获取数据列表
    favorList() {
      this.loading = true;
      listFavorApi()
        .then((res) => {
          this.loading = false;
          this.tableDate = res.data;
        })
        .catch((err) => {});
    },

    // 新建
    handleAddFaove() {
      this.title = "新增";
      this.$refs.favoraddDialogref.display();
      this.$refs.favoraddDialogref.getdataform(null);
    },

    //修改
    handleResive(data) {
      this.title = "修改";
      this.$refs.favoraddDialogref.display();
      this.$refs.favoraddDialogref.getdataform(data);
    },

    //删除数据
    handleDelete(data) {
      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteFavorApi({ id: data.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                duration: 1500,
                showClose: true,
                type: "success",
                message: "删除成功!",
              });
              this.favorList(); //刷新
            }
          });
        })
        .catch(() => {
          this.$message({
            duration: 1500,
            showClose: true,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.favorList();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.favorList();
    },
  },
};
</script>
<style lang="less">
.favorInfoBox {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: @color-white;
  .deviceBox {
    border: 1px solid #dddddd;
    height: calc(100% - 24px);
    padding: 12px;
    border-radius: 4px;
  }
  .deviceBtnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .favorTable {
    height: calc(100% - 44px);
    //background: #fcc;
  }
}
</style>
