<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
        >
            <el-form-item label="公司" prop="companyId">
                <el-select v-model="queryParams.companyId" clearable placeholder="请选择公司" size="small">
                    <el-option :label="item.companyName" :value="item.id" v-for="item in companyAllList" :key="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="用户账号" prop="account">
                <el-input
                    v-model="queryParams.account"
                    placeholder="请输入账号"
                    clearable
                    size="small"
                    style="width: 140px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname">
                <el-input
                    v-model="queryParams.nickname"
                    placeholder="请输入账号"
                    clearable
                    size="small"
                    style="width: 140px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input
                    v-model="queryParams.phone"
                    placeholder="请输入手机号码"
                    clearable
                    size="small"
                    style="width: 140px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="是否可用" prop="enabled">
                <el-select v-model="queryParams.enabled" clearable placeholder="请选择" size="small">
                    <el-option label="正常" :value="true" />
                    <el-option label="禁用" :value="false" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="cyan"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                >搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="userList">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-table
                        :data="scope.row.companyRelations"
                        style="width: 100%;margin-bottom: 20px;"
                        border
                    >
                        <el-table-column
                            prop="companyInfo.companyName"
                            label="已绑公司名称"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="enabled"
                            label="Enabled?"
                            width="180">
                            <template slot-scope="scope">
                                <span>{{scope.row.enabled ? '正常' : '禁用'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="powerLevel"
                            label="权限等级">
                            <template slot-scope="scope">
                                <span>{{scope.row.powerLevel === 999 ? '系统管理员' : scope.row.powerLevel === 100 ? '公司超管' : scope.row.powerLevel === 99 ? '管理员' : '普通用户'}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="用户编号" align="center" prop="userId" />
            <el-table-column
                label="用户账号"
                align="center"
                prop="account"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="用户昵称"
                align="center"
                prop="nickname"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="手机号码"
                align="center"
                prop="phone"
            />
            <el-table-column
                label="邮箱"
                align="center"
                prop="email"
            />
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.enabled ? '正常' : '禁用'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                width="160"
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="240"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-connection"
                        @click="bindingCommany(scope.row)"
                    >绑定公司</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 绑定公司 -->
        <el-dialog
            :title="title + ' 绑定公司'"
            :visible.sync="openScope"
            width="500px"
            append-to-body
        >
        <el-form>
            <el-form-item label="公司名称" prop="companyName">
                <el-select v-model="companyIds" clearable placeholder="请选择公司" size="small" style="width: 370px" multiple @change="commanyChange">
                    <el-option :label="item.companyName" :value="item.id" v-for="item in companyAllList" :key="item.id"/>
                </el-select>
            </el-form-item>
            <div v-for="item in companyRelations" :key="item.companyId">
                <el-divider content-position="left">{{item.companyName}}</el-divider>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="权限等级" prop="powerLevel">
                            <el-radio-group v-model="item.powerLevel">
                                <el-radio :label="0">普通用户</el-radio>
                                <el-radio :label="99">管理员</el-radio>
                                <el-radio :label="100">公司超管</el-radio>
                                <el-radio :label="999">系统管理员</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否可用" prop="enabled">
                            <el-select v-model="item.enabled" clearable placeholder="请选择" size="small">
                                <el-option label="正常" :value="true" />
                                <el-option label="禁用" :value="false" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitScope">确 定</el-button>
            <el-button @click="cancelScope">取 消</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
import { getCompanyAllList } from "@/api/system/company";
import { getAdminList, bindCommany } from "@/api/system/superUser";
export default {
    data() {
        return {
            // 查询参数
            queryParams: {
                pageSize: 20,
                pageNum: 1
            },
            // 公司列表
            companyAllList: [],
            // 列表数据
            userList: [],
            // 列表个数
            total: 0,
            // loading
            loading: false,
            // 选中的公司ID
            companyIds: [],
            // 其它信息
            companyRelations: [], 
            // 
            openScope: false,
            title: '',
            userId: ''
        }
    },
    created() {
        this.getList()
        this.getCompanyAll()
    },
    methods: {
        /** 获取所有公司 */
        getCompanyAll() {
            getCompanyAllList().then(res => {
                this.companyAllList = res.data
            })
        },
        /** 搜索 */
        handleQuery() {
			this.getList()
		},
        /** 查询菜单列表 */
        getList() {
            getAdminList(this.queryParams).then(res => {
                this.userList = res.data.records
                this.total = res.data.total
            })
        },
        /** 重置 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 绑定公司 */
        bindingCommany(row) {
            // [{companyId: 1, powerLevel: 0, enabled: true}, {}...]
            console.log(row);
            this.title = row.nickname
            this.userId = row.userId
            this.companyIds = row.companyRelations.map(item => item.companyId)
            this.companyRelations = row.companyRelations.map(item => {
                return {
                    companyName: item.companyInfo.companyName,
                    companyId: item.companyId,
                    enabled: item.enabled,
                    powerLevel: item.powerLevel
                }
            })
            this.openScope = true
        },
        /** 新增弹窗确定 */
        submitScope() {
            bindCommany({userId: this.userId, data: this.companyRelations.map(item => ({companyId: item.companyId, enabled: item.enabled, powerLevel: item.powerLevel}))}).then(res => {
                this.msgSuccess("分配成功");
                this.openScope = false
                this.getList()
            })
        },
        /** 新增弹窗取消 */
        cancelScope() {
            this.form = { enabled: true, powerLevel: 0 };
            this.openScope = false;
        },
        /** 选中公司触发 */
        commanyChange(a) {
            let dar = []
            this.companyAllList.forEach(item => {
                if (a.includes(item.id)) {
                    dar.push({
                        companyId: item.id,
                        companyName: item.companyName
                    })
                }
            })
            dar = dar.map(item => {
                let company = this.companyRelations.find(p => p.companyId === item.companyId)
                if (company) {
                    return {
                        ...item,
                        enabled: company.enabled,
                        powerLevel: company.powerLevel
                    }
                } else {
                    return {
                        ...item,
                        enabled: true,
                        powerLevel: 0
                    }
                }
            })
            this.companyRelations = dar
        }
    }
}
</script>