<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize"
            label-width="auto">

            <el-form-item label="分类名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item label="状态" prop="shelvedStatus">
                <el-select v-model="queryParams.shelvedStatus" placeholder="请选择" clearable>
                    <el-option label="上架" :value="1" />
                    <el-option label="下架" :value="0" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-button type="primary" :size="ELsize" @click="handleAdd()">新增</el-button>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :border="TableBorder" :size="ELTableSize" v-loading="loading" :data="dataList">
            <el-table-column type="index" width="55" label="序号" align="center">
                <template slot-scope="{$index}">
                    {{ $getTableIndex(queryParams, $index + 1) }}
                </template>
            </el-table-column>
            <el-table-column label="分类名称" align="center" prop="name" show-overflow-tooltip>
                <template slot-scope="{row}">
                    {{ row.name | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column label="分类图标" align="center" prop="categoryIcon" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <el-image :src="row.categoryIcon" fit="fill" :preview-src-list="[row.categoryIcon]" style="width: 50px; height: 50px" />
                </template>
            </el-table-column>
            <el-table-column label="排序" align="center">
                <template slot-scope="{row}">
                    {{ row.orderIndex | TableItemEmpty }}
                </template>
            </el-table-column>

            <el-table-column label="状态" align="center">
                <template slot-scope="{row}">
                    <!-- <StatusTag :status-vo="row.shelvedStatus | ShopStatusOptionFilter(true)" /> -->
                    <el-tag :type="row.shelvedStatus ? 'success' : 'danger'">{{ row.shelvedStatus ? '上架' : '下架'
                    }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template slot-scope="{row}">
                    {{ row.createTime | TableItemEmpty }}
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="150">
                <template slot-scope="{row}">
                    <el-button type="text" :size="ELTableSize" @click="handleAdd(row)">修改</el-button>
                    <el-button type="text" :size="ELTableSize" @click="handleDelete(row)">删除</el-button>
                    <el-button type="text" :size="ELTableSize" @click="handleShelved(row)">{{ row.shelvedStatus ? '下架' :
                        '上架' }}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <AddCategory ref="addCategoryRef" @success="getList" />
    </div>
</template>

<script>
import { businessCategoryPage, businessCategoryDel, businessCategoryStatus } from "@/api/shop.js";
import getListApi from "@/mixins/getListApi";
import AddCategory from "./components/AddCategory.vue";

export default {
    mixins: [getListApi],
    components: { AddCategory },
    data() {
        return {
            listURL: businessCategoryPage,
        }
    },
    created() {
    },
    methods: {
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.categoryId;
            const categoryName = row.name || '';
            this.$MessageBoxConfirm({
                text: `是否删除"${categoryName}"分类？`, confirmCallback: async (callback) => {
                    try {
                        await businessCategoryDel(ids);
                        this.$successMsg(`删除"${categoryName}"分类成功`);
                        this.getList();
                    } catch { } finally {
                        callback && callback();
                    }
                }
            });
        },
        /** 上架/下架按钮操作 */
        handleShelved(row) {
            const ids = row.categoryId;
            const categoryName = row.name || '';
            this.$MessageBoxConfirm({
                text: `是否${row.shelvedStatus ? '下架' : '上架'}"${categoryName}"分类？`, confirmCallback: async (callback) => {
                    try {
                        await businessCategoryStatus(ids, row.shelvedStatus ? 0 : 1);
                        this.$successMsg(`${row.shelvedStatus ? '下架' : '上架'}"${categoryName}"分类成功`);
                        this.getList();
                    } catch { } finally {
                        callback && callback();
                    }
                }
            });
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            this.$refs.addCategoryRef.open(row);
        },
    }
}
</script>

<style lang='scss' scoped></style>