<template>
    <div class="pageConfig-box" v-loading="isload" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="pageConfig-head">
            <div style="display: flex;">
                <div>
                    <el-select @change="Inquirechange(1)" v-model="ModulValue" clearable placeholder="全部模块">
                        <el-option v-for="item in ModulList" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                &nbsp;&nbsp;
                <div style="display: flex;">
                    <el-input placeholder="请输入页面名称" v-model="SearchInput" clearable></el-input>
                    &nbsp;&nbsp;
                    <el-button type="primary" @click="btnSearch">搜 索</el-button>
                </div>
            </div>
            <div>
                <el-button type="primary" @click="isload = true; pageload()">刷 新</el-button>
                <el-button type="primary" @click="addPage">添 加</el-button>
            </div>
        </div>
        <div class="pageConfig-table">
            <el-table :data="pageList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
                style="width: 100%">
                <el-table-column prop="pageName" label="页面名称" width="130">
                </el-table-column>
                <el-table-column prop="pageid" label="页面id" width="80">
                </el-table-column>
                <el-table-column prop="systemMenuCode" label="页面Code" width="130">
                </el-table-column>
                <el-table-column prop="webUrl" label="WebUrl" width="100">
                </el-table-column>
                <el-table-column prop="androidUrl" label="AndroidUrl" width="100">
                </el-table-column>
                <el-table-column prop="iosUrl" label="IosUrl" width="100">
                </el-table-column>
                <el-table-column label="手机端图标" prop="icon" width="130">
                </el-table-column>
                <el-table-column prop="pageIsEnable" label="web端启用" width="130">
                    <template slot-scope="scope">
                        <el-checkbox :true-label="1" disabled :false-label="0"
                            v-model="scope.row.pageIsEnable"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="pagePhoneIsEnable" label="手机端启用" width="130">
                    <template slot-scope="scope">
                        <el-checkbox :true-label="1" disabled :false-label="0"
                            v-model="scope.row.pagePhoneIsEnable"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" icon="el-icon-s-tools" @click="Edit(scope.row)">编
                            辑</el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete-solid" @click="Del(scope.row)">删
                            除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5, 10, 14, 20]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next" :total="pageList.length">
                </el-pagination>
            </div>
        </div>

        <el-dialog :close-on-click-modal="false" title="提示" width="30%" :visible.sync="dialogVisible" :modal-append-to-body='false'
            :append-to-body="false">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>

        <Modal style="z-index:2012" :title="dialogTitle" :height="500" :width="700" :show.sync="showModal"
            restrict-to=".is-vertical" @close="showModal = false">
            <template v-slot:content>
                <div style="padding: 10px;">
                    <el-form label-position="left" label-width="80px" :model="pageBind" :rules="rules" ref="pageBind">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="页面模块" prop="modulid"> <!--style="width: 48%;" -->
                                    <el-select v-model="pageBind.modulid" placeholder="请选择">
                                        <el-option v-for="item in Modulfiltr" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="页面名称" prop="pageName"> <!--style="width: 48%;" -->
                                    <el-input v-model="pageBind.pageName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="页面代码" prop="systemMenuCode">
                                    <el-input v-model="pageBind.systemMenuCode"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="webUrl" prop="webUrl">
                                    <el-input v-model="pageBind.webUrl"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="AndroidUrl">
                                    <el-input v-model="pageBind.androidUrl"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="IosUrl">
                                    <el-input v-model="pageBind.iosUrl"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="图标">
                                    <el-input v-model="pageBind.icon"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="页面备注">
                                    <el-input v-model="pageBind.pageRemark"></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-checkbox label="Web" :true-label="1" :false-label="0"
                                    v-model="pageBind.pageIsEnable"></el-checkbox>
                                <el-checkbox label="Android是否启用" :true-label="1" :false-label="0"
                                    v-model="pageBind.pagePhoneIsEnable"></el-checkbox>
                            </el-col>
                        </el-row>
                        <br />
                        <br />
                        <el-row>
                            <el-col :span="24">
                                <div class="=titleSpan">页面功能</div>
                            </el-col>
                        </el-row>
                        <br />
                        <el-row :gutter="20">
                            <el-col :span="4" v-for="item in pageBindFun" :key="item.id" style="text-align: center;">
                                <el-checkbox :label="item.name" :true-label="1" :false-label="0"
                                    v-model="item.value"></el-checkbox>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </template>
            <template v-slot:footer>
                <div>
                    <el-button @click="showModal = false" type="danger">取 消</el-button>
                    <el-button type="primary" @click="PageSave">保 存</el-button>
                </div>
            </template>
        </Modal>

    </div>
</template>


<script>
import Modal from '../template/dialog.vue';

export default {
    data() {
        return {
            bufferData: {},//暂存数据
            pageList: [], //页面数据
            SearchInput: '', //查询的值
            currentPage: 1, //页码
            pageSize: 10,// 每页的数据条数
            ModulValue: '', //模块val 
            ModulList: [],//模块数据
            PathUrl: '',
            dialogVisible: false,
            showModal: false, //测试弹层
            dialogTitle: '测试标题',
            pageBind: {
                androidUrl: '',
                iosUrl: '',
                pageIsEnable: 0,
                pageName: '',
                pagePhoneIsEnable: 0,
                pageid: -1,
                systemMenuCode: '',
                webUrl: '',
                modulName: '',
                modulid: '',
                icon: '',
                modulRemark: '',
                sTid: 5,
                pageRemark: '',
            },//数据绑定对象
            rules: {
                pageName: [
                    { required: true, message: '请输入页面名称', trigger: 'blur' },
                ],
                modulid: [
                    { required: true, message: '请选中模块', trigger: 'blur' },
                ],
                systemMenuCode: [
                    { required: true, message: '请输入页面代码', trigger: 'blur' },
                ]
                , webUrl: [
                    { required: true, message: '请输入WebUrl', trigger: 'blur' },
                ]
            },
            pageBindFun: [],
            isload: true,
            userId: 0,
            token: '',
        };
    },
    methods: {
        pageload() {
            var that = this;
            this.$axios.post('/api/System/PageConfigInit', {

            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp.data.data);
                if (resp.data.code == 200) {
                    that.bufferData = resp.data.data;
                    that.ModulList = resp.data.data.modList.data;
                    that.ModulList.unshift({
                        'id': -1,
                        'name': "全部模块",
                        'sTid': -1
                    });
                    that.pageList = resp.data.data.viewList.data;
                }
                that.Inquirechange(that.currentPage);
                that.isload = false;

                if (that.pageList.slice((that.currentPage - 1) * that.pageSize, that.currentPage * that.pageSize).length == 0) {
                    if (that.currentPage > 1) {
                        that.currentPage = that.currentPage - 1;
                    }
                }
            })

        },
        Inquirechange(Pindex) {
            var that = this;

            if (this.ModulValue == '') {
                this.ModulValue = -1;
            }

            if (this.ModulValue == -1) {
                this.pageList = this.bufferData.viewList.data;
            } else {
                this.pageList = this.bufferData.viewList.data.filter(function (item, i, arr) {
                    return item.modulid == that.ModulValue;
                });
            }
            this.currentPage = Pindex;
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        //搜索按钮
        btnSearch() {
            this.ModulValue = -1;
            var that = this;
            this.pageList = this.bufferData.viewList.data.filter(function (item, i, arr) {
                return item.pageName.indexOf(that.SearchInput) != -1;
            });
        },
        addPage() {
            this.showModal = true;
            this.dialogTitle = '添加页面';
            this.pageBind = {
                androidUrl: '',
                iosUrl: '',
                pageIsEnable: 0,
                pageName: '',
                pagePhoneIsEnable: 0,
                pageid: -1,
                systemMenuCode: '',
                webUrl: '',
                modulName: '',
                modulid: '',
                icon: '',
                modulRemark: '',
                sTid: 5,
                pageRemark: '',
            };
            this.PageQueryFun(-1);
        },
        Edit(page) {
            //this.dialogVisible = true;
            this.showModal = true;
            this.dialogTitle = '编辑页面';
            console.log(page);
            this.pageBind = {
                androidUrl: page.androidUrl,
                iosUrl: page.iosUrl,
                pageIsEnable: page.pageIsEnable,
                pageName: page.pageName,
                pagePhoneIsEnable: page.pagePhoneIsEnable,
                pageid: page.pageid,
                systemMenuCode: page.systemMenuCode,
                webUrl: page.webUrl,
                modulName: page.modulName,
                modulid: page.modulid,
                icon: page.icon,
                modulRemark: page.modulRemark,
                sTid: page.sTid,
                pageRemark: page.pageRemark,
            };
            this.PageQueryFun(page.pageid);
        },
        PageSave() {
            var that = this;
            if (this.pageBind.pageid == -1) {

                var p = new Promise((resolve, reject) => {
                    this.$refs.pageBind.validate((valid) => {
                        if (valid) {
                            resolve(true);
                        } else {
                            reject(false);
                        }
                    });
                })

                p.then(resolve => {

                    this.pageBind.FunArr = [];
                    this.pageBind.userId = this.userId;
                    this.pageBindFun.forEach(item => {
                        if (item.value) {
                            this.pageBind.FunArr.push(item.id)
                        }
                    });

                    //新增
                    this.$axios.post(this.PathUrl + '/api/System/AddPageInfo', this.pageBind, {
                        headers: {
                            'Authorization': that.token,
                        }
                    }).then(resp => {
                        that.showModal = false;

                        if (resp.data.code == 200) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error(resp.data.msg);
                        }
                        that.pageload();

                    })
                }).catch(err => {
                    console.log("表单验证未通过");
                })

            } else {
                //修改
                var p = new Promise((resolve, reject) => {
                    this.$refs.pageBind.validate((valid) => {
                        if (valid) {
                            resolve(true);
                        } else {
                            reject(false);
                        }
                    });
                })

                p.then(resolve => {

                    this.pageBind.FunArr = [];
                    this.pageBind.userId = this.userId;
                    this.pageBindFun.forEach(item => {
                        if (item.value) {
                            this.pageBind.FunArr.push(item.id)
                        }
                    });

                    //编辑
                    this.$axios.post(this.PathUrl + '/api/System/EditPageInfo', this.pageBind, {
                        headers: {
                            'Authorization': that.token,
                        }
                    }).then(resp => {
                        that.showModal = false;

                        if (resp.data.code == 200) {
                            this.$message({
                                message: '保存成功!',
                                type: 'success'
                            });
                        } else {
                            this.$message.error(resp.data.msg);
                        }
                        that.pageload();

                    })
                }).catch(err => {
                    console.log("表单验证未通过");
                })
            }

        },
        Del(page) {
            let that = this;
            var dellist = [];
            dellist.push({
                'Pageid': page.pageid,
                'Userid': this.userId,
            })

            this.$axios.post(this.PathUrl + '/api/System/DelPageInfo', dellist, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    this.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                } else {
                    this.$message.error('删除失败!' + resp.data.msg);
                }
                that.pageload();

            }).catch(err => {
                this.$message.error('网络错误!');
            })
        },
        PageQueryFun(pageid) {

            let that = this;
            var bindFun = [];

            this.$axios.post(this.PathUrl + '/api/System/QueryPageFunById', {
                pageid: pageid,
                bindFunArr: bindFun,
                uid: this.userId,
            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    that.pageBindFun = resp.data.data;
                }

            }).catch(err => {
                this.$message.error('网络错误!');
            })
        }


    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.pageload();
    },
    components: {
        Modal
    },
    computed: {
        Modulfiltr() {
            return this.bufferData.modList.data.filter((item, i, arr) => {
                return item.id != -1;
            });
        }
    }
}
</script>
<style>
body {
    margin: 0;
    padding: 0;
}

.pageConfig-head {
    display: flex;
    justify-content: space-between;
}

.pageConfig-box {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
}

.pageConfig-table {
    margin-top: 10px;
}

.pageConfig-table .block {
    margin-top: 10px;
}

.pageConfig-table .el-table--enable-row-transition .el-table__body td.el-table__cell {
    text-align: center;
}

.job-table .el-table--border .el-table__cell:first-child .cell {
    text-align: center;
}

.el-checkbox__input.is-disabled+.el-checkbox__label {
    color: #808080 !important;
}

.el-checkbox__input.is-disabled.is-checked+.el-checkbox__label {
    color: #1890ff !important;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #1890ff !important;
    border-color: #1890ff !important;
}
</style>