<template src="./webgl_rxdz_role.html">
</template>

<script>
	const util = require('@/utils/util.js').default;
	const config = require('@/services/urlConfig.js');
	import router from "@/router";
	import {
		setStorage,
		getStorage,
	} from '@/utils/localStorage';
	import {
		Toast
	} from 'mint-ui';
	import touchHandle from '@/mixins/touchHandle.js';
	import commonPageMethod from '@/mixins/commonPageMethod.js';
	// const app = getApp(); //获取应用实例
	// import requestConfig from '@/static/lib/requestConfig.js';
	// import commonPageMethod from '@/common/commonPageMethod.js';
	// import commonMethod from '@/common/commonMethod.js';
	export default {
		mixins: [touchHandle, commonPageMethod],
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				pvId: 'p_2cmina_21012301',
				locusBehaviorName: "角色偏好",
				locusValue: "",
				locusName: "",
				pvCurPageName: "role_set",
				pvCurPageParams: null,
				navbar: {
					showCapsule: 1,
					title: '角色偏好',
					titleColor: '#fff',
					navPadding: 0,
					navPaddingBg: 'transparent',
					navBarColor: 'transparent',
					navBackColor: 'transparent',
					haveCallback: false, // 如果是 true 会接手 navbarBackClk
					fromShare: false,
					fromProject: 0,
					shareToken: "",
					pageName: this.pvCurPageName,
				},
				houseId: $config.houseIdHs,

				id: '', //方案库id
				allSelect:false,//是否所有大类都选择了
				currImgIdx: 0,
				// featureImgList: [],
				showPhoneModel: false,
				tabIndex: 0, //当前在第几个tab
				optionIndex: -1, //选项选中的序号
				options: [], //选项数据
				roleList: [], //角色数据，单独
				tabData: [
				// 	{
				// 	id: 1,
				// 	fatherContent: '选择角色',
				// 	checkedIndex: -1, //当前选中的序号
				// 	subName: '选择你的人物角色',
				// 	options: [{
				// 			id: 1,
				// 			text: '- 爱生活 -',
				// 			content: '角色',
				// 			imageUrl: 'https://dm.static.elab-plus.com/miniProgram/role/timg17.png',
				// 		},
				// 		{
				// 			id: 2,
				// 			text: '- 爱时尚 -',
				// 			content: '角色',
				// 			imageUrl: 'https://dm.static.elab-plus.com/miniProgram/role/demo2.jpg',
				// 		}
				// 	],
				// },
				],
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		mounted(options) {
			const that = this;
			let queryObj = getStorage('queryObj') ? JSON.parse(getStorage('queryObj')) : null;
			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
			// this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
			this.id = this.$route.query.id1 ? this.$route.query.id1 : (queryObj && queryObj.id1?queryObj.id1:'109');
			console.log("***onLoad-webgl_rxdz_role***", this.$route.query,this.id)
			this.queryTestcaseSingle();
		},
		computed: {
			userId() {
				return this.$store.state.userId;
			},
		},

		methods: {
			swiperChangeImg(e) {
				console.log("***swiperChangeImg***", e);
				this.currImgIdx = e.detail ? e.detail.current : e;
				// this.optionIndex = this.currImgIdx;
				// this.tabData[0].checkedIndex = this.currImgIdx;
			},
			rightScroll() { //右滑
				if (this.currImgIdx <= (this.roleList.length - 1) && this.currImgIdx > 0) {
					this.$refs.carousel.prev();
				}
			},
			leftScroll() { //继续生成
				if (this.currImgIdx != this.roleList.length - 1) {
					if (this.currImgIdx < this.roleList.length - 1) {
						this.$refs.carousel.next();
					}
				}
			},
			//查询题目数据
			async queryTestcaseSingle() {
				let userId = this.userId || '';
				let params = {
					id: this.id,
					brandId: $config.brandId,
					houseId: this.houseId,
					userId,
				};
				// params.userId = this.userId;
				const res = await requestConfig('queryTestcaseSingle', params);
				if (res.success) {
					let list = res.list;
					list.forEach(it => it.checkedIndex = -1); //增加当前题目用户选择的需要，默认不选中
					this.tabIndex = 0;
					this.tabData = list;
					this.options = this.tabData[0].options; //选项数据
					this.roleList = this.tabData[0].options; //单独获取角色数据
				}
			},
			//切换大类
			changeTab(id) {
				if (id == this.tabIndex) {
					return
				}
				this.tabIndex = id;
				this.options = this.tabData[this.tabIndex].options; //选项数据
				this.optionIndex = this.tabData[this.tabIndex].checkedIndex; //获取用户已经选中的选项
			},
			//切换选项
			changeOption(id) {
				if (id == this.optionIndex) {
					return false;
				}
				this.optionIndex = id;
				this.tabData[this.tabIndex].checkedIndex = this.optionIndex;
				if (this.tabIndex == 0) { //当前为角色时，则需要同步变更上面的
					this.currImgIdx = id;
					this.$refs.carousel.setActiveItem(this.currImgIdx);
				}
				this.allSelect = !this.tabData.some(it=>it.checkedIndex==-1);
				console.warn("***changeOption***", this.tabData,this.allSelect)
				// let param = {
				// 	type: 'CLK', //埋点类型
				// 	clkId: 'clk_2cmina_24012302', //点击ID
				// 	clkName: 'option_clk', //点击前往的页面名称
				// 	clkParams: {
				// 		type: this.options[this.optionIndex].content,
				// 		locusName: "选项选择",
				// 	}
				// };
				// util.trackRequest(param);
				this.submitAnswer();
			},
			submitAnswer(){
				let userId = this.userId || '';
				let params = {
					"answerContent": [
						{
							"optionTitle": this.options[this.optionIndex].content,
							"questionTitle": this.tabData[this.tabIndex].subContent,//问题标题
							"subOptionId": this.options[this.optionIndex].id,
							"subQuestionId": this.tabData[this.tabIndex].id,
						}
					],
					brandId: $config.brandId,
					houseId: this.houseId,
					channel:this.$route.query.channel || '',
					city:this.$route.query.city || '',
					district:this.$route.query.district || '',
					province:this.$route.query.province || '',
					paperTitle:'',//试卷id
					testThemeId:'',
					testcaseId:this.id,
					uuid:userId,
					xcxCustomerId:userId,
				};
				requestConfig('submitAnswer', params,true);
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_24022001', //点击ID
					clkName: 'option_clk', //点击前往的页面名称
					clkParams: {
						locusValue: this.options[this.optionIndex].content,
						locusName: "选项选择",
					}
				};
				util.trackRequest(param);
			},
			catchTouchMove: function() {
				return false;
			},
			toMode() {
				let index = this.tabData.findIndex(it=>it.checkedIndex==-1);
				if(index>-1){
					Toast({
						message: this.tabData[index].fatherContent + '选项不能为空',
					});
					return false;
				}
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_24012303', //点击ID
					clkName: 'confirm_clk', //点击前往的页面名称
					clkParams: {
						locusName: "确定个人偏好",
					}
				};
				util.trackRequest(param);
				let data = [];
				this.tabData.forEach(tab=>{
					let _dt = {
						name:tab.fatherContent,
						selectOptionName:tab.options[tab.checkedIndex].content,
						selectOptionImageUrl:tab.options[tab.checkedIndex].imageUrl,
					}
					data.push(_dt);
				})
				setStorage('firstData', data);//把第一步选择的数据存入本地缓存里面，方便后续使用
				// console.log("进入订制户型: ", this.curHouseObj);
				// setStorage('curHouseObj', this.curHouseObj);
				// this.$store.dispatch('setCurHouseObj', this.curHouseObj);
				router.push({
					name: "webgl_rxdz_test_houseList",
					query:{
						houseId:this.houseId,
					}
				});
				// let data = {
				// 	houseId:this.houseId,
				// 	id:this.id,
				// }
				// router.push({
				// 	name: "webgl_rxdz_look",
				// 	query:data
				// });
				
			},
		}

	}
</script>
<style lang="scss" scoped>
	@import "./webgl_rxdz_role.scss";
</style>