<template>
    <div class="page-container">
        <div class="flex-wrap search-box">
            <div class="search-item">
                <a-select
                    v-model="searchOptionValue"
                    class="label-option"
                >
                    <a-select-option
                        v-for="(item, index) in selectOption"
                        :key="index"
                        :value="item.title"
                        >{{ item.label }}
                    </a-select-option>
                </a-select>
            </div>
            <div class="search-item">
                <a-select
                    v-model="conditionOptionValue"
                    class="condition-option"
                >
                    <a-select-option
                        v-for="item in conditionOption"
                        :key="item.value"
                        :value="item.value"
                    >
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </div>
            <div class="search-item">
                <a-input-search
                    placeholder="请输入"
                    :max-length="100"
                    @search="onSearch"
                    v-model="searchString"
                />
            </div>
            <div class="search-item">
                <a-button @click="refresh">
                    <a-icon type="reload"/>
                </a-button>
            </div>
            <div class="search-item">
                <a-button type="primary" @click="addTable">
                    添加
                </a-button>
            </div>
        </div>
        <a-table
            v-if="this.listdata.length > 0"
            :columns="columns"
            :rowKey="(record, index) => {return record.uid}"
            :loading="loading"
            :dataSource ="listdata"
            :pagination="pager"
            :scroll="{ x: 800, y: 500 }"
            :defaultExpandAllRows="true"
            @change="tableChange"
        >
            <template slot="display" slot-scope="display">
                <a-tag
                    color="green"
                    v-if="display === 1"
                >
                    是
                </a-tag>
                <a-tag
                    color="red"
                    v-else
                >
                    否
                </a-tag>
            </template>
            <template slot="operation" slot-scope="text, record">
                <a @click="addTable(record)">编辑</a> <a-divider type="vertical" />
                <a-popconfirm
                    title="确定删除该信息吗"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="() => handleDelete(record)"
                >
                    <a class="danger" @click.stop="">
                        删除
                    </a>
                </a-popconfirm>
            </template>
        </a-table>
        <a-modal 
            v-model="isVisible"
            :width='700'
            centered
            :title="title" 
            @ok="handleOk('form')"
            @cancel="closeAddTable"
        >
            <a-form-model
                ref="form"
                :model="form"
                :rules="rules"
            >
                <a-form-model-item label="菜单名称" prop="name">
                    <a-input v-model="form.name" type="text" placeholder="请输入"/>
                </a-form-model-item>
                <a-form-model-item label="排序">
                    <a-input-number v-model="form.listorder" :min="1"/>
                </a-form-model-item>
                <a-form-model-item label="父级菜单">
                    <a-tree-select
                        v-model="form.parent_id"
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :replaceFields="reset"
                        :tree-data="treeData"
                        placeholder="请选择"
                        :treeDefaultExpandAll="true"
                    >
                    </a-tree-select>
                </a-form-model-item>
                <a-form-model-item label="图标">
                    <a-input v-model="form.logo" type="text" placeholder="请输入"/>
                </a-form-model-item>
                <a-form-model-item label="菜单类型">
                    <a-radio-group v-model="menuType" @change="onChangeType(menuType)">
                        <a-radio :value="1">
                            系统菜单
                        </a-radio>
                        <a-radio :value="0">
                            用户菜单
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="视图模板" v-if="menuType === 1">
                    <a-select
                        v-model="templateOptionValue"
                        placeholder="请选择视图模板"
                        @change="changeTemplate"
                    >
                        <a-select-option
                            v-for="(item, index) in templateOption"
                            :key="index"
                            :value="item.uid"
                            >{{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="数据编号" v-if="showItem">
                    <a-input v-model="template_id" type="text" placeholder="请输入"/>
                </a-form-model-item>
                <a-form-model-item label="菜单路由" v-if="menuType === 0">
                    <a-input v-model="form.route" type="text" placeholder="请输入"/>
                </a-form-model-item>
                <a-form-model-item label="是否显示">
                    <a-radio-group v-model="value" @change="onChange(value)">
                        <a-radio :value="1">
                            是
                        </a-radio>
                        <a-radio :value="0">
                            否
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="描述">
                    <a-textarea v-model="form.description" type="text" placeholder="请输入" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
import pager from "../../../config/pagination.conf"
export default {
    name: "list",
    components: {},
    data() {
        return {
            pager: {
                ...pager
            },
            listdata: [],
            loading: false,
            isVisible: false,
            title: '添加菜单',
            menuType: 1,
            value: 1,
            form: {
                name: '',
                listorder: '',
                description: '',
                display: 1,
                logo: '',
                template_id: '',
                parent_id: 0,
                type: 'system',
                route: ''
            },
            rules: {
                name: [{required: true, message: "请输入数据表名称", trigger: "blur"},],
            },
            columns: [
                {
                    title: '排序',
                    dataIndex: 'listorder',
                    width: 100,
                    key: 'listorder',
                },
                {
                    title: '菜单编号',
                    dataIndex: 'uid',
                    width: 150,
                    key: 'uid',
                },
                {
                    title: '菜单名称',
                    key: 'name',
                    dataIndex: 'name',
                    width: 150,
                },
                {
                    title: '图标',
                    key: 'logo',
                    dataIndex: 'logo',
                    width: 150,
                },
                {
                    title: '菜单地址',
                    key: 'route',
                    dataIndex: 'route',
                    width: 150,
                },
                {
                    title: '是否显示',
                    key: 'display',
                    dataIndex: 'display',
                    width: 150,
                    scopedSlots: {customRender: 'display'},
                },
                {
                    title: '描述',
                    key: 'description',
                    dataIndex: 'description',
                    width: 150,
                },
                {
                    title: '创建时间',
                    key: 'created',
                    dataIndex: 'created',
                    width: 150,
                },
                {
                    title: "操作",
                    width: 180,
                    dataIndex: "operation",
                    key: "operation",
                    fixed: 'right',
                    scopedSlots: {customRender: "operation"},
                },
            ],
            selectOption: [
                {
                    label: "菜单编号",
                    title: "uid",
                },
                {
                    label: "菜单名称",
                    title: "name",
                },
            ],
            conditionOption: [
                { label: "包含", value: "like" },
                { label: "等于", value: "=" },
                { label: "不等于", value: "!=" },
                { label: "小于", value: "<" },
                { label: "小于等于", value: "<=" },
                { label: "大于", value: ">" },
                { label: "大于等于", value: ">=" },
            ],
            searchOptionValue: "uid",
            conditionOptionValue: "like",
            searchString: "",
            treeValue: undefined,
            treeData: [
                {
                    name: '请输入',
                    id: 0
                }
            ],
            reset: {
                children:'children', title:'name', key:'id', value: 'id'
            },
            rowSelection: '',
            expandedRowKeys: [],
            templateOption: [],
            templateOptionValue: undefined,
            showItem: false,
            template_id: ''
        };
    },

    created() {
        this.getList();
        this.getTemplateList();
    },
    
    methods: {
        getTemplateList () {
            this.api.post("template_list", {}).then((res) => {
                if (res.code === 200) {
                    this.templateOption = res.result.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        getMenuOption () {
            this.treeData = [{name: '请输入', id: 0}];
            this.api.post("menu_option", {}).then((res) => {
                if (res.code === 200) {
                    let num = res.result.length;
                    if (num > 0) {
                        for (let i = 0; i < num; i++) {
                            this.treeData.push(res.result[i])
                        }
                    } else {
                        this.treeData = [];
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        onSearch () {
            this.pager.current = 1;
            this.getList();
        },
        getList () {
            let data = {
                page_index: this.pager.current,
                page_size: this.pager.pageSize,
                show_tree: 1
            };
            let search = {
                searchOptionValue: this.searchOptionValue,
                conditionOptionValue: this.conditionOptionValue,
                searchString: this.searchString.trim(),
            };
            if (search) {
                let searchString = search.searchString;
                if (search.conditionOptionValue === 'like') {
                    searchString = '%' + searchString + '%';
                }
                let condition = [
                    [
                        search.searchOptionValue,
                        search.conditionOptionValue,
                        searchString
                    ]
                ];
                if (this.searchString) {
                    data.where_and = condition;
                }
            }
            this.loading = true;
            this.api.post("menu_list", data).then((res) => {
                if (res.code === 200) {
                    this.loading = false;
                    this.listdata = res.result.data;
                    this.pager.current = parseInt(res.result.page_index);
                    this.pager.total = parseInt(res.result.total_records);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        addTable (record) {
            this.getMenuOption();
            this.isVisible = true;
            if (record.uid) {
                this.title = '编辑菜单';
                this.api.post("menu_item", {uid: record.uid}).then((res) => {
                    if (res.code === 200) {
                        this.form = res.result;
                        this.templateOptionValue = this.form.template_id;
                        this.value = res.result.display;
                        if (res.result.type === 'system') {
                            this.menuType = 1;
                        } else {
                            this.menuType = 0;
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            } else {
                this.title = '添加菜单';
            }
        },
        initForm () {
            this.form = {
                name: '',
                listorder: '',
                description: '',
                display: 1,
                logo: '',
                template_id: '',
                parent_id: 0,
                type: 'system',
                route: ''
            },
            this.value = 1;
            this.menuType = 1;
            this.templateOptionValue = ''
        },
        closeAddTable () {
            this.isVisible = false;
            this.initForm();
        },
        onChangeType(menuType) {
            console.log(menuType, 'mmm');
            if (menuType === 1) {
                this.form.type = 'system'
            } else {
                this.form.type = 'other'
            }
        },
        onChange(value) {
            console.log(value, 'vvvv')
            this.form.display = value;
        },
        changeTemplate () {
            this.form.template_id = this.templateOptionValue;
            this.api.post("template_item", { uid: this.templateOptionValue }).then((res) => {
                if (res.code === 200) {
                    if (res.result.type == 'edit' || res.result.type == 'view') {
                        this.showItem = true;
                        this.form.template_id = this.template_id;
                    } else {
                        this.showItem = false;
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        handleOk (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.listorder = this.form.listorder != '' ? this.form.listorder : 100;
                    let data = {
                        ...this.form,
                    };
                    // console.log(this.form, 'ffdddddff')
                    if (this.title === '添加菜单') {
                        this.api.post("menu_create", data).then((res) => {
                            if (res.code === 200) {
                                this.closeAddTable();
                                this.$message.success(res.msg);
                                this.getList();
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    } else {
                        this.api.post("menu_update", data).then((res) => {
                            if (res.code === 200) {
                                this.closeAddTable();
                                this.$message.success(res.msg);
                                this.getList();
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    }
                    
                }
            });
        },
        handleDelete (record) {
            this.api.post("menu_delete", {uid: record.uid}).then((res) => {
                if (res.code === 200) {
                    this.$message.success(res.msg);
                    this.getList();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        refresh() {
            this.searchOptionValue = 'uid';
            this.conditionOptionValue = 'like';
            this.searchString = '';
            this.pager.current = 1;
            this.pager.pageSize = 10;
            this.getList();
        },
        tableChange(pagination, filters, sorter, {currentDataSource}) {
            this.pager.current = pagination.current;
            this.pager.pageSize = pagination.pageSize;
            this.getList();
        }
    },
};
</script>

<style lang="scss" scoped>

</style>
