<template>
  <div class="app-container">
    <div class="left_menu">
      <div class="search_wrap">
        <el-input placeholder="名称/代码" v-model="query.name" @change="searchCateory">
          <template #append>
            <el-button icon="el-icon-search" @click="searchCateory"></el-button>
          </template>
        </el-input>
      </div>
      <div class="tree_wrap">
        <!-- <el-tree :data="treeData" node-key="id" highlight-current :props="{ label: 'name' }" default-expand-all
                  @node-click="treeItemClick"></el-tree> -->
        <div class="item" :class="{ active: selectCatoryIndex == index }" v-for="(item, index) in treeData"
          :key="item.id" @click="treeItemClick(item, index)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="table_wrap">
      <div class="header_wrap">
        <el-button type="primary" @click="addHandle">新建</el-button>
      </div>
      <div class="table" id="table_drag">
        <el-table ref="table" :data="tableData.list" border height="100%" v-loading="tableData.loading" row-key="id">
          <el-table-column label="序号" type="index" width="80"></el-table-column>
          <el-table-column label="ID" prop="id" width="80"></el-table-column>
          <el-table-column label="菜品名称" prop="productNames"></el-table-column>
          <el-table-column label="类型" prop="padLayoutName"></el-table-column>
          <el-table-column label="所属小类" prop="productCategoryName"></el-table-column>
          <el-table-column label="自定义分类" prop="customName"></el-table-column>
          <el-table-column label="操作" width="200">
            <template v-slot="scope">
              <el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="delTableHandle(scope.row.id)">
                <template #reference>
                  <el-button type="text">删除</el-button>
                </template>
              </el-popconfirm>
              <el-button type="text" @click="editorHandle(scope.row, 2)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="head-container">
        <el-pagination @size-change="paginationSizeChange" :total="tableData.total" :current-page="tableData.page"
          :page-size="tableData.size" @current-change="paginationChange"
          layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </div>
    <AddPadPage ref="AddPadPage" :category="selectCatory.id" @success="addSuccess" />
  </div>
</template>

<script>
import Sortable from "sortablejs";
import AddPadPage from "./components/addPadPage.vue";
import paoductCategoryApi from "@/api/product/productclassification";
import padProdApi from "@/api/account/padProd";
import { swapArrayEle } from "@/utils/tools.js";
import { ElMessage, ElNotification } from "element-plus";
export default {
  components: {
    AddPadPage,
  },
  data() {
    return {
      query: {
        name: "",
      },
      selectCatoryIndex: 0,
      selectCatory: "",
      treeDataOrgin: [],
      treeData: [],
      tableData: {
        loading: false,
        page: 1,
        size: 10,
        total: 0,
        list: [],
      },
    };
  },
  mounted() {
    this.tbShopCategoryGet();
  },
  methods: {
    // 搜索分类
    searchCateory() {
      this.treeData = this.treeDataOrgin.filter((item) => {
        return item.name.includes(this.query.name);
      });

      if (this.treeData.length) {
        this.selectCatoryIndex = 0;
        this.selectCatory = this.treeData[this.selectCatoryIndex];
        this.getTableData();
      }
    },
    //表格拖拽
    tableDrag() {
      const el = document.querySelector("#table_drag .el-table__body-wrapper tbody");
      new Sortable(el, {
        animation: 150,
        onEnd: async (e) => {
          // console.log('拖拽结束===', e);
          if (e.oldIndex == e.newIndex) return;

          let arr = swapArrayEle(this.tableData.list, e.oldIndex, e.newIndex);
          console.log(arr);
          let data = arr.map((item, index) => {
            return {
              id: item.id,
              sort: index,
            };
          });

          try {
            await productCategorySort(data);
            this.getTableData();
          } catch (error) {
            console.log(error);
          }
        },
      });
    },
    // 删除
    async delTableHandle(id) {
      try {
        await padProdApi.delete({ id });
        ElMessage.success("已删除");
        this.getTableData();
      } catch (error) {
        console.log(error);
      }
    },
    // 编辑 预览
    editorHandle(row, type) {
      this.$refs.AddPadPage.show(row.id, type);
    },
    // 新建成功
    addSuccess() {
      this.tableData.page = 1;
      this.getTableData();
    },
    // 新建
    addHandle() {
      if (this.selectCatory.id) {
        this.$refs.AddPadPage.show();
      } else {
        ElNotification.error({
          title: "错误",
          message: "请选择分类",
        });
      }
    },
    // 分类被点击
    treeItemClick(data, index) {
      this.selectCatoryIndex = index;
      this.selectCatory = data;
      this.tableData.page = 1;
      this.getTableData();
    },
    // 获取商品分类
    async tbShopCategoryGet() {
      this.tableData.loading = true;
      try {
        const res = await paoductCategoryApi.getList({
          page: 1,
          size: 100,
        });
        this.treeDataOrgin = res;
        this.treeData = res;
        this.selectCatory = res[this.selectCatoryIndex];
        this.getTableData();
      } catch (error) {
        console.log(error);
      }
    },
    // 重置查询
    resetHandle() {
      this.tableData.page = 1;
      this.tableData.size = 10;
      this.tableData.list = [];
      this.getTableData();
    },
    // 每页条数改变是回调
    paginationSizeChange(e) {
      this.tableData.size = e;
      this.tableData.page = 1;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e;
      this.tableData.list = [];
      this.getTableData();
    },
    // Pad点餐列表
    async getTableData() {
      try {
        this.tableData.loading = true;
        const res = await padProdApi.getList({
          page: this.tableData.page,
          size: this.tableData.size,
          customName: "",
          productCategoryId: this.selectCatory.id,
          padLayoutId: "",
          id: "",
        });
        this.tableData.loading = false;
        this.tableData.list = res.records;
        this.tableData.total = res.totalRow;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: #1890ff;
  color: #fff;
}

.app-container {
  display: flex;
}

.left_menu {
  width: 164px;
  height: calc(100vh - 210px);
  border: 1px solid #ddd;

  .search_wrap {
    padding: 14px;
  }

  .tree_wrap {
    width: 100%;
    height: calc(100% - 70px);
    overflow-y: auto;

    .item {
      padding: 10px 15px;
      font-size: 14px;
      display: flex;
      align-items: center;

      &:hover {
        cursor: pointer;
      }

      &.active {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }
}

.table_wrap {
  flex: 1;
  padding-left: 14px;

  .header_wrap {
    display: flex;
  }

  .table {
    padding-top: 15px;
    width: 100%;
    height: calc(100vh - 310px);
  }
}

.head-container {
  padding-top: 20px;
}
</style>