<template>
    <div style="margin-top: 20px;margin-left: 20px">
        <template>
            <Row style="background-color: #F7F8FA;line-height: 80px;">
                <span style="margin-left: 20px">账户名</span>
                <i-input placeholder="搜索用户名/账户" style="width: 10%;margin-left: 10px;" v-model="searchContent"/>
                <span style=";margin-left: 20px;">角色</span>
                <Select filterable placeholder="请选择角色" v-model="changeRoleId" class="left-15"
                        style="width:190px;margin-left: 10px;">
                    <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
                <span style=";margin-left: 20px;">店铺</span>
                <Select filterable placeholder="请选择店铺" v-model="changeShopId" class="left-15"
                        style="width:190px;margin-left: 10px;">
                    <Option v-for="item in shopList" :value="item.id" :key="item.name">{{ item.name }}</Option>
                </Select>
                <Button type="primary" style="margin-left: 30px" @click="listAccountInfoFunction">查询</Button>
                <Button type="primary" style="margin-bottom: 20px;margin-right: 20px;float:right;margin-top: 25px"
                        @click="addOneAccount()">+添加账户
                </Button>
                <Button type="primary" ghost style="margin-bottom: 20px;margin-right: 20px;float:right;margin-top: 25px"
                        @click="uploadAccount">批量导入账户
                </Button>
            </Row>
        </template>
        <Table :columns="columns1" :data="data1" style="margin-top: 30px"></Table>
        <Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
              placement="top" style="float: right;margin-top: 20px"  @on-change="handlePage"></Page>
        <Modal
                v-model="modal13"
                title="删除提示"
                @on-cancel="cancel" align="center">
            <p style="margin-top: 20px;margin-bottom: 20px">确定要删除此账户吗？删除后不可恢复</p>
            <div slot="footer" style="text-align: center;margin-bottom: 10px;margin-top: 10px">
                <Button style="width: 100px;" @click="modal13 = false">取消删除</Button>
                <Button type="error" style="width: 100px;margin-left: 20px" @click="ok">确认删除</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import accountManagement from "../../services/account/AccountManagement";

    export default {
        data() {
            return {
                modal13: false,
                roleList: [
                    {
                        id: '1',
                        name: '系统管理员',
                    },
                    {
                        id: '2',
                        name: '运营人员',
                    },
                    {
                        id: '3',
                        name: '店长',
                    },
                    {
                        id: '4',
                        name: '导购',
                    },
                ],
                shopList: [
                    {
                        shopId: '1',
                        shopName: '店铺1',
                    },
                    {
                        shopId: '2',
                        shopName: '店铺2',
                    },
                ],
                columns1: [
                    {
                        type: 'index',
                        width: 80,
                        title: "序号",
                        align: 'center'
                    },
                    {
                        title: '用户名',
                        key: 'userName',
                        width: '150px'
                    },
                    {
                        title: '系统账号',
                        key: 'account',
                        width: '150px',
                    },
                    {
                        title: '系统角色',
                        key: 'roleName',
                        width: '150px'
                    },
                    {
                        title: '可见店铺',
                        key: 'shopName',
                        width: '200px'
                    },
                    {
                        title: '操作',
                        key: 'operation',
                        render: (h, params) => {
                            let that = this;
                            return h('div', [
                                h('span', {
                                    style: {
                                        background: 'white',
                                        border: '0',
                                        color: '#3496EB',
                                        marginRight: '15px',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({
                                                path: '/account/management/modify',
                                                query: {
                                                    accountId: params.row.accountId,
                                                    userId: params.row.userId,
                                                    userName: params.row.userName,
                                                    account: params.row.account,
                                                    password: params.row.password,
                                                    confirmPassword: params.row.confirmPassword,
                                                    roleId: params.row.roleId,
                                                    roleCode: params.row.roleCode,
                                                    shopId: params.row.shopId,
                                                }
                                            });
                                        }
                                    }
                                }, '修改'),
                                h('span', {
                                    style: {
                                        background: 'white',
                                        border: '0',
                                        color: 'red',
                                        marginRight: '15px',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            that.modal13 = true;
                                            that.updateAccountId = that.data1[params.index].accountId;
                                            that.updateUserId = that.data1[params.index].userId;
                                        }
                                    }
                                }, '删除')
                            ])

                        }
                    },
                ],
                data1: [
                    {
                        userName: "何永东",
                        userCode: "7833",
                        roleName: "系统管理员",
                        shopName: "全部",
                    }
                ],
                roleId: '',
                shopId: '',
                //分页内容
                totalSize: 0,
                pageNum: 1,
                pageSize: 10,
                //搜索内容
                searchContent: null,
                changeShopId: null,
                changeRoleId: null,
                updateAccountId: 0,
                updateUserId: 0,
                item: null,
            }
        },
        mounted: function () {
            this.listRoleInfo();
            this.listOfShop();
            if (this.$route.query != null) {
                this.item = this.$route.query;
                //别的页面跳转过来
                this.changeRoleId = this.item.id;
                this.bus.$emit('callBack');
            }
            this.listAccountInfoFunction();
        },
        methods: {
            //切页处理
            handlePage: function (value) {
                this.pageNum = value;
                this.listAccountInfoFunction();
            },
            //添加单个账户
            addOneAccount() {
                this.$router.push({
                    path: '/account/management/add',
                });
            },
            //导入账户
            uploadAccount() {
                this.$router.push({path: '/account/upload'});
            },
            //查询所有角色
            listRoleInfo() {
                let that = this;
                that.roleList = [];
                accountManagement.listRoleInfoApi({}, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询角色失败!");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            that.roleList.push(row);
                        }
                    }
                })
            },
            //查询所有店铺
            listOfShop() {
                let that = this;
                that.shopList = [];
                let request = {
                    userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                accountManagement.listAllShopApi(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询店铺失败!");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            that.shopList.push(row);
                        }
                    }
                })
            },
            //搜索账号内容
            listAccountInfoFunction: function () {
                let that = this;
                that.data1 = [];
                let request = {
                    searchContent: that.searchContent,
                    pageNum: that.pageNum,
                    pageSize: that.pageSize,
                    roleId: that.changeRoleId,
                    shopId: that.changeShopId
                };
                accountManagement.listAccountInfoApi(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("系统繁忙!");
                        return
                    }
                    if (data.code === '0000') {
                        debugger
                        if (data) {
                            let row = data.results.records;
                            that.totalSize = data.results.total;
                            for (let i = 0; i < row.length; i++) {
                                let entity = row[i];
                                if (!entity.channel) {
                                    entity.channel = '--';
                                }
                                if (!entity.account) {
                                    entity.account = '--';
                                }
                                if (!entity.userName) {
                                    entity.userName = '--';
                                }
                                if (!entity.roleName) {
                                    entity.roleName = '--';
                                }
                                if (!entity.shopName) {
                                    entity.shopName = '--';
                                }
                                that.data1.push(entity);
                            }
                            if (row === null || row.length === 0) {
                                that.totalSize = 0;
                            }
                        }
                    }
                })

            },
            //删除账号
            remove() {
                let that = this;
                let request = {
                    accountId: that.updateAccountId,
                    userId: that.updateUserId
                };
                accountManagement.removeAccountApi(request, function (data) {
                    if (data.data.code === '0001') {
                        that.$Message.info("删除失败");
                        return
                    }
                    if (data.data.code === '0000') {
                        that.$Message.info("删除成功");
                        that.pageNum = 1;
                        that.listAccountInfoFunction();
                    }
                })
            },
            cancel() {

            },
            ok() {
                this.modal13 = false;
                this.remove();
            }
        },

    }
</script>

<style scoped>

</style>
