<template>
	<view class="hasfixedbottom">
		<view class="mainbox">
			<uni-forms>
				<uni-forms-item label="单位名称">
					<view class="lh35 noborder">{{form.baseName}}</view>
				</uni-forms-item>
				<uni-forms-item label="单位类型">
					<uni-data-select v-if="!type&&edit" v-model="form.type" :localdata="range"></uni-data-select>
					<view class="lh35 noborder" v-else>
						<text v-if="form.type==1">企业 </text>
						<text v-if="form.type==2">国家组织 </text>
						<text v-if="form.type==3">社会组织 </text>
						<text v-if="form.type==4">其他 </text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="联系人">
					<uni-easyinput v-if="edit" v-model="form.contact"></uni-easyinput>
					<view v-else class="lh35">{{form.contact}}</view>
				</uni-forms-item>
				<uni-forms-item label="联系电话">
					<uni-easyinput v-if="edit" v-model="form.phone"></uni-easyinput>
					<view v-else class="lh35">{{form.phone}}</view>
				</uni-forms-item>

				<uni-forms-item label="地址">
					<uni-data-picker :readonly="!edit" :clear-icon="false" v-if="form.siteRegionId"
						v-model="form.siteRegionId" :localdata="options" @change="onchangeRegionId">
					</uni-data-picker>
					<uni-data-picker :readonly="!edit" :clear-icon="false" v-else-if="form.siteCityId"
						v-model="form.siteCityId" :localdata="options" @change="onchangeRegionId">
					</uni-data-picker>
					<uni-data-picker :readonly="!edit" :clear-icon="false" v-else-if="form.siteProvinceId"
						v-model="form.siteProvinceId" :localdata="options" @change="onchangeRegionId">
					</uni-data-picker>
				</uni-forms-item>

				<uni-forms-item label="详细地址">
					<uni-easyinput v-if="edit" type="textarea" v-model="form.siteAddress"></uni-easyinput>
					<view v-else class="lh35">{{form.siteAddress}}</view>
				</uni-forms-item>

				<uni-forms-item label="机构介绍">
					<uni-easyinput v-if="edit" type="textarea" v-model="form.introduce"></uni-easyinput>
					<view v-else class="lh35">{{form.introduce}}</view>
				</uni-forms-item>


			</uni-forms>
		</view>
		<view class="height1"></view>

		<view class="fixedBottom" v-if="edit">
			<button class="btn-red-kx" @click="cancel">取消</button>
			<button class="btn-red" style="width: 50%;" @click="save">保存</button>
		</view>
		<view class="fixedBottom" v-else>
			<button class="btn-red" @click="edit=true">编辑</button>
		</view>

	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import _ from 'underscore'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const app = getApp()
	const form = ref({
	})
	const options = ref([])
	const range = ref([{
		text: '企业',
		value: '1'
	}, {
		text: '国家组织',
		value: '2'
	}, {
		text: '社会组织',
		value: '3'
	}, {
		text: '其他',
		value: '4'
	}])
	const edit = ref(false)
	const type = ref()
	const authenticationStatusa = ref()
	onLoad(option => {
		console.log(option)
		init()
	})

	function init() {
		api.getMyOwnMemberInfo().then(res => {
			form.value = res.data.memberInfo
			authenticationStatusa.value = res.data.authenticationStatus
			if (res.data.authenticationStatus != 0 && res.data.authenticationStatus != 3) {
				type.value = true
			} else {
				type.value = false
			}
		})
		getRegionsList()
	}
	function cancel(){
		edit.value = false
		init()
	}
	function save() {
		api.createMyMember(form.value).then(res=>{
			uni.showToast({
				icon:'none',title:`保存成功`
			})
			edit.value = false
		})
	}

	function getRegionsList() {
		api.regionsList().then(res => {
			options.value = res.data;
		});
	}

	function onchangeRegionId(e) {
		form.value.regionId = regionArr.value
	}
</script>

<style scoped lang="scss">
	.lh35 {
		line-height: 35px;    min-height: 35px;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		padding: 0 30rpx;

		&.noborder {
			border: none;
		}
	}

	:deep(.uni-data-tree) {
		border: 1px solid #dcdfe6;
		border-radius: 4px;

		.selected-list {
			justify-content: start;
			font-size: 28rpx;
		}
	}

	.height1 {
		height: 1rpx
	}

	.ylImage {
		width: 300rpx;
		height: 200rpx;
		display: block;
		box-shadow: 0 0 10rpx #ddd;
		border-radius: 8rpx;
	}

	.mainbox {
		margin: 30rpx 25rpx 60rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 15rpx;

		:deep(.uni-forms-item__content-title) {
			color: #4C5359;
			font-size: 30rpx;
			font-weight: 300;
		}

		:deep(.uni-forms-item__extra-text) {
			color: #000;
			font-size: 30rpx;
		}
	}

	.photobox {
		position: relative;
		margin: 30rpx auto;

		.photo {
			width: 210rpx;
			height: 280rpx;
			background-color: #f4f4f4;
			display: block;
			margin: auto;
		}
	}

	.colorful {
		background-color: #007BDA;
		width: 200rpx;
		margin: auto;
		height: 200rpx;
		line-height: 200rpx;
		font-size: 44rpx;
		color: #fff;
		text-align: center;
		border-radius: 50%;
	}

	:deep(.uni-forms-item__extra) {
		width: 60%;
	}

	.photoBook {
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
		}

		text {
			position: absolute;
			z-index: 1;
			font-size: 24rpx;
			color: #fff;
			bottom: 4rpx;
			right: 8rpx;
		}
	}
</style>