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

		<div class="mui-content vongi-fx-dat">
			<div class="vongi-fx-dattop">
				<div class="vongi-fx-card">
					<h1>{{detail.name}} {{detail.sex=='1'?'男':'女'}}</h1>
					<h4 class="flew-items"><span class="iconfont icon-shouji"></span>{{detail.phone}}</h4>
					<h4 class="flew-items"><span class="iconfont icon-zhengjian"></span>{{detail.idCard}}</h4>
					<h4 class=""><span class="iconfont icon-shouye"></span>{{liveRegionIdName}} {{detail.liveDetailAddress}}</h4>
				</div>
				<a @click="tel(detail.phone)">
					<span class="iconfont icon-dianhua3"></span>
					<div class="mui-media-body">拨打电话</div>
				</a>
			</div>
			<div class="mui-content-padded vongi-editme vongi-qingjiadt">
				<form class="mui-input-group">
					<div class="mui-input-row ">
						<label style="width:35%">返乡类型</label>
						<span style="width:65%" v-text="typeName"></span>
					</div>
					<div class="mui-input-row">
						<label>始发地</label>
						<span class="vongi-span" v-text="originIdName+detail.originDetailAddress"></span>
					</div>
					<div class="mui-input-row">
						<label>途径地</label>
						<span class="vongi-span" v-text="detail.avenuePlace"></span>
					</div>
					<div class="mui-input-row">
						<label>返乡乘坐交通工具情况</label>
						<span class="vongi-span" v-text="detail.vehicle"></span>
					</div>
					<div class="mui-input-row">
						<label style="width:70%">返乡时间（已到/预计）</label>
						<span style="width:30%" v-text="detail.arriveTime"></span>
					</div>
					<div class="mui-input-row ">
						<label style="width:70%">是否有7日内核酸检测阴性证明</label>
						<span style="width:30%" v-text="detail.haveCheck?'是':'否'"></span>
					</div>
					<div v-if="detail.remark" class="mui-input-row">
						<label>备注</label>
						<span class="vongi-span" v-text="detail.remark"></span>
					</div>
				</form>
			</div>
			<div v-if="detail.checkImageUrl || detail.travelImageUrl || detail.healthCodeUrl" class="mui-content-padded vongi-fx-datpot">
				<h4>相关证明图片</h4>
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li v-if="detail.checkImageUrl" class="mui-table-view-cell mui-media mui-col-xs-4">
						<a>
							<div class="mui-media-object">
								<img :src="detail.checkImageUrl">
							</div>
							<div class="mui-media-body">7日内核酸检测阴性证明</div>
						</a>
					</li>
					<li v-if="detail.travelImageUrl" class="mui-table-view-cell mui-media mui-col-xs-4">
						<a>
							<div class="mui-media-object">
								<img :src="detail.travelImageUrl">
							</div>
							<div class="mui-media-body">“行程卡”截图</div>
						</a>
					</li>
					<li v-if="detail.healthCodeUrl" class="mui-table-view-cell mui-media mui-col-xs-4">
						<a>
							<div class="mui-media-object">
								<img :src="detail.healthCodeUrl">
							</div>
							<div class="mui-media-body">本人健康码截图</div>
						</a>
					</li>
				</ul>
			</div>
		</div>

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

<script>
	import * as API_return from '@/apis/Other/return'
	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: 'OtherReturnInfo',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '返乡人员登记详情',

				id: this.$route.query.id,

				detail: {},

				typeList: [{
						value: '1',
						text: '境外返乡',
						dec: '',
					},
					{
						value: '2',
						text: '国内中高风险地区',
						dec: '',
					},
					{
						value: '3',
						text: '省内从事冷链行业',
						dec: '注：包含进口冷链食品从业人员、口岸直接接触进口货物从业人员、隔离场所工作人员、交通运输工具从业人员等重点人群。',
					},
					{
						value: '4',
						text: '其他',
						dec: '',
					},
				],

				liveRegionIdList: [],
				originIdList: [],
			}
		},
		created() {},
		methods: {
			//获取详情
			getInfo() {
				this.isLoading = true;
				API_return.commissionerReturnInfoDetail(this.id).then(response => {
					this.isLoading = false;

					this.detail = response;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取地区列表
			getregionList(name, fun) {
				this.isLoading = true;
				API_return.regionList(name).then(response => {
					this.isLoading = false;

					fun(response.list)
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//播打电话
			tel(phone) {
				window.top.location.href = 'tel:' + phone;
			},
			asynCallBack() {
				//获取详情
				this.getInfo();
				var _this = this;
				//获取居住地
				this.getregionList('1', function(list) {
					_this.liveRegionIdList = list;
				})
				//获取始发地
				this.getregionList('2', function(list) {
					_this.originIdList = list;
				})
			},
		},
		mounted() {

		},
		destroyed() {},
		computed: {
			liveRegionIdName: function() {
				var nameArr = [];
				for (var i = 0; i < this.liveRegionIdList.length; i++) {
					nameArr[0] = this.liveRegionIdList[i]['text'];
					if (this.liveRegionIdList[i]['value'] == this.detail.liveRegionId) {
						//return this.liveRegionIdList[i]['text'];
						return nameArr.join('/');
					}
					for (var j = 0; j < this.liveRegionIdList[i]['children'].length; j++) {
						nameArr[1] = this.liveRegionIdList[i]['children'][j]['text'];
						if (this.liveRegionIdList[i]['children'][j]['value'] == this.detail.liveRegionId) {
							//return this.liveRegionIdList[i]['children'][j]['text'];
							return nameArr.join('/');
						}
						for (var s = 0; s < this.liveRegionIdList[i]['children'][j]['children'].length; s++) {
							nameArr[2] = this.liveRegionIdList[i]['children'][j]['children'][s]['text'];
							if (this.liveRegionIdList[i]['children'][j]['children'][s]['value'] == this.detail.liveRegionId) {
								//return this.liveRegionIdList[i]['children'][j]['children'][s]['text'];
								return nameArr.join('/');
							}
						}
					}
				}
				return '';
			},
			originIdName: function() {
				var nameArr = [];
				for (var i = 0; i < this.originIdList.length; i++) {
					nameArr[0] = this.originIdList[i]['text'];
					if (this.originIdList[i]['value'] == this.detail.originId) {
						//return this.originIdList[i]['text'];
						return nameArr.join('/');
					}
					for (var j = 0; j < this.originIdList[i]['children'].length; j++) {
						nameArr[1] = this.originIdList[i]['children'][j]['text'];
						if (this.originIdList[i]['children'][j]['value'] == this.detail.originId) {
							//return this.originIdList[i]['children'][j]['text'];
							return nameArr.join('/');
						}
						for (var s = 0; s < this.originIdList[i]['children'][j]['children'].length; s++) {
							nameArr[2] = this.originIdList[i]['children'][j]['children'][s]['text'];
							if (this.originIdList[i]['children'][j]['children'][s]['value'] == this.detail.originId) {
								//return this.originIdList[i]['children'][j]['children'][s]['text'];
								return nameArr.join('/');
							}
						}
					}
				}
				return '';
			},
			typeName: function() {
				for (var i = 0; i < this.typeList.length; i++) {
					if (this.typeList[i]['value'] == this.detail.type) {
						return this.typeList[i]['text'];
					}
				}
				return '';
			},
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				menu_list: 'menu_list',
				common_menu_list: 'common_menu_list',
			})
		}
	}
</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>
