<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<!-- <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> -->
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
                    <el-input v-model="search.keyword" clearable :placeholder="$t('response.searchPlaceholder')">
                        <template #prepend>
                            <el-select v-model="search.queryType" style="width: 100px;">
                                <el-option :label="$t('user.userName')" value="0"></el-option>
                                <el-option :label="$t('user.phone')" value="3"></el-option>
                                <el-option :label="$t('user.email')" value="4"></el-option>
                                <el-option :label="$t('user.fullName')" value="5"></el-option>
                            </el-select>
                        </template>
                    </el-input>
                    <el-select v-model="search.queryState" :placeholder="$t('user.userStatusPlaceholder')" clearable style="width:250px;">
                        <el-option :label="$t('user.nonactivated')" value="Nonactivated"></el-option>
                        <el-option :label="$t('user.activated')" value="Activated"></el-option>
                    </el-select>
					<el-button type="primary" icon="el-icon-search" @click="getList "></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" stripe border>
				<el-table-column label="#" type="index" width="50" align="center"></el-table-column>
				<el-table-column :label="$t('user.userName')" prop="UserName" width="250" align="center" ></el-table-column>
				<el-table-column :label="$t('user.fullName')" prop="FullName" width="180" align="center" ></el-table-column>
				<el-table-column :label="$t('user.phone')" prop="Phone" width="150" align="center" ></el-table-column>
                <el-table-column :label="$t('user.email')" prop="Email" width="220" align="center" ></el-table-column>
                <el-table-column :label="$t('user.userStatus')" align="center" width="120" >
					<template #default="scope">
					    <span>{{ scope.row.UserState === 0 ? $t('user.nonactivated') : $t('user.activated') }}</span>
					</template>
				</el-table-column>
                <el-table-column :label="$t('user.authenticationState')" align="center" width="120">
					<template #default="scope">
					    <span>{{ applyState_string(scope.row.ApplyState) }}</span>
					</template>
				</el-table-column>
                <el-table-column :label="$t('menu.roleList')" prop="RoleName" width="120" align="center" ></el-table-column>
                <el-table-column :label="$t('user.registerTime')" align="center">
					<template #default="scope">
					    <span>{{ this.$TOOL.dateFormat(new Date(scope.row.CreateTime), 'yyyy-MM-dd hh:mm:ss') }}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('response.operateColumnTitle')" fixed="right" align="center" width="140">
					<template #default="scope">
                        <el-icon :size="30" :title="$t('edit')" color="#409EFC" class="tableOperateIcon" @click="table_edit(scope.row, scope.$index)"><sc-icon-operate-edit /></el-icon>
                        <el-icon :size="30" :style="visableTransfer(1, scope.row)" :title="$t('audit')" color="#409EFC" class="tableOperateIcon" @click="table_audit(scope.row, scope.$index)"><sc-icon-audit /></el-icon>
                        <el-icon :size="30" :style="visableTransfer(0, scope.row)" :title="$t('user.modifyPwd')" color="#409EFC" class="tableOperateIcon" @click="modifyPwd(scope.row, scope.$index)"><sc-icon-password /></el-icon>
						<!-- <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">{{$t('response.operateEditButton')}}</el-button> -->
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
    <modifyPwd-dialog v-if="dialog.modifyPwd" ref="modifyPwdDialog" @success="handleModifyPwdSuccess" @closed="dialog.modifyPwd=false"></modifyPwd-dialog>
	<audit-dialog v-if="dialog.audit" ref="auditDialog" @success="handleSaveSuccess" @closed="dialog.audit=false"></audit-dialog>
</template>

<script>
	import saveDialog from './saveUser'
    import modifyPwdDialog from './modifyUserPwd'
    import auditDialog from './userAudit'

	export default {
		name: 'userList',
		components: {
			saveDialog,
            modifyPwdDialog,
			auditDialog
		},
		data() {
			return {
				dialog: {
					save: false,
                    modifyPwd: false,
					audit: false,
				},
                listLoading: true,
				apiObj: this.$API.user.fetchUserList,
				search: {
                    queryType: '',
                    keyword: '',
                    queryState: '',
				},
			}
		},
		methods: {
			//修改密码
			modifyPwd(row){
				this.dialog.modifyPwd = true
				this.$nextTick(() => {
					this.$refs.modifyPwdDialog.open(row.UserCode);
				})
			},
			//编辑
			table_edit(row){
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('edit').setData(row)
				})
			},
			//审核页面
			table_audit(row){
				this.dialog.audit = true
				this.$nextTick(() => {
					this.$refs.auditDialog.open(row.UserCode)
				})
			},
			//搜索
			async getList(){
                this.$refs.table.upData(this.search)
			},
			dictionaryList_string(dictionaryList) {
				var dictionaryStr = ''
				for (var i = 0; i < dictionaryList.length; i++) {
					dictionaryStr += dictionaryList[i].Value + '/'
				}
				dictionaryStr = dictionaryStr.substring(0, dictionaryStr.length - 1)
				return dictionaryStr
			},
			//本地更新数据
			handleSaveSuccess(){
                this.$refs.table.refresh()
			},
            //修改密码
            handleModifyPwdSuccess(){
                //this.$refs.table.refresh()
			},
            //用户认证状态转换
            applyState_string(str) {
                if (str === 0) return this.$t('user.uncertified')
                if (str === 1) return this.$t('user.waitcertified')
                if (str === 2) return this.$t('user.rejected')
                if (str === 3) return this.$t('user.certified')
            },
            //根据类型控制按钮显示隐藏
            visableTransfer(type, row)
            {
                //类型0为密码
                if (type === 0)
                {
                    if (row.Phone !='' || row.Email !='')
                    {
                        return "display: none !important;"
                    }
                }
                else if (type === 1)
                {
                    if (row.ApplyState != 1)
                    {
                        return "display: none !important;"
                    }
                }
                return ""
            }
		}
	}
</script>

<style>
.tableOperateIcon{
	cursor:pointer;
	margin-left:5px;
}
</style>
