<template>
	<!-- <el-dialog v-model="isMethod" title="审批流程适用范围" width="688px"> -->
	<!-- v-if="isMethod" -->
	<div style="display: flex">
		<div
			style="
				margin-top: 16px;
				border-right: 1px solid rgba(220, 223, 230, 1);
				width: 165px;
			"
		>
			<div style="font-size: 12px; color: rgba(92, 92, 92, 1)">
				审批人设置
			</div>
			<el-radio-group
				v-model="radioValue"
				class="radio_group"
				@change="handleLeftRadio"
			>
				<div
					v-for="(item, index) in radios"
					:class="index + 1 == radioValue ? 'radioItem' : ''"
				>
					<el-radio
						class="radio_pl12"
						:label="item.value"
						:key="item.value"
						:disabled="item.disabled"
						>{{ item.label }}</el-radio
					>
				</div>
			</el-radio-group>
		</div>

		<div>
			<div style="width: 410px; margin-left: 16px">
				<methodHeader
					v-show="radioValue !== '1'"
					ref="methodHeaderRef"
					@handleSearchClick="handleSearchClick"
					:placeholder="placeholder"
				/>
				<directlyUnder v-show="radioValue === '1'" />
				<!-- @selectRow="selectRow" -->
				<member
					v-show="radioValue === '2'"
					:tableData="memberList"
					:checkIds="checkIds"
					ref="memberRef"
				/>
				<OtherDepartments
					v-show="radioValue === '3'"
					:deptsList="deptsList"
					@handleDeptChange="handleDeptChange"
					:deptValue="deptValue"
				/>
				<!-- 这里暂时先不做,如果后面做的话将判断条件修改即可 -->
				<!-- <role v-if="radioValue === 2" :cities="cities" /> -->
				<radio
					:isTitle="radioValue == '1' ? false : true"
					ref="rodioRef"
					:method="method"
					:methodValue="methodValue"
					@handleRadioChange="handleRadioChange"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
import member from './member.vue';
import { ref, toRef, toRefs, watch } from 'vue';
import directlyUnder from './directlyUnder';
import radio from './radio.vue';
import methodHeader from './methodHeader.vue';
import OtherDepartments from './OtherDepartments.vue';
const props = defineProps({
	cities: {
		type: Array,
		default: [],
		required: true,
	},
	checkIds: {
		type: Array,
		default: [],
		required: true,
	},
	deptsList: {
		type: Array,
		default: [],
		required: true,
	},
	memberList: {
		type: Object,
		default: {},
		required: true,
	},
	radios: {
		type: Array,
		default: [],
		required: true,
	},
	method: {
		type: Array,
		default: [],
		required: true,
	},
	isMethodCopDis: {
		type: Object,
		default: {},
		required: true,
	},
	handleSearchClick: {
		type: Function,
	},
	handleRadioChange: {
		type: Function,
	},
	radioValue: {
		type: String,
	},
	methodValue: {
		type: String,
	},
	handleLeftRadio: {
		type: Function,
	},
	deptValue: {
		type: String,
	},
	handleDeptChange: {
		type: Function,
	},
});

// const PLACEHOLDERTEXT = {
// 	2: '请输入成员名',
// 	3: '请输入部门',
// };
let text = {
	2: '请输入成员名',
	3: '请输入部门',
};
const rodioRef = ref(null);
const methodHeaderRef = ref(null);
const state = toRefs(props);
const { radioValue, methodValue, checkIds, deptValue, radios } = state;
console.log(deptValue.value, '==========deptValue==========');
const emits = defineEmits([
	'handleSearchClick',
	'handleLeftRadio',
	'handleRadioChange',
	'handleDeptChange',
]);

const checkData = ref([]);
const memberRef = ref(null);
// const radioData = ref({});
let placeholder = ref('');

watch(
	() => radioValue.value,
	(newVal) => {
		if (newVal) {
			placeholder.value = text[newVal];
		}
	},
	{
		deep: true,
		immediate: true,
	}
);
//审批
const handleLeftRadio = (val) => {
	radioValue.value = val;
	placeholder.value = text[val];
	methodHeaderRef.value.searchValue = '';
	emits('handleLeftRadio', val);
};
//指定成员选择框
const selectRow = (val) => {
	checkData.value = val;
};
//其他部门选择框
const handleDeptChange = (val) => {
	emits('handleDeptChange', val);
};
const handleSearchClick = (val) => {
	emits('handleSearchClick', val, radioValue.value);
};
const handleRadioChange = (val) => {
	emits('handleRadioChange', val);
};
const getData = () => {
	let data = memberRef.value.getMemBerData();
	return {
		radioValue: radioValue.value,
		methodValue: methodValue.value,
		memberData: data.selectData,
		// radioData: radioData.value,
	};
};
defineExpose({
	getData,
});
</script>

<style lang="scss" scoped>
@import '../../index.scss';
</style>
