<template>
	<view class="user-edit" v-if="viewModel">
		<view class="user-edit_ul">
			<scroll-view class="user-edit_ul-scroll" scroll-x="true">
				<view class="user-edit_ul-scroll-box">
					<view class="user-edit_ul-scroll-li" v-for="(item, index) in tabList" :key="index" @click="tabClck(item), (tabIndex = index)">
						<text class="user-edit_ul-scroll-li_text" :class="{ 'user-edit_ul-scroll-li_activtext': tabIndex == index }">{{ item.name }}</text>
						<view class="user-edit_ul-scroll-li_line" :style="`width: ${750 / 4}rpx;`" :class="{ 'user-edit_ul-scroll-li_activline': tabIndex == index }"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="height: 100rpx;background-color: #F5F5F5;"></view>
		<view v-if="tabIndex==0">
			<essential-item :viewModel="viewModel"></essential-item>
		</view>
		<view v-else>
			<amend-item :userId="userId"></amend-item>
		</view>
	</view>
</template>
<script>
import ala from '@/service/ala';
import mixin from '@/service/mixins';
import essentialItem from './widget/essential-item';
import amendItem from './widget/amend-item';
export default {
	mixins: [mixin],
	components: {
		essentialItem,
		amendItem
	},
	props: {
		widget: {}
	},
	data() {
		return {
			viewModel: null,
			tabList: [{ name: '基本信息' }, { name: '修改密码' }],
			tabIndex: 0,
			userId: null
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		async init() {
			this.userId = ala.getId(this.widget.route)
			var data = {
				id: this.userId
			}
			var response = await ala.httpGet('api/UserAdmin/Edit', data)
			if (response) {
				this.viewModel = response
			}
		},
		tabClck(vInde) {
			this.tabIndex = vInde
		}
	}
};
</script>
<style lang="scss">
@import './var.scss';
</style>
