<template>
	<view class="change-system-v">
		<view class="u-p-l-20 u-p-r-20 change-system-search">
			<u-search :placeholder="$t('app.apply.pleaseKeyword')" v-model="keyword" height="72" :show-action="false"
				@change="onSearchChange" bg-color="#f0f2f6" shape="square" style="width: 100%;">
			</u-search>
		</view>
		<view class="system-box u-m-t-20">
			<view class="system-container" v-if="systemList.length">
				<view class="item u-flex-col u-col-center" v-for="(item, i) in systemList" :key="i"
					@click="handelClick(item)">
					<text class="u-font-40 item-icon" :class="item.icon"
						:style="{ background: item.backgroundColor || '#008cff' }" />
					<text class="u-font-24 u-line-1 item-text"
						:style="{color:userInfo.systemId==item.id?'#008cff':''}">{{item.fullName}}</text>
				</view>
			</view>
			<JnpfEmpty v-else />
		</view>
	</view>
</template>

<script>
	import {
		getSystemList
	} from "@/api/system";
	import {
		setMajor,
	} from "@/api/common";
	export default {
		data() {
			return {
				keyword: '',
				systemList: [],
				userInfo: {}
			}
		},
		onShow() {
			this.keyword = ''
			this.getUserInfo()
			this.init()
		},
		methods: {
			onSearchChange(val) {
				this.init()
			},
			init() {
				getSystemList({
					keyword: this.keyword
				}).then(res => {
					this.systemList = res.data || []
				})
			},
			async getUserInfo() {
				this.userInfo = uni.getStorageSync('userInfo') || {}
			},
			handelClick(item) {
				if (item.id === this.userInfo.systemId) return
				let query = {
					majorId: item.id,
					majorType: "system",
					menuType: 1,
				};
				setMajor(query).then((res) => {
					this.$u.toast(res.msg);
					uni.setStorageSync('systemCode', item.enCode)
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 500)
				}).catch((err) => {
					this.$u.toast(err);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
		height: 100%;
	}

	.change-system-v {
		height: 100%;
		display: flex;
		flex-direction: column;

		.change-system-search {
			background-color: #fff;
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
		}

		.system-box {
			background-color: #fff;
		}

		.system-container {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			overflow: auto;
			padding-top: 20rpx;
		}

		.item {
			margin-bottom: 32rpx;
			width: 25%;

			.item-icon {
				width: 88rpx;
				height: 88rpx;
				margin-bottom: 8rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 30rpx;
				color: #fff;
				font-size: 40rpx;
			}

			.item-text {
				width: 100%;
				text-align: center;
				padding: 0 16rpx;
			}
		}
	}
</style>