<template>
	<div class="app-content">
		<!-- tabs -->
		<div class="tabs-wrap">
			<button class="admin-button-com" :class="[tabIndex == 1? 'blue' : '']" @click="changeTab(1)">密码设置</button>
			<button class="admin-button-com" :class="[tabIndex == 2? 'blue' : '']" @click="changeTab(2)">确认密码设置</button>
		</div>
		<!-- 输入框 - block -->
		<form @submit="formSubmit">
			<div class="input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false" v-if="isOldPass">
					<div class="tui-title">旧密码</div>
					<input placeholder-class="phcolor" v-model="form.old" class="tui-input" name="old" placeholder="首次设置不需要填写" maxlength="50" type="password" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">密码</div>
					<input placeholder-class="phcolor" v-model="form.new" class="tui-input" name="new" placeholder="防止别人登录，密码设复杂点" maxlength="50" type="password" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">确认密码</div>
					<input placeholder-class="phcolor" v-model="form.confirm" class="tui-input" name="confirm" placeholder="请输入确认密码" maxlength="50" type="password" />
				</tui-list-cell>
				<div class="btn-wrap">
					<button class="admin-button-com blue big" formType="submit">提交</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import TuiListCell from '@/components/plugin/list-cell'
const form = require('@/utils/formValidation.js')
// api
import { getSelfInfo } from '@/utils/auth'
import { updatePassword, updateConfirmPassword } from '@/api/login'
export default {
	name: 'password-setting',
	components: {
		TuiListCell
	},
	data() {
		return {
			tabIndex: 1,
			form: {
				old: '',
				new: '',
				confirm: ''
			},
			old: [{
				name: 'old',
				rule: ['required'],
				msg: ['请输入旧密码']
			}],
			rules: [
				{
					name: 'new',
					rule: ['required'],
					msg: ['请输入新密码']
				},
				{
					name: 'confirm',
					rule: ['required'],
					msg: ['请输入确认密码']
				}
			]
		}
	},
	computed: {
		...mapGetters({ selfInfo: 'getSelfInfo' }),
		isOldPass() {
			let status = this.selfInfo ? this.tabIndex == 1 ? this.selfInfo.password : this.selfInfo.confirmPassword : false
			return !!status
		}
	},
	onLoad() {
		getSelfInfo().then(res => {
		// 	console.log(res)
		// 	// if (res.) {}
		})
	},
	methods: {
		changeTab(index) {
			this.tabIndex = index
			this.form = {
				old: '',
				new: '',
				confirm: ''
			}
		},
		confirmFn() {
			if (!this.isOldPass) {
				delete this.form[old]
			}
			let hostFn = this.tabIndex == 1 ? updatePassword : updateConfirmPassword
			hostFn(this.form).then(res => {
				this.$msg('修改成功！')
				this.$util.pageTo({
					url: '/admin/home/workbench',
					type: 4
				})
			})
		},
		// 表单验证
		formSubmit(e) {
			// 表单规则
			let rules = this.isOldPass ? [...this.old, ...this.rules] : this.rules
			// 进行表单检查
			let formData = e.detail.value
			let checkRes = form.validation(formData, rules)
			// 验证通过!
			if (!checkRes) {
				this.confirmFn()
			} else {
				this.$msg(checkRes)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.tabs-wrap {
		width: calc(100% - 60px);
		padding: 20px 30px;
		.admin-button-com {
			width: 50%;
			padding-top: 16px;
			padding-bottom: 16px;
			&:first-child {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			&:last-child {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
		}
	}
	// 按钮
	.btn-wrap {
		width: calc(100% - 60px);
		margin: 60px 30px 0;
		.admin-button-com {
			width: 100%;
			margin: 0 auto;
		}
	}
</style>
