<template>
	<div class="app-container">
		<el-row>
			<el-col style=" box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) ;padding:30px" :xs="24" :sm="24" :md="24"
				:lg="24" :xl="24">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="10" style="padding-right: 10px;" v-if="role===2">
					<el-form ref="form" :model="form" label-width="120px">
						<el-form-item label="" style="border-bottom:1px solid #F4F4F4">
							<span slot="label">
								<span style="color:#262626;">供应商个人信息</span>
							</span>
						</el-form-item>
						<el-form-item label="供应商" :rules="[{  message: '姓名不能为空不能为空'}]">
							<el-input v-model="form.name" class="ipwidth" />
						</el-form-item>
						<el-form-item label="社会信用代码" :rules="[{ message: '电话号码不能为空'}]">
							<el-input v-model="form.socialCode" class="ipwidth" />
						</el-form-item>
						<el-form-item label="法人姓名" :rules="[{  message: '身份证不能为空'}]">
							<el-input v-model="form.legalPerson" class="ipwidth" />
						</el-form-item>
						<el-form-item label="联系人" :rules="[{  message: '身份证不能为空'}]">
							<el-input v-model="form.contacts" class="ipwidth" />
						</el-form-item>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="10" style="padding-left: 30px;" v-if="role===2">
					<el-form ref="form" :model="form" label-width="120px">
						<el-form-item label="" style="border-bottom:1px solid #F4F4F4">
							<span slot="label">
								<span style="color:#262626;">其他信息</span>
							</span>
						</el-form-item>
						<el-form-item label="联系电话">
							<el-input v-model="form.contactsMobile" class="ipwidth" />
						</el-form-item>
						<el-form-item label="账号">
							<el-input v-model="form.account" class="ipwidth" />
						</el-form-item>
						<el-collapse v-model="activeNames" @change="handleChange" style="width: 80%;float: right;">
							<el-collapse-item title="认证照片" name="3">
								<div>
									<el-image style="width: 100px; height: 100px" :src="form.identifyPicList"
										:preview-src-list="form.identifyPicList">
									</el-image>
								</div>
							</el-collapse-item>
							<el-collapse-item title="授权委托书" name="4">
								<div>
									<el-image style="width: 100px; height: 100px" :src="form.proxyFileList"
										:preview-src-list="form.proxyFileList">
									</el-image>
								</div>
							</el-collapse-item>
							<el-collapse-item title="修改密码" name="5">
								<el-input v-model="oldPassword" placeholder="请输入旧密码"></el-input>
								<el-input v-model="newPassword" placeholder="请输入新密码"></el-input>
								<el-button type="primary" @click="onSubmit">确认修改</el-button>
							</el-collapse-item>
						</el-collapse>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="10" style="padding-right: 10px;" v-if="role===1">
					<el-form ref="form" :model="form" label-width="140px">
						<el-form-item label="" style="border-bottom:1px solid #F4F4F4">
							<span slot="label">
								<span style="color:#262626;">业务管理员个人信息</span>
							</span>
						</el-form-item>
						<el-form-item label="姓名" :rules="[{  message: '姓名不能为空不能为空'}]">
							<el-input v-model="form.name" class="ipwidth" />
						</el-form-item>
						<el-form-item label="账号" :rules="[{ message: '账号不能为空'}]">
							<el-input v-model="form.account" class="ipwidth" />
						</el-form-item>
						<el-form-item label="联系电话" :rules="[{  message: '联系电话不能为空'}]">
							<el-input v-model="form.contactsMobile" class="ipwidth" />
						</el-form-item>
					</el-form>
					<el-collapse v-model="activeNames" @change="handleChange" style="width: 90%;float: right;">
						<el-collapse-item title="修改密码" name="1">
							<el-input v-model="oldPassword" placeholder="请输入旧密码"></el-input>
							<el-input v-model="newPassword" placeholder="请输入新密码"></el-input>
							<el-button type="primary" @click="onSubmit">确认修改</el-button>
						</el-collapse-item>
						<el-collapse-item title="忘记密码">
							<div>请联系系统管理员</div>
						</el-collapse-item>
					</el-collapse>
				</el-col>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	let that
	export default {
		data() {
			return {
				role: '',
				id: '',
				resource: '',
				radio: '1',
				activeNames: '',
				form: {},
				oldPassword: '',
				newPassword: ''
			}
		},
		mounted() {
			this.role = this.$store.state.user.userInfo.type
			console.log(this.$store.state.user.userInfo)
			this.id=this.$store.state.user.userInfo.id
			if (this.role === 2) {
				this.$request({
					url: '/api/Supplier/'+this.id,
					method: 'get'
				}).then((res) => {
					this.form=res.data
					console.log(res)
				})
			} else if (this.role === 1) {
				this.$request({
					url: '/api/Account',
					method: 'get'
				}).then((res) => {
					console.log(res)
					// this.form = res.data
				})
			}
		},
		methods: {
			handleChange() {

			},
			onSubmit() {
				if(this.role===2){
					this.$request({
						url: '/api/Supplier/password',
						method: 'post',
						data: {
							oldPassword: this.oldPassword,
							newPassword: this.newPassword
						}
					}).then((res) => {
						console.log(res)
						this.$message({
							type: 'success',
							message: '修改密码成功'
						})
					}).catch((err) => {
						console.log(err)
					})
				}else if(this.role===1){
					this.$request({
						url:'/api/Account/password',
						method:'post',
						data:{
							oldPassword: this.oldPassword,
							newPassword: this.newPassword
						}
					}).then((res)=>{
						this.$message({
							type: 'success',
							message: '修改密码成功'
						})
					})
				}
				
			},
			onCancel() {
				this.$message({
					message: 'cancel!',
					type: 'warning'
				})
			}
		}
	}
</script>

<style lang="scss">
	.line {
		text-align: center;
	}

	.ipwidth {
		width: 100%;
	}


	.el-radio__label {
		margin-left: 80px;
	}

	.el-collapse-item__header {
		font-weight: 600;
		color: #606266;
	}
</style>
