<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div class="goBack">
            <el-button type="primary" size="mini" round @click="goBack">返回</el-button>
        </div>
        <el-tabs type="border-card" @tab-click="handleClick" v-if="categoryList.length>0">
            <el-tab-pane :label="item.name" v-for="(item, index) in categoryList" :key="index">
                <div class="main-container">
                    <div class="Tabs-button">
                        <div class="left-btn">
                            <div class="left-top padding20">
                                <el-button
                                    round
                                    size="small"
                                    v-for="item2 in item.chilList"
                                    :key="item2.id"
                                    :type="item2.id===categoryId?'primary':''"
                                    @click="changeTabs(item2)"
                                >{{ item2.name }}</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="addDel-box">
            <el-button
                type="primary"
                size="small"
                round
                icon="el-icon-plus"
                @click="showAddEditDialog(null)"
            >新建</el-button>
            <el-button type="primary" size="small" plain round @click="deleteData(null)">批量删除</el-button>
            <el-button type="primary"
                    round
                    size="small"
                    @click="addCategory">新增分类</el-button>
        </div>
        <div class="table">
            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{ tableSelection.length }}</span> 项
            </div>
            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectColumn"
                    class="OutTable"
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="name" label="文件名" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.createTime | formatTimePipe }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort" label="排序"></el-table-column>
                    <el-table-column prop="statuz" label="启用状态">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.statuz"
                                active-text="开"
                                inactive-text="关"
                                :active-value="1"
                                :inactive-value="0"
                                @change="changeSwitch(scope.row)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="220px;">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="deleteData(scope.row)"
                            >删除</el-button>
                            <el-button
                                size="mini"
                                type="success"
                                plain
                                round
                                @click="showAddEditDialog(scope.row)"
                            >编辑</el-button>
                            <el-button
                                size="mini"
                                type="warning"
                                plain
                                round
                                @click="showDetailDialog(scope.row)"
                            >详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagenation">
                    <PageComponent
                        :total="total"
                        @pagination="handlePagination"
                        :pageSize.sync="page.pageSize"
                        :pageNum.sync="page.pageNum"
                    ></PageComponent>
                </div>
            </div>
        </div>
        <!-- 添加与编辑弹层 -->
        <AddEditDialog ref="addEditDialog" @queryListData="queryListData"></AddEditDialog>
        <!-- 详情弹层 -->
        <DetailsDialog ref="detailsDialog"></DetailsDialog>
        <!-- 品牌详情添加弹层 -->
        <AddDialog ref="addDialog" @queryListData="queryListData" @queryTree="queryTree"></AddDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import AddEditDialog from './components/addEditDialog';
import DetailsDialog from './components/detailsDialog';
import AddDialog from '../../classify/components/addEditDialog';
import {
    queryLiftCategorysTree,
    queryLifeFilesList,
    deleteFilesSingle,
    deleteFilesBatch,
    updateLifeFilesStatus,
    deleteLiftCategorysSingle,
} from '@/apps/mobile/api/databank/index';
export default {
    components: {
        TitleBar,
        AddEditDialog,
        DetailsDialog,
        AddDialog,
    },
    data() {
        return {
            id: null,
            categoryId: null,
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 10,
            listLoading: false,
            showId: 1,
            addEditDialogVisible: false,
            addEditDialogType: 'add',
            addEditDialogForm: {},
            tableSelection: [],
            categoryList: [],
        };
    },
    created() {
        this.id = Number(this.$route.query.id);
        this.queryTree();
    },
    methods: {
        queryTree() {
            queryLiftCategorysTree(this.id)
                .then(res => {
                    console.log(res.data);
                    this.categoryList = res.data;
                    if (this.categoryList && this.categoryList.length > 0) {
                        this.categoryId = this.categoryList[0].chilList[0].id;
                        console.log(this.categoryId);
                        this.queryListData();
                    }
                })
                .catch();
        },
        queryListData() {
            if (this.categoryId) {
                this.listLoading = true;
                let obj = {
                    catagoryId: this.categoryId,
                    ...this.page,
                    sort: {
                        order: 'desc',
                        orderBy: 'create_time',
                    },
                };
                queryLifeFilesList(obj)
                    .then(res => {
                        console.log(res);
                        this.tableData = res.data.records || [];
                        this.total = res.data.total;
                        this.listLoading = false;
                    })
                    .catch(() => {
                        this.listLoading = false;
                    });
            }
        },
        deleteData(data) {
            if (data) {
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        deleteFilesSingle({id: data.id})
                            .then(res => {
                                console.log(res);
                                this.page.pageNum = 1;
                                this.queryListData();
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                });
                            })
                            .catch();
                    })
                    .catch(() => {});
            } else {
                if (!this.tableSelection.length) {
                    this.$message({
                        type: 'warning',
                        message: '请先选择一项！',
                    });
                    return false;
                }
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false,
                })
                    .then(() => {
                        const ids = this.tableSelection.map(item => {
                            return item.id;
                        });
                        console.log(ids);
                        deleteFilesBatch({ids: ids})
                            .then(res => {
                                this.page.pageNum = 1;
                                this.queryListData();
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                });
                            })
                            .catch();
                    })
                    .catch(() => {});
            }
        },
        changeSwitch(data) {
            let obj = {
                statuz: data.statuz ? 1 : 0,
                id: data.id,
            };
            updateLifeFilesStatus(obj)
                .then(res => {
                    console.log(res);
                    this.page.pageNum = 1;
                    this.queryListData();
                    this.$message({
                        type: 'success',
                        message: '修改成功',
                    });
                })
                .catch();
        },
        selectColumn(selection) {
            this.tableSelection = selection;
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        handleClick(tab) {
            this.categoryId = this.categoryList[tab.index].chilList[0].id;
            this.queryListData();
        },
        changeTabs(item) {
            this.categoryId = item.id;
            this.queryListData();
        },
        showAddEditDialog(data) {
            console.log(data);
            if (data) {
                this.$refs.addEditDialog.open('edit', data);
            } else {
                if (!this.categoryId) {
                    this.$message.warning('请先添加品牌分类!');
                    return false;
                }
                this.$refs.addEditDialog.open('add', {
                    brandId: this.id,
                    categoryId: this.categoryId,
                });
            }
        },
        showDetailDialog(data) {
            this.$refs.detailsDialog.open(data);
        },
        addCategory() {
            this.$refs.addDialog.open('add', {brandId: this.id});
        },
        goBack() {
            this.$router.go(-1);
        },
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}

.Tabs-button {
    display: flex;

    .left-btn {
        width: 80%;
        padding-bottom: 10px;
    }

    .padding20 {
        padding: 20px;
    }

    hr {
        border: none;
        height: 1px;
        background-color: #ccc;
    }
}

.addDel-box {
    padding-top: 20px;
    padding-bottom: 20px;
}

.goBack {
    position: absolute;
    right: 60px;
    top: 75px;
}
</style>
