<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input
                                    placeholder="请输入菜单名称"
                                    v-model="searchForm.name"
                                    class="max-width200"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input
                                    placeholder="请输入菜单路由"
                                    v-model="searchForm.route"
                                    class="max-width200"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select
                                    v-model="searchForm.status"
                                    class="max-width200"
                                    placeholder="启用状态"
                                >
                                    <el-option label="是" :value="1"></el-option>
                                    <el-option label="否" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" round @click="querySearch">查询</el-button>
                                <el-button type="info" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- <div class="SearchTitle">
                已选择
                <span class="subject-color">4</span> 项
            </div>-->
            <div class="MaintenanceTable">
                <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    default-expand-all
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                    @selection-change="selectColumn"
                >
                    <el-table-column type="selection" align="center"></el-table-column>
                    <el-table-column prop="name" label="菜单名称"></el-table-column>
                    <el-table-column prop="route" label="菜单路由"></el-table-column>
                    <el-table-column label="菜单类型">
                        <template slot-scope="scope">{{ scope.row.type.text }}</template>
                    </el-table-column>
                    <el-table-column prop="sort" label="菜单序号"></el-table-column>
                    <el-table-column label="是否启用">
                        <template slot-scope="scope">
                            <el-switch
                                @change="switchChange($event, scope.row)"
                                v-model="scope.row.status"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class="operation-bar">
                        <template slot-scope="scope">
                            <span
                                class="pointer operation-icon"
                                title="删除"
                                @click="deleteData('sing', scope.row.id)"
                            >
                                <i class="iconfont iconshanchu1"></i>
                            </span>
                            <span
                                class="pointer operation-icon"
                                title="编辑"
                                @click="showAddEditDialog(scope.row)"
                            >
                                <i class="iconfont iconbianji"></i>
                            </span>
                            <span
                                class="pointer operation-icon"
                                title="查看详情"
                                @click="showDetailsDialog(scope.row)"
                            >
                                <i class="iconfont iconchakanxiangqing"></i>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 添加与编辑弹层 -->
        <!-- <AddEditDialog ref="addEditDialog" @queryListData="queryListData"></AddEditDialog> -->
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
// import AddEditDialog from './components/addEditDialog';
import { queryExpertList, updateExpert, deleteExpert } from '@/apps/mobile/api/expert/index';
export default {
    components: {
        TitleBar,
        // AddEditDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            listLoading: false,
            tableSelection: [],
            menuData: [],
            tableData: [],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            tableSelection: [],
            addEditDialogVisible: false,
            addEditDialogType: 'add',
            addEditDialogForm: {},
            detailsDialogVisible: false,
            searchObj: {},
            time: [],
            total: 0,
            sortings: [
                {
                    orderBy: 'sort',
                    order: 'asc',
                },
            ],
            detailId: '000',
        };
    },
    created() {
        this.queryListData();
    },
    methods: {
        queryListData() {
            this.listLoading = true;
            let options = {
                query: this.searchForm,
                sortings: this.sortings,
            };
            getMenusList(options, { loading: false })
                .then(res => {
                    this.tableData = res;
                    this.tableData.map(item => {
                        if (item.status.value === 0) {
                            item.status = false;
                        } else {
                            item.status = true;
                        }
                    });
                    this.tableData = toTree(this.tableData);
                    this.total = res.totalCount;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        /**
         * 选择列
         */
        selectColumn(selection) {
            this.tableSelection = selection;
        },

        showAddEditDialog(data) {
            if (data === null) {
                this.addEditDialogType = 'add';
                this.addEditDialogForm = {
                    status: 1,
                    parent: {},
                };
            } else {
                this.addEditDialogType = 'edit';
                this.addEditDialogForm = Object.assign({}, data);
                if (data.status) {
                    this.addEditDialogForm.status = 1;
                } else {
                    this.addEditDialogForm.status = 0;
                }
            }
            this.addEditDialogVisible = true;
        },
        showDetailsDialog(data) {
            this.detailsDialogVisible = true;
            this.detailId = data.id;
        },

        closeDialog(dialogVisibleName) {
            this[dialogVisibleName] = false;
        },
        reset() {
            this.searchForm = {};
            this.queryListData();
        },
        querySearch() {
            this.page.pageNo = 1;
            this.queryListData();
        },
        switchChange(val, row) {
            let rows = {
                status: row.status,
                id: row.id,
            };
            if (val === true) {
                rows.status = 1;
            } else {
                rows.status = 0;
            }
            isShowMenus(rows.id, rows)
                .then(() => {
                    this.queryListData();
                })
                .catch(err => {
                    this.queryListData();
                });
        },
        /**
         * 删除功能
         * @param {String} type 授权操作类型:'batch'批量授权  'single'单个授权
         * @param {Number} id 当前需要删除的id或集合
         */
        deleteData(type, id) {
            if (type === 'batch') {
                if (!this.tableSelection.length) {
                    this.$message({
                        type: 'warning',
                        message: '请先选择一项！',
                    });
                    return;
                }
                this.$confirm('确定要删除吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false,
                })
                    .then(() => {
                        let ids = this.tableSelection.map(item => {
                            return item.id;
                        });
                        deleteMenusBatch({ keys: ids })
                            .then(() => {
                                this.queryListData();
                            })
                            .catch(() => {});
                    })
                    .catch(() => {});
            } else {
                this.$confirm('确定要删除吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false,
                })
                    .then(() => {
                        deleteMenusSingle(id)
                            .then(() => {
                                this.queryListData();
                            })
                            .catch(() => {});
                    })
                    .catch(() => {});
            }
        },
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
</style>
