<template>
	<view class="container">
		<u-navbar :title="itemData.title" placeholder safeAreaInsetTop>
			<view class="" slot="left" @click="closeOption">
				<u-icon name="arrow-left"></u-icon>
			</view>
		</u-navbar>
		<view class="usuallyCard margin padding">
			<view class="">
				{{itemData.radio1Title}}
			</view>
			<view class="flex margin-top-lg">
				<u-radio-group disabled  v-model="radioOne" @change="groupChange1">
					<u-radio class="w50" activeColor="#EA5504" name="是">是</u-radio>
					<u-radio activeColor="#EA5504" name="否">否</u-radio>
				</u-radio-group>
			</view>
		</view>

		<view class="usuallyCard margin padding" v-if="this.itemData.mode === 'twice'">
			<view class="">
				{{itemData.radio2Title}}
			</view>
			<view class="flex margin-top-lg">
				<u-radio-group disabled v-model="radioTwo" @change="groupChange2">
					<u-radio class="w50" activeColor="#EA5504" name="是">是</u-radio>
					<u-radio activeColor="#EA5504" name="否">否</u-radio>
				</u-radio-group>
			</view>
		</view>

		<view class="usuallyCard margin padding">
			<view class="">
				{{itemData.checkTitle}}
			</view>
			<view class="flex margin-top-lg">
				<u-checkbox-group disabled  v-model="checkboxValue" placement="column"
					@change="checkboxChange">
					<u-checkbox activeColor="#EA5504" :customStyle="{margin: '8px 0px'}"
						v-for="(item, index) in itemData.checkList" :key="index" :label="item" :name="item">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>

		<!-- <view class="bomBtnCss flex justify-around align-center">
			<view class="w30" @click="closeOption">
				<u-button>取消</u-button>
			</view>
			<view class="w60" @click="handleConfirm">
				<u-button color="#EA5504">确定</u-button>
			</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		name: "checkOption",
		components: {

		},
		props: {
			itemData: {
				type: Object,
				default: () => {}
			},
			shouldEcho: {
				type: Boolean,
			}
		},
		data() {
			return {
				radioOne: "",
				radioTwo: "",
				checkboxValue: [],
				checkboxList: [],
			};
		},
		watch: {
			itemData: {
				handler() {
					this.$nextTick(() => {
						this.reset();
						// console.log('回显值:' + JSON.stringify(this.itemData));
						if (this.itemData.ifhx) {
							this.loadEcho();
							this.$forceUpdate();
						}
					});
				},
				immediate: true,
				deep: true,
			},
		},
		computed: {
			radio2Disabled() {
				if (this.itemData.mode === 'once' && this.itemData.type === 1 && this.radioOne === '是') {
					return false
				}
				if (this.itemData.mode === 'once' && this.itemData.type !== 1 && this.radioOne === '否') {
					return false
				}
				if (this.itemData.type !== 1 && this.radioOne === '是' && this.itemData.mode === 'twice') {
					return false
				}
				return true
			},
			calcIfshow() {
				// 第一个 漏气选是为展示
				if (this.itemData.type === 1 && this.radioOne === '是') {
					console.log("第一种类型");
					return false
				}
				// 第二 mode方式为once且type不为1选否为展示
				if (this.itemData.mode === 'once' && this.itemData.type !== 1 && this.radioOne === '否') {
					console.log("第二种类型");
					return false
				}
				// 第三 mode方式为twice且radioTwo未否
				if (this.itemData.mode === 'twice' && this.radioOne === '是' && this.radioTwo === '否') {
					console.log("第三种类型");
					return false
				}
				// console.log("普通类型");
				return true
			},
		},
		mounted() {

		},
		// beforeDestroy() {
		// 	console.log("销毁");
		// 	// this.itemData = {}
		// },
		methods: {
			// 回显
			loadEcho() {
				// console.log("执行回显");
				let {
					radioOne,
					radioTwo,
					checkboxValue
				} = this.itemData;
				// console.log("loadEcho回显", radioOne, radioTwo, checkboxValue);
				this.radioOne = radioOne;
				this.radioTwo = radioTwo;
				this.checkboxValue = checkboxValue;
			},
			reset(){
				this.radioOne = "";
				this.radioTwo = "";
				this.checkboxValue = [];
			},
			closeOption() {
				this.$emit('close');
			},
			groupChange1(e) {
				// console.log(e, this.radioOne);
				this.radioTwo = '';
				this.checkboxValue = [];
			},
			groupChange2(e) {
				this.checkboxValue = [];
			},
			checkboxChange() {

			},
			// 是否展示漏气部分

			// 确定后传递选择数据
			handleConfirm() {
				let that = this;
				if (!this.radioOne && !this.radioTwo) {
					uni.$u.toast('请选择主选项');
					return
				}
				if (!this.radio2Disabled && !this.radioTwo && this.itemData.mode === 'twice') {
					uni.$u.toast('请勾选二级选项');
					return
				}
				if (!this.calcIfshow && !this.checkboxValue.length) {
					uni.$u.toast('请勾选多选项');
					return
				}
				const index = this.itemData.type - 1;
				const objArr = ["lq", "syhj", "syxw", "rsqsnaz", "pgzf", "rqpxlbjzz"]
				const objName = objArr[index];
				let data = [];
				if (this.radioOne) {
					data.push({
						sslx: this.itemData.title,
						bt: this.itemData.radio1Title,
						jcjg: this.radioOne
					})
				}
				if (this.radioTwo) {
					data.push({
						sslx: this.itemData.title,
						bt: this.itemData.radio2Title,
						jcjg: this.radioTwo
					})
				}
				this.checkboxValue.map(item => {
					data.push({
						sslx: this.itemData.title,
						bt: item,
						jcjg:this.radioTwo || this.radioOne
					})
				})
				let hxdatas = {
					sslx: this.itemData.title,
					bt: this.checkboxValue.join(','),
					jcjg: this.radioTwo || this.radioOne
				}
				let objData = {
					[objName]: data
				}
				
				let hxData = {
					[objName]: hxdatas
				}
				that.itemData.radioOne = that.radioOne;
				that.itemData.radioTwo = that.radioTwo;
				that.itemData.checkboxValue = that.checkboxValue;
				console.log("选择后传递数据", objData);
				
				//传递获取的安检信息
				uni.$emit('optionData', {
					data: objData,
					type: objName
				});
				
				// 传递所选值和需要回显的值
				uni.$emit('optionEcho', {data: hxData});
				// uni.$emit('openhx', false);
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bomBtnCss {
		background: #fff;
		width: 100%;
		height: 50px;
		position: absolute;
		bottom: 0;
	}
</style>