<template>
    <div class="organizManage-main data-permission">
        <div class="organizManage-mainRight">
            <!-- 下拉选择公司 -->
            <!-- <div class="public-function-div">数据权限列表
                <div class="company-select" v-if="companys !== '' && companys.length > 1">
                    <el-dropdown
                        trigger="click"
                        @command="selectComPany"
                    >
                        <span class="el-dropdown-link">
                            {{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <div v-for="item in companys" :key="item.id">
                                <el-dropdown-item :command="item">{{item.companyName}}</el-dropdown-item>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div> -->
            <div class="dataPermission-post-m">
                <el-form
                    class="userModal"
                    inline
                >
                    <el-form-item>
                        <el-input
                            v-model="dataTable.tableParams.form.tableName"
                            clearable
                            placeholder="表名"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model="dataTable.tableParams.form.authDesc"
                            clearable
                            placeholder="规则描述"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            placeholder="行操作类型"
                            style="width: 120px;"
                            v-model="dataTable.tableParams.form.operType"
                            clearable
                            size="small"
                            class="user-select"
                        >
                            <el-option
                                v-for="item in store.state.system.dataPermission.operType"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            icon="el-icon-search"
                            type="primary"
                            size="mini"
                            @click="search"
                            v-privilege="activeMenu + 'SEARCH'"
                        >查询</el-button>
                        <!-- :disabled="!checkPermission('xtpzgl-sjqxpz-add')" -->
                        <el-button
                            class="button"
                            type="primary"
                            size="mini"
                            icon="el-icon-refresh"
                            v-privilege="activeMenu + 'SEARCH'"
                            @click="tableDataCancel()"
                        >重置</el-button>
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-circle-plus-outline"
                            v-privilege="activeMenu + 'ADD'"
                            @click="operateClick('add',{})"
                        >新增</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    ref="dataTable"
                    v-loading="dataTable.loading"
                    border
                    :height="dataTable.height"
                    highlight-current-row
                    :data="dataTable.list"
                    @selection-change="dataSelectChange"
                >
                    <el-table-column
                        type="index"
                        label="序号"
                        fixed="left"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="tableName"
                        label="表名"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="authDesc"
                        label="规则描述"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="operType"
                        label="行操作类型"
                        width="120"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                v-for="item in store.state.system.dataPermission.operType"
                                :key="item.value"
                                v-if="item.value === scope.row.operType"
                            >{{item.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="operAction"
                        label="操作行为"
                        width="120"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                class="color-success"
                                v-if="scope.row.operAction==='1'"
                            >允许访问</span>
                            <span
                                class="color-danger"
                                v-else-if="scope.row.operAction==='0'"
                            >拒绝访问</span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        :show-overflow-tooltip="true"
                        prop="status"
                        label="状态"
                        width="70"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                class="color-success"
                                v-if="scope.row.status==='1'"
                            >启用</span>
                            <span
                                class="color-danger"
                                v-else-if="scope.row.status==='0'"
                            >停用</span>
                            <span v-else></span>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        label="操作"
                        align="center"
                        fixed="right"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="danger"
                                size="mini"
                                @click="handleCommand(['del', scope.row])"
                                v-privilege="activeMenu + 'DELETE'"
                            >删除</el-button>
                            <el-button
                                size="mini"
                                @click="handleCommand(['edit', scope.row])"
                                v-privilege="activeMenu + 'PUT'"
                            >修改</el-button>
                            <!-- <el-dropdown
                                @command="handleCommand"
                                :show-timeout="50"
                                style="margin-left: 5px;"
                            >
                                <span
                                    class="el-dropdown-link"
                                    @click.stop
                                >
                                    操作<i class="el-icon-arrow-down"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="['edit', scope.row]">修改</el-dropdown-item>
                                    <el-dropdown-item :command="['del', scope.row]">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="foot-style">
                    <el-pagination
                        @size-change="dataPageSizeChange"
                        @current-change="dataPageCurrentChange"
                        :current-page="dataTable.tableParams.form.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="+dataTable.tableParams.form.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="dataTable.tableParams.page.total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import store from '@/store/index.js';
import usersAddAndEdit from './usersAddAndEdit.vue';
import checkPermission from '@/config/permission.js';
import { dgTree } from '@/utils/util.js';
export default {
    components: {
        usersAddAndEdit
    },
    data () {
        return {
            companys: [], // 用户公司列表
            companyId: '', // 选择公司Id
            companyName: '', // 选择公司名称
            store,
            activeMenu: '',
            operate: 'detail',
            dataTable: {
                height: 600,
                loading: false,
                list: [],
                //  选中项
                items: [],
                item: {},
                tableParams: {
                    form: {
                        companyId: '',
                        pageNum: 1,
                        pageSize: 20
                    },
                    //  返回分页数据
                    page: {
                        total: 0
                    }
                }
            }
        };
    },
    computed: {
    },
    created () {
        this.activeMenu = window.top.localStorage.getItem('activeMenu');
    },
    mounted () {
        // 获取公司信息
        this.companys = JSON.parse(window.top.localStorage.getItem('companys'));
        this.companyId = window.top.localStorage.getItem('companyId');
        if (this.companyId !== '' && this.companyId !== null) {
            this.companyName = this.companys.find((x) => x.id === this.companyId).companyName;
        }
        this.dataTable.tableParams.form.companyId = this.companyId;
        this.initData();
    },
    methods: {
        checkPermission,
        initData () {
            //  查询数据权限配置
            this.getData(this.dataTable.tableParams.form);
            this.$nextTick(() => {
                this.dataTable.height = this.getHeight(this.$refs['dataTable'].$el) - 70;
            });
        },
        //  选择
        dataSelectChange () {

        },
        //  计算树区域高度
        getHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        // 下拉选择公司
        selectComPany (command) {
            this.companyId = command.id;
            this.companyName = command.companyName;
            this.dataTable.tableParams.form.companyId = this.companyId;
            this.getData(this.dataTable.tableParams.form);
        },
        // 遍历树获取相应公司菜单
        getTreeAll (tree, id) {
            let arr = []
            if (!!tree && tree.length !== 0) {
                tree.forEach(item => {
                    let obj = {}
                    obj = {...item}
                    if (obj.hasOwnProperty('companyId') && obj.companyId === id) {
                        obj.children = this.getTreeAll(item.children);
                        arr.push(obj)
                    }
                })
            }
            return arr
        },
        //  取数据权限列表
        async getData (form) {
            //  查询列表
            const promise = await this.store.dispatch('system/rolesManage/dataRolesList2', form).then(res => {
                if (res.code === '0') {
                    this.dataTable.list = res.data.list;
                    this.dataTable.tableParams.form.pageNum = res.data.pageNum;
                    this.dataTable.tableParams.form.pageSize = res.data.pageSize;
                    this.dataTable.tableParams.page.total = res.data.total;
                } else {
                    this.$message.error(res.message);
                    this.dataTable.tableParams.form.pageNum = 1;
                    this.dataTable.tableParams.page.total = 0;
                }
            });
            return promise;
        },
        //  删除
        async delData (arr) {
            let ids = [];
            if (arr.lenght < 1) return false;
            for (let item of arr) {
                ids.push(item.id);
            }
            ids = ids.join(',');
            //
            const promise = await this.store.dispatch('system/dataPermission/delData', ids).then(res => {
                if (res.code === '0') {
                    this.$message.success('删除成功');
                    this.search();
                } else {
                    this.$message.error(res.message);
                }
            });
            return promise;
        },
        //  搜索
        search () {
            this.getData(this.dataTable.tableParams.form);
        },
        tableDataCancel () {
            let that = this;
            that.dataTable.tableParams.form.tableName = '';
            that.dataTable.tableParams.form.authDesc = '';
            that.dataTable.tableParams.form.operType = '';
            that.getData(that.dataTable.tableParams.form);
        },
        //  计算table高度
        getTableHeight (dom) {
            return (window.innerHeight - dom.offsetTop - 100) / 2;
        },
        //  操作
        operateClick (str, item) {
            this.operate = str;
            //
            switch (str) {
                case 'add':
                    this.$router.push({ path: 'dataPermission/dataPermissionAdd', query: { operate: str, companyId: this.companyId } });
                    break;
                case 'edit':
                    this.$router.push({ path: 'dataPermission/dataPermissionAdd', query: { operate: str, companyId: this.companyId, id: item.id, tableName: item.tableName } });
                    break;
                case 'del':
                    //
                    this.$confirm('确定要删除已选择的记录吗？确定请选是，取消选否。', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.delData([item]);
                    }).catch(() => {
                        this.$message.info('已取消操作');
                    });
                    break;
            }
        },
        //
        dataPageSizeChange (size) {
            this.dataTable.tableParams.form.pageSize = size;
            this.getData(this.dataTable.tableParams.form);
        },
        //
        dataPageCurrentChange (index) {
            this.dataTable.tableParams.form.pageNum = index;
            this.getData(this.dataTable.tableParams.form);
        },
        //  操作点击
        handleCommand (command) {
            this.operateClick(command[0], command[1]);
        }
    }
};
</script>

<style lang="less" scoped>
.data-permission {
    position: relative;
    min-width: 650px;
    .organizManage-mainRight {
        width: 100%;
    }
}

.og-st-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    padding-right: 60px;
}

.organizManage-main {
    height: 600px;
}

.public-function-div {
    font-size: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid #d5d5d5;
    .el-dropdown {
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }
}
.company-select {
    z-index: 1999;
    position: absolute;
    left: 200px;
    top: 10px;
}
.el-dropdown-menu {
    overflow-y: scroll;
    max-height: 200px;
}
.organizManage-mainLeft {
    width: 30%;
    border-right: 1px solid #e0e0e0;
    float: left;
    overflow-x: hidden;
    height: inherit;
}

.organizManage-mainRight {
    width: 70%;
    float: left;
}

.FormorganizManage-main {
    margin: 20px 20px;
}
.dataPermission-post-m {
    padding: 15px;
    .foot-style {
        margin: 5px 0 0;
        text-align: right;
    }
}
</style>
