<template>
    <div class="app-container">
        <div class="left_menu">
            <div class="search_wrap">
                <el-input placeholder="名称/代码" v-model="query.name" @change="searchCateory">
                    <el-button slot="append" icon="el-icon-search" @click="searchCateory"></el-button>
                </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>
        </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"></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" v-if="isPcBowser">拖动排序</el-button>
                            <el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="delTableHandle(scope.row.id)">
                                <el-button type="text" slot="reference">删除</el-button>
                            </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 { tbShopCategoryGet } from '@/api/shop'
import { productGrouppage, productCategoryDelete, productCategorySort } from '@/api/pad.js'
import { swapArrayEle } from '@/utils/index.js'

export default {
    components: {
        AddPadPage
    },
    data() {
        return {
            query: {
                name: ''
            },
            selectCatory: '',
            treeDataOrgin: [],
            treeData: [],
            tableData: {
                loading: false,
                page: 1,
                size: 10,
                total: 0,
                list: []
            }
        }
    },
    mounted() {
        this.tbShopCategoryGet()
        if (this.isPcBowser) {
            this.$nextTick(() => {
                this.tableDrag()
            })
        }
    },
    methods: {
        // 搜索分类
        searchCateory() {
            this.treeData = this.treeDataOrgin.filter(item => {
                return item.name.includes(this.query.name)
            })
        },
        //表格拖拽
        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 productCategoryDelete(id)
                this.$message.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 {
                this.$notify.error({
                    title: '错误',
                    message: '请选择分类'
                })
            }
        },
        // 分类被点击
        treeItemClick(data) {
            this.selectCatory = data
            this.tableData.page = 1
            this.getTableData()
        },
        // 获取商品分类
        async tbShopCategoryGet() {
            this.tableData.loading = true
            try {
                const res = await tbShopCategoryGet({
                    page: 0,
                    size: 100,
                    sort: 'id,desc',
                    shopId: localStorage.getItem('shopId')
                })
                this.treeDataOrgin = res.content
                this.treeData = res.content
                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 productGrouppage({
                    shopId: localStorage.getItem("shopId"),
                    page: this.tableData.page,
                    size: this.tableData.size,
                    customName: '',
                    productCategoryId: this.selectCatory.id,
                    padLayoutId: '',
                    id: ''
                })
                this.tableData.loading = false
                this.tableData.list = res.content
                this.tableData.total = res.totalElements
            } 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;
    }
}

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

    .header_wrap {
        display: flex;
    }

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

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