<template>
    <div class="user">
        <Card :bordered="false" dis-hover>
            <bingo-list
                :columns="columns"
                :pageSetting="pageSetting"
                :page="true"
                :isTable="isTable"
                :showBtnType="'all'"
                :showBtnOutNum="2"
                :toolbarNew="true"
                ref="bingoList"
                :searchList="searchList"
                :dataApi="Api"
                :queryData="queryData"
                :isSearch="true"
                :isSearchAdvance="true"
                :showSwitchBtn="false"
                :processData="processData"
                @on-add-new="onAddNew"
                @on-query-submit="querySubmit"
                @on-edit-btn="onEditBtn"
                :showNewBtn="auth.add!==0"
                :isEditBtn="auth.edit!==0"
                :isDeleteBtn="auth.delete!==0"
                v-if="auth.table!==0"
            >
                <template slot="action" slot-scope="{ row, index }">
                    <Button
                        class="btn-more"
                        size="small"
                        @click="allotGroup(row)"
                        v-if="auth.allotGroup!==0"
                    >
                    <i class="icon iconfont iconqunzuguanli"></i>
                    <span class="font">分配群组</span></Button
                    >
                    <Button
                        class="btn-more"
                        size="small"
                        @click="allot(row)"
                        v-if="auth.allotRole!==0"
                    >
                    <i class="icon iconfont iconjiaoseguanli"></i>
                    <span class="font">分配角色</span></Button
                    >
                </template>
            <!-- 高级搜索 -->
                <template slot="queryForm">
                    <bingo-grid-item>
                        <bingo-form-item label="账号" prop="account">
                            <Input
                                v-model="queryData.account"
                                placeholder="请输入账号"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="用户名称" prop="nameCn">
                            <Input
                                v-model="queryData.nameCn"
                                placeholder="请输入用户名称"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="性别" prop="sex">
                            <Select v-model="queryData.sex">
                                <Option v-for="item in sexList" :value="item.dictCode" :key="item.dictCode">{{ item.dictValue }}</Option>
                            </Select>
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="生日" prop="birthday">
                            <Input
                                v-model="queryData.birthday"
                                placeholder="请输入生日"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="电话" prop="telephone">
                            <Input
                                v-model="queryData.telephone"
                                placeholder="请输入电话"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="手机号" prop="mobile">
                            <Input
                                v-model="queryData.mobile"
                                placeholder="请输入手机号"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="传真" prop="faxNumber">
                            <Input
                                v-model="queryData.faxNumber"
                                placeholder="请输入传真"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <bingo-grid-item>
                        <bingo-form-item label="邮箱" prop="email">
                            <Input
                                v-model="queryData.email"
                                placeholder="请输入邮箱"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                    <!-- <bingo-grid-item>
                        <bingo-form-item label="头像" prop="iconUrl">
                            <Input
                                v-model="queryData.iconUrl"
                                placeholder="请输入头像"
                            />
                        </bingo-form-item>
                    </bingo-grid-item> -->
                    <bingo-grid-item>
                        <bingo-form-item label="身份证" prop="idNumber">
                            <Input
                                v-model="queryData.idNumber"
                                placeholder="请输入身份证"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                </template>
            </bingo-list>
        </Card>
        <Modal v-model="isShowNewForm" :title="isAdd==true?'新建':'修改'" @on-ok="onOk" :width="900">
            <Form ref="formAdd" :model="formAdd" label-position="right" :label-width="90">
                <Row>
                    <Col :span="12">
                        <bingo-form-item label="账号">
                            <Input type="text" v-model="formAdd.account" placeholder="请输入账号">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="密码">
                            <Input type="text" v-model="formAdd.password" placeholder="请输入密码">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="用户名称">
                            <Input type="text" v-model="formAdd.nameCn" placeholder="请输入用户名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="英文名称">
                            <Input type="text" v-model="formAdd.nameEn" placeholder="请输入英文名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="德文名称">
                            <Input type="text" v-model="formAdd.nameDe" placeholder="请输入德文名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <!-- <Col :span="12">
                        <bingo-form-item label="归属部门">
                            <Select v-model="formAdd.department" transfer>
                                <Option :value="item.id" v-for="item in deptList" :key="item.id">{{item.nameCn}}</Option>
                            </Select>
                        </bingo-form-item>
                    </Col> -->
                    <Col :span="12">
                        <bingo-form-item label="职位">
                            <Select v-model="formAdd.position" transfer>
                                <Option :value="item.id" v-for="item in positionList" :key="item.id">{{item.nameCn}}</Option>
                            </Select>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12" v-if="info.userType==0">
                        <bingo-form-item label="产品编码">
                            <Select v-model="formAdd.prodSn" transfer>
                                <Option :value="item.sn" v-for="item in productList" :key="item.sn">{{item.nameCn}}</Option>
                            </Select>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="性别">
                            <Select v-model="formAdd.sex">
                                <Option v-for="item in sexList" :value="item.dictCode" :key="item.dictCode">{{ item.dictValue }}</Option>
                            </Select>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="生日">
                            <Input type="text" v-model="formAdd.birthday" placeholder="请输入生日">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="电话">
                            <Input type="text" v-model="formAdd.telephone" placeholder="电话">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="手机号">
                            <Input type="text" v-model="formAdd.mobile" placeholder="请输入手机号">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="传真">
                            <Input type="text" v-model="formAdd.faxNumber" placeholder="请输入传真">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="邮箱">
                            <Input type="text" v-model="formAdd.email" placeholder="请输入邮箱">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="身份证">
                            <Input type="text" v-model="formAdd.idNumber" placeholder="请输入身份证">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="头像">
                            <Upload
                            :action="uploadUrl"
                            :show-upload-list="false"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="2048"
                            :on-format-error="handleFormatError"
                            :on-exceeded-size="handleMaxSize"
                            :headers="fileHeaders"
                            class="avatar-uploader"
                            >
                            <img v-if="formAdd.iconUrl" :src="formAdd.iconUrl" class="avatar"/>
                            <i v-else class="icon iconiconjia iconfont"></i>
                            </Upload>
                        </bingo-form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
        <bingo-modal-select
        ref="modalGroup"
        :title="'分配群组'"
        :datas="datasGroup"
        :show-input="false"
        :columns="selectColumnsGroup"
        :value="selectedGroups"
        :field="'nameCn'"
        :keyId="'sn'"
        @on-ok="onSelectOkGroup"
        @getData="getDataGroup">
                    <bingo-grid-item>
                        <bingo-form-item label="群组名称" prop="nameCn">
                            <Input v-model="groupArr.nameCn" placeholder=""/>
                        </bingo-form-item>
                    </bingo-grid-item>
        </bingo-modal-select>
        <bingo-modal-select
        ref="modal"
        :title="'分配角色'"
        :datas="datas"
        :show-input="false"
        :columns="selectColumns"
        :field="'nameCn'"
        :value="selectedRoles"
        :keyId="'sn'"
        @on-ok="onSelectOk"
        @getData="getData">
                    <bingo-grid-item>
                        <bingo-form-item label="角色名称" prop="nameCn">
                            <Input v-model="roleArr.nameCn" placeholder=""/>
                        </bingo-form-item>
                    </bingo-grid-item>
        </bingo-modal-select>
    </div>
</template>
<script>
    import bingoList from '@/components/bingo-list';
    import Api from '@/api/system/user';
    import roleApi from '@/api/system/role';
    import groupApi from '@/api/system/group';
    import rbacApi from '@/api/system/rbac'
    // import deptApi from '@/api/system/department';
    import positionApi from '@/api/system/position';
    import productApi from '@/api/platform/product';
    import dictApi from '@/api/platform/dict';
    import fileApi from '@/api/platform/file';
    import module from '@/mixins/module';
    import bingoModalSelect from '@/components/bingo-modal-select'
    import util from '@/utils/tool'
    import setting from '@/setting'
    import { mapState } from 'vuex'
    export default {
        name:'plat-user',
        data () {
            return {
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '用户名称',
                        key: 'nameCn',
                        width: 110
                    },
                    {
                        title: '账号',
                        key: 'account',
                        width: 130
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        width: 100
                    },
                    // {
                    //     title: '生日',
                    //     key: 'birthday',
                    //     width: 100
                    // },
                    // {
                    //     title: '电话',
                    //     key: 'telephone',
                    //     width: 100
                    // },
                    {
                        title: '手机号',
                        key: 'mobile',
                        width: 130
                    },
                    // {
                    //     title: '传真',
                    //     key: 'faxNumber',
                    //     width: 100
                    // },
                    {
                        title: '邮箱',
                        key: 'email',
                        width: 170
                    },
                    // {
                    //     title: '头像',
                    //     key: 'iconUrl',
                    //     width: 100
                    // },
                    // {
                    //     title: '身份证',
                    //     key: 'idNumber',
                    //     width: 100
                    // },
                    {
                        title: '创建人',
                        key: 'creator',
                        minWidth: 110

                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        minWidth: 120
                    },
                    {
                        title: '修改人',
                        key: 'modifier',
                        minWidth: 110
                    },
                    {
                        title: '修改时间',
                        key: 'modifyTime',
                        minWidth: 120
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        width: 200
                    }
                ],
                Api: Api,
                pageSetting: {
                    pageNum: 1,
                    pageSize: 20,
                    showSizer: true
                },
                // 搜索的字段
                searchList: [
                    {
                        label: '账号',
                        value: 'account',
                        type: 'input'
                    },
                    {
                        label: '用户名称',
                        value: 'nameCn',
                        type: 'input'
                    },
                    {
                        label: '性别',
                        value: 'sex',
                        type: 'input'
                    },
                    {
                        label: '生日',
                        value: 'birthday',
                        type: 'input'
                    },
                    {
                        label: '电话',
                        value: 'telephone',
                        type: 'input'
                    },
                    {
                        label: '手机号',
                        value: 'mobile',
                        type: 'input'
                    },
                    {
                        label: '传真',
                        value: 'faxNumber',
                        type: 'input'
                    },
                    {
                        label: '邮箱',
                        value: 'email',
                        type: 'input'
                    },
                    {
                        label: '头像',
                        value: 'iconUrl',
                        type: 'input'
                    },
                    {
                        label: '身份证',
                        value: 'idNumber',
                        type: 'input'
                    }
                ],
                tableData: [],
                queryData: {
                    account: '',
                    birthday: '',
                    email: '',
                    faxNumber: '',
                    iconUrl: '',
                    idNumber: '',
                    mobile: '',
                    nameCn: '',
                    nameDe: '',
                    nameEn: '',
                    password: '',
                    salt: '',
                    sex: '',
                    sn: '',
                    telephone: ''
                },
                queryObj: {},
                isShowNewForm: false,
                formAdd: {
                    account: '',
                    birthday: '',
                    email: '',
                    faxNumber: '',
                    iconUrl: '',
                    idNumber: '',
                    mobile: '',
                    nameCn: '',
                    nameDe: '',
                    nameEn: '',
                    password: '',
                    salt: '',
                    prodSn: '',
                    sex: '',
                    sn: '',
                    telephone: ''
                },
                grid: {
                    xl: 12,
                    lg: 13,
                    md: 13,
                    sm: 24,
                    xs: 24
                },
                isAdd: true,
                datas: [],
                datasGroup: [],
                selectColumns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '角色名称',
                        key: 'nameCn'
                    }
                ],
                selectColumnsGroup: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '群组名称',
                        key: 'nameCn'
                    }
                ],
                roleArr: {
                    nameCn: ''
                },
                groupArr: {
                    nameCn: ''
                },
                row: {},
                selectedRoles: [],
                selectedGroups: [],
                isTable: 'normal',
                sexList: [],
                auth: {},
                deptList: [],
                positionList: [],
                productList: [],
                uploadUrl: setting.apiBaseURL + fileApi.uploadUrl,
                fileHeaders: {}
            };
        },
        computed: {
            ...mapState('admin/user', [
                'info'
            ])
        },
        created () {
            // this.getAuth();
            this.auth = JSON.parse(localStorage.getItem('auth'));
            // this.getDeptList();
            this.fileHeaders = this.getHeaders();
        },
        mixins: [module],
        methods: {
            // 获取权限
            // async getAuth () {
            //     let auth = await this.getPermission();
            //     this.auth = JSON.parse(JSON.stringify(auth));
            // },
            // 上传成功
            handleSuccess (res, file) {
                this.formAdd.iconUrl = res.data;
            },
            // 上传格式错误警告
            handleFormatError (file) {
                this.$Message.error('文件格式不正确，请选择jpg或png');
            },
            // 上传尺寸错误警告
            handleMaxSize (file) {
                this.$Message.error('文件太大，不能超过2M');
            },
            // 部门列表
            // getDeptList () {
            //     deptApi.tableList().then(res => {
            //         this.orgList = res;
            //     })
            // },
            // 职位列表
            getPositionList () {
                return new Promise(function (resolve, reject) {
                    positionApi.tableList().then(res => {
                        resolve(res.rows);
                    })
                })
            },
            // 产品列表
            getProductList () {
                return new Promise(function (resolve, reject) {
                    productApi.tableList().then(res => {
                        resolve(res.rows);
                    })
                })
            },
            // 性别
            getSexList () {
                let data = {
                    dictGroup: 'platform',
                    dictType: 'sex'
                }
                return new Promise(function (resolve, reject) {
                    dictApi.tableList(data).then(res => {
                        resolve(res.rows);
                    })
                })
            },
            // 弹出层查询
            querySubmit (obj) {
                if (obj) {
                    this.queryObj = obj;
                }
                this.$refs.bingoList.getTableData(this.queryObj);
            },
            // 分配角色
            allot (row) {
                this.row = row;
                let data = { sn: row.sn }
                roleApi.getRolesByUser(data).then(res => {
                    if (res.rows.length > 0) {
                        this.selectedRoles = res.rows.filter(item => item.isCheck === 1);
                    }
                    this.getData();
                })
            },
            // 获取角色列表
            getData () {
                let data = this.roleArr;
                roleApi.tableList(data).then(res => {
                    this.datas = res.rows;
                    this.$refs.modal.show = true;
                })
            },
            // 分配群组
            allotGroup (row) {
                this.row = row;
                let data = { sn: row.sn }
                groupApi.getGroupsByUser(data).then(res => {
                    if (res.rows.length > 0) {
                        this.selectedGroups = res.rows.filter(item => item.isCheck === 1);
                    }
                    this.getDataGroup();
                })
            },
            // 获取群组列表
            getDataGroup () {
                let data = this.groupArr;
                groupApi.tableList(data).then(res => {
                    this.datasGroup = res.rows;
                    this.$refs.modalGroup.show = true;
                })
            },
            // 新建
            async onAddNew () {
                this.isAdd = true;
                for (let i in this.formAdd) {
                    if (Array.isArray(this.formAdd[i])) {
                        this.formAdd[i] = [];
                    } else {
                        this.formAdd[i] = '';
                    }
                }
                this.formAdd.sn = await this.getSn();
                if (this.positionList.length === 0) {
                    this.positionList = await this.getPositionList();
                }
                if (this.sexList.length === 0) {
                    this.sexList = await this.getSexList();
                }
                if (this.productList.length === 0) {
                    this.productList = await this.getProductList();
                }
                this.isShowNewForm = true;
            },
            // 新建确定
            onOk () {
                if (this.isAdd) {
                    Api.addTable(this.formAdd).then(res => {
                        this.$Message.success('新建成功');
                        this.$refs.bingoList.getTableData();
                    })
                } else {
                    Api.editTable(this.formAdd).then(res => {
                        this.$Message.success('修改成功');
                        this.$refs.bingoList.getTableData();
                    })
                }
            },
            // 编辑
            async onEditBtn (id) {
                this.isAdd = false;
                if (this.positionList.length === 0) {
                    this.positionList = await this.getPositionList();
                }
                if (this.sexList.length === 0) {
                    this.sexList = await this.getSexList();
                }
                if (this.productList.length === 0) {
                    this.productList = await this.getProductList();
                }
                Api.getTableById(id).then(res => {
                    this.formAdd = res;
                    this.isShowNewForm = true;
                })
            },
            // 选角色
            onSelectOk (areaData) {
                let roleSns = [];
                if (areaData.length > 0) {
                    roleSns = areaData.map(item => item.sn);
                }
                let data = {
                    roleSns: roleSns,
                    sn: this.row.sn
                }
                rbacApi.userRoles(data).then(res => {
                    this.$Message.success('分配角色成功');
                })
            },
            // 选群组
            onSelectOkGroup (areaData) {
                let groupSns = [];
                if (areaData.length > 0) {
                    groupSns = areaData.map(item => item.sn);
                }
                let data = {
                    groupSns: groupSns,
                    sn: this.row.sn
                }
                rbacApi.userGroups(data).then(res => {
                    this.$Message.success('分配群组成功');
                })
            },
            // 处理数据
            processData (data) {
                data.forEach(item => {
                    if (item.createTime) {
                        item.createTime = util.format(new Date(item.createTime), 'yyyy-MM-dd');
                    }
                    if (item.modifyTime) {
                        item.modifyTime = util.format(new Date(item.modifyTime), 'yyyy-MM-dd')
                    }
                });
            }
        },
        components: { bingoList, bingoModalSelect }
    };
</script>
