<template>
	<div class="DocumentSubmit">
		<div style="display: flex;justify-content: space-between;width: 100%;padding: 8px;">
			<div v-if="orgname" style="font-size: 14px; color: #277d7b;"><van-icon name="label" size="14" />{{orgname}}</div>
			<div v-if="username" style="font-size: 16px;font-weight: 700; color: #277d7b;"><van-icon name="manager" size="18" style="margin-right: 4px;" />{{username}}</div>
		</div>
		<van-steps active="0" active-icon="checked" active-color="#33cdc9">
			<van-step>类型选择</van-step>
			<van-step>选择日期</van-step>
			<van-step>预约完成</van-step>
		</van-steps>
		<div class="head">
			请选择您的从业场所
		</div>
		<div style="color:#55b2d3">
			选择您所在的行业类型
		</div>
		<van-radio-group v-model="type" class="radioGroup">

			<div v-for=" (item,index) in DocInfo" :key="item.id" class="item" :class="type==item.id?'active':''"
				@click="check(item.id,item.name,index)">
				<div class="logo"><img :src="BaseUrl+item.img" /></div>
				<div class="name">

					<van-radio checked-color="#33cdc9" :name="item.id" style="margin-right: 10px;"></van-radio>
					{{item.name}}
				</div>
			</div>
		</van-radio-group>
		<van-button v-if="type" type="primary" class="button" round @click="to()">下一步</van-button>

	</div>
</template>

<script setup>
	import foodpng from '@/assets/image/food.png'
	import huazhuangpin from '@/assets/image/huazhuangpin.png'
	import gonggongpng from '@/assets/image/gonggong.png'
	import yinyongshui from '@/assets/image/yinyongshui.png'
	import xiaodupng from '@/assets/image/xiaodu.png'
	import {
		GetIndustryList
	} from "@/api/api.js";
	import {
		ref,
		onMounted
	} from 'vue';

	import {
		showDialog
	} from 'vant';
	import {
		useRouter
	} from "vue-router"
	import {
		usePiniaStore
	} from '@/stores/index.js'
	const pinia = usePiniaStore()
	const router = useRouter();
	console.log(pinia.yuyue_info)
	let username=ref('');
	let orgname=ref('');
	let type = ref('')
	let DocInfo = ref([])
	let BaseUrl = import.meta.env.VITE_APP_FILE_URL
	
	let info = pinia.yuyue_info
	const check = (id, label,index) => {
	
		info.doc_id = id
		info.doc_name = label
		pinia.ChangeYuYueInfo(info)
		console.log(pinia.yuyue_info)

		type.value = id
		showDialog({
			title: DocInfo.value[index].name,
			message: DocInfo.value[index].content,
			messageAlign: 'left',
			confirmButtonText: '我已经知晓',
			theme: 'round-button',
			confirmButtonColor: "#33cdc9"
		}).then(() => {

		});
	}
	let loading = ref(false)
	const to = () => {
		//	router.push('/selectDate')
		router.push('/uploadFiles')
	}
	onMounted(() => {
		username.value=sessionStorage.getItem('name')
		orgname.value=pinia.yuyue_info.org_name
		loading.value = true
		GetIndustryList({
			institution_id:info.org_id
		}).then(res => {
			loading.value = false
			if (res.status == true) {
				DocInfo.value = res.data
				DocInfo.value.forEach((v, i) => {
					DocInfo.value[i].content = v.content.replace(/\\n/g, '\n');
				})
			} else {
				showToast(res.msg);
			}
		})
	})
</script>

<style scoped>
	.DocumentSubmit {
		height: 100vh;
		background-image: url('../assets/image/r_head2.jpg');
		background-size: 50vw;
		background-repeat: no-repeat;
		background-position: 100% 100%;
		padding: 20px;
	}

	.head {
		font-size: 24px;
		font-weight: 700;
		color: #175e5c;
		padding-top: 20px;
	}

	.item {
		display: flex;
		border: 1px solid #c7f3f6;
		border-radius: 10px;
		height: 70px;
		background: linear-gradient(to right, #aee3f1, #fff);
		margin-top: 15px;
	}

	.active {
		border: 2px solid #33cdc9;
	}

	.item .logo {
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.item .logo img {
		height: 60px;
		position: relative;
		border-radius: 50%;
	}

	.item .name {
		width: 70%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-right: 40px;
		font-size: 16px;
		font-weight: 700;
		color: #414141;
	}

	.button {
		width: calc(100vw - 40px);
		background-color: #33cdc9;
		border: 0px;
		position: fixed;
		bottom: 20px;
		border: 3px solid #fff;
	}

	.radioGroup {}
</style>
<style>
	.van-step__title {
		font-size: 16px !important;
	}

	.van-step__icon {
		font-size: 20px !important;
	}

	.van-step__circle-container {
		top: 35px !important;
	}

	.van-step__line {
		top: 35px !important;
	}
</style>