import { defineComponent, reactive } from "vue";
import styles from "./index.module.less";
import iconRight from "./icons/icon-right.png";
import { Popup } from "vant";
import ScreenModel from "./screen-model";
import Recommendation from "./recommendation";

export default defineComponent({
	name: "helper-model",
	setup() {
		const helperData = reactive({
			show: false,
			recommendationShow: false, // 建议
		});
		return () => (
			<>
				<div class={styles.helperModel} onClick={() => (helperData.show = true)}>
					<img id="tips-step-0" src={iconRight} />
				</div>
				<Popup
					class={["popup-custom", styles.screen]}
					v-model:show={helperData.show}
					onClose={() => {
						helperData.show = false;
					}}
					position="right"
				>
					<ScreenModel
						onClose={(open: Boolean) => {
							if (open) {
								helperData.recommendationShow = true;
							} else {
								helperData.show = false;
							}
						}}
					/>
				</Popup>
				<Popup v-model:show={helperData.recommendationShow} class="popup-custom van-scale" transition="van-scale">
					<Recommendation
						onClose={() => {
							helperData.recommendationShow = false;
						}}
					/>
				</Popup>
			</>
		);
	},
});