/***********************************************************************
 * 目的: 统一平台注册过的用户平台激活
 * 作者: heyf@steerinfo.com
 * 创建日期: 2020-06-04
 *
 * 更新历史:
 * 日期                    人员                变更目的
 * 2020-06-04             修改人员名     修改的原因和目的*
**********************************************************************/
<template>
	<div class="user_active">
		<div class="searchArea">
			<el-input
                v-model="appCode"
                clearable
                placeholder="应用编码"
                size="small"
                style="width: 193px; margin: 0px 5px 15px 0px;"
            ></el-input>
			<el-button
                icon="el-icon-search"
                type="primary"
                size="mini"
                @click="search"
            >查询</el-button>
		</div>
		<div class="tableArea">
			<el-table
                ref="dataTable"
                @filter-change="filterChange"
                v-loading="dataTable.loading"
                border
                :height="dataTable.height"
                highlight-current-row
                :data="dataTable.list"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center">
                </el-table-column>
                <el-table-column
                    type="index"
                    label="序号"
                    fixed="left"
                    align="center"
                ></el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="userCode"
                    label="账户"
                    :filter-method="filterColumn"
                    align="center"
                    min-width="120"
                ></el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="userName"
                    label="姓名"
                    :filter-method="filterColumn"
                    align="center"
                    width="120"
                ></el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="mobile"
                    label="手机"
                    align="center"
                    min-width="120"
                ></el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="cardNo"
                    label="身份证"
                    align="center"
                    min-width="120"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    width="280"
                >
                    <template slot-scope="scope">
                    	<el-button
                            size="mini"
                            :disabled="scope.row.status === 1"
                            @click="handleCommand('active', scope.row)"
                            v-privilege="activeMenu + 'ACTIVE'"
                        >激活</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="foot-style">
                <el-pagination
                    @size-change="pageSizeChange"
                    @current-change="pageCurrentChange"
                    :current-page="dataTable.tableParams.form.pageNum"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="dataTable.tableParams.form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dataTable.tableParams.page.total"
                >
                </el-pagination>
            </div> -->
		</div>
		<div
            is='usersAddAndEdit'
            v-if="userEdit"
            :operate="operate"
            :appCode="appCode"
            :item="dataTable.item"
            :passcompanyId="companyId"
            @on-then="userModalThen"
        ></div>
	</div>
</template>

<script>
import usersAddAndEdit from './usersAddAndEdit.vue';
export default {
	components: {
        usersAddAndEdit
    },
	data () {
		return {
			activeMenu: '',
			appCode: 'icore-icp',
            companys: [], // 用户公司列表
            companyId: '', // 选择公司Id
            companyName: '', // 选择公司名称
			dataTable: {
                height: 600,
                loading: false,
                list: [
                	{
                		userId: '222',
                		userName: 'ggg',
                		userCode: 'ddd',
                		cardNo: '432334199809090909',
                		mobile: '13245677654'
                	}
                ],
                item: {},
                tableParams: {
                    form: {
                    	userName: '',
                        companyId: '',
                        pageNum: 1,
                        pageSize: 20
                    },
                    //  返回分页数据
                    page: {
                        total: 0
                    }
                }
            },
            operate: 'add',
            userEdit: false,

		}
	},
	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.getTableData(this.dataTable.tableParams.form);
        this.$nextTick(() => {
            //  设置table区域高度
            this.dataTable.height = this.getTableHeight(this.$refs['dataTable'].$el) - 90;
        });
    },
	methods: {
		// 计算table区域高度
		getTableHeight (dom) {
			return window.innerHeight - dom.offsetTop;
		},
		// 表格过滤
        filterChange (filters) {
            this.setFilterDatas(this.$refs.dataTable.columns, this.$refs.dataTable.tableData, ['userCode', 'userName']);
        },
		search () {
			this.getTableData(this.dataTable.tableParams.form);
		},
		getTableData (form) {
			this.dataTable.loading = true;
			this.axios.post('pass/v1/authservice/getUserNotActivated', {appCode: this.appCode}).then((res) => {
                if (res.code === '0') {
                	this.dataTable.list = res.data;
                	this.dataTable.tableParams.page.total = res.data.length;
                	// 设置过滤数据 setFilterDatas(列数组对象, 数据, 需要过滤的字段, 列名转义对象)
                    this.setFilterDatas(this.$refs.dataTable.columns, this.dataTable.list, ['userCode', 'userName']);

                	this.dataTable.loading = false;
                } else {
                    this.$message.error(res.message);
                }
            }).catch((err) => {
                console.log(err);
            })
		},
		// 每条页数
        pageSizeChange (pageSize) {
            this.noticeTable.tableParams.form.pageSize = pageSize;
            this.getTableData(this.dataTable.tableParams.form);
        },
        //当前页
        pageCurrentChange (pageNum) {
            this.noticeTable.tableParams.form.pageNum = pageNum;
            this.getTableData(this.dataTable.tableParams.form);
        },
		handleCommand (status, row) {
			let item = row ? JSON.parse(JSON.stringify(row)) : '';
			this.dataTable.item = row;
			this.userEdit = true;
		},
		//  弹窗完成
        userModalThen (str, item) {
            switch (str) {
                case 'close':
                    this.userEdit = false;
                    break;
                case 'success': // 信息完善后激活成功
                    this.userEdit = false;
                    this.$message.success('激活成功');
                    this.getTableData(this.dataTable.tableParams.form);
                    break;
            }
        }
	}
}
</script>

<style lang="less">
	.user_active {
		padding: 15px;
		.tableArea {
			.green {
			    color: #67C23A;
			}
			.red {
			    color: #F56C6C;
			}
		}
		/deep/ .el-dialog {
			min-width: 575px;
			backgroud-color: #dbe8f7;
		}
		/deep/ .el-dialog__header {
		    padding: 15px 20px 0px;
		}
		/deep/ .el-input-number.is-controls-right[class*=small] [class*=decrease] {
		    line-height: 17px;
		    height: 14px;
		}
		/deep/ .el-input-number.is-controls-right[class*=small] [class*=increase] {
			line-height: 14px;
			height: 14px;
		}
		.dialogMain {
			border: 1px solid #ccc;
			.dialogName {
			    width: 100%;
			    display: inline-flex;
			    // border-bottom: 1px solid #409eff;
			    .pwdImg {
			    	    width: 90px;
					    border: 1px solid #8eaebd;
					    background: #daedf7;
					    margin: 15px 25px;
			    }
			    .nameInput {
			    	margin: 15px 0px 10px;
			    }
			}
			.lineArea {
				.lineSpan {
					width: calc(50% - 28px);
				    height: 1px;
				    background: #ccc;
				    display: inline-block;  
				}
				.usualSpan {
					width: 49.3px;
				    display: inline-block;
				    text-align: center;
				}
			}
			.pwdSetArea {
				.left {
					margin-top: 15px;
					.el-checkbox {
						margin-left: 5px;
					}
					/deep/ .el-input--mini .el-input__inner {
					    height: 22px;
					    line-height: 22px;
					}
				}
				.right {
					margin-top: 15px;
					span {
						float: right;
						margin-right: 5px;
					}
				}
			}
			.uNameSetArea {
				.right {
					margin-top: 15px;
					span {
						float: right;
						margin: 0px 5px 5px 0px;
					}
				}
			}
			.preBruteForceSetArea {
				margin-bottom: 20px;
				.left {
					margin-top: 15px;
					span {
						margin-left: 5px;
					}
				}
				.right {
					margin-top: 15px;
					span {
						float: right;
						margin-right: 5px;
					}
				}
			}
		}
		.foot-style {
		    margin: 5px 0 0;
		    text-align: right;
		}
	}
</style>