<template>
	<view class="organization-select">
		<view class="common-list">
			<view class="common-item" v-for="(item,index) in list" :key="item.id" @tap="select(item)">
				<view class="title">{{item.name}}</view>
				<view class="date">{{item.contact || '-'}}</view>
				<view class="space">{{!!item.address ? JSON.parse(item.address).join('-'):'-'}}</view>
				<view class="icon" v-if="organization.id === item.id">
					<uv-icon name="checkbox-mark" color="primary" size="60"></uv-icon>
				</view>
			</view>
		</view>
		<uv-modal ref="modal" title="WORKARK提示" :content='`是否切换至<${selectOrganization.name}>组织？`' :asyncClose="true"
			@confirm="confirm" :showCancelButton="true">
		</uv-modal>
	</view>
</template>

<script>
	import {
		selectWorkarkOrangaized,
		getWorkarkOrangaized
	} from '@/request/api/my.js'
	import {
		getUserInfo
	} from '@/request/api/login.js'
	export default {
		data() {
			return {
				list: [],
				organization: {},
				selectOrganization: {}
			}
		},
		onShow() {
			this.organization = this.$store.getters.organization;
		},
		onLoad() {
			this.init();
		},
		methods: {
			async init() {
				uni.showLoading();
				let organizationData = await getWorkarkOrangaized()
				if (organizationData.state) this.list = organizationData.data;
				uni.hideLoading();
			},
			async confirm() {
				uni.showLoading();
				let work = await selectWorkarkOrangaized(this.selectOrganization);
				if (!work.state) return this.$refs.modal.close();
				let userData = await getUserInfo();
				if (!userData.state) return this.$refs.modal.close();
				this.$store.dispatch('app/changeOrganization', userData.data.workarkOrganization);
				this.$store.dispatch('app/changeUser', userData.data);
				uni.setStorageSync('vuex_state', this.$store.state);
				uni.hideLoading();
				this.$toast('切换成功');
				this.$refs.modal.close();
				uni.navigateBack();
			},
			select(item) {
				if (this.organization.id === item.id) return;
				this.selectOrganization = item;
				this.$refs.modal.open();
			}
		}
	}
</script>

<style lang="scss">
	.organization-select {
		padding: 30rpx 0;

		.tag {
			display: flex;

			.status-tag {
				margin-left: 5px;
			}
		}
	}
</style>