<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-kqtj-center">
			<div class="vongi-jy-list">
				<div class="vongi-wordcard flew-items vongi-yuan-img68">
					<div class="mui-media-object mui-pull-left ">
						<img :src="detail.faceImagUrl" width="50" />
					</div>
					<div class="mui-media-body">
						<h2 v-text="detail.personName"></h2>
						<p class='mui-ellipsis mui-h5'>{{detail.companyName}} {{detail.job?detail.job:detail.personRoleName}}</p>
					</div>
				</div>
			</div>
			<div class="margin10">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<!-- <a @click="selectStatus" > -->
						工作状态
						<div class="mui-pull-right colorf8b155" v-text="workStatusN"></div>
						<!-- </a> -->
					</li>
				</ul>
			</div>
			<div class="vongi-me-list">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a :href="'tel:'+detail.telephone">
							联系方式
							<span class="mui-pull-right">
								<span v-text="detail.telephone"></span>
								<span class="mui-icon mui-icon-phone color4fc5f7"></span>
							</span>
						</a>
					</li>
				</ul>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Company from '@/apis/Master/company'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'MasterCompanyOrganizationInfo',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '个人资料',

				subForm: {
					id: this.$route.query.id,
					workStatus: '',
				},

				detail: {},
				workStatusN: '',

				statusList: [{
						value: '1',
						text: '工作'
					},
					{
						value: '2',
						text: '外出'
					},
					{
						value: '3',
						text: '出差'
					},
					{
						value: '4',
						text: '休假'
					}
				],
			}
		},
		created() {},
		methods: {
			//获取详情
			getInfo() {
				this.isLoading = true;
				API_Company.getCompanyPersonInfo(this.subForm.id).then(response => {
					this.isLoading = false;

					this.detail = response.personInfo;
					this.workStatusN = this.detail.workStatusN;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//选择工作状态
			selectStatus() {
				var picker = new mui.PopPicker();
				picker.setData(this.statusList);
				var _this = this;
				picker.pickers[0].setSelectedValue(this.detail.workStatus);
				picker.show(function(selectItems) {
					_this.subForm.workStatus = selectItems[0].value;
					_this.workStatusN = selectItems[0].text;
					_this.setStatus();
				})
			},
			//设置工作状态
			setStatus() {
				this.isLoading = true;
				API_Company.setCompanyPersonStatus(this.subForm).then(response => {
					this.isLoading = false;

					mui.toast('设置成功');
					this.getInfo();
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {

			},
		},
		mounted() {
			this.getInfo();
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style>
</style>
