<template>
	<div class="examineTop_box">
		<div class="btns_box">
			<div class="btns_item" @click="handleBtns('commit')">
				<img
					src="/src/assets/up@3x.png"
					alt=""
					style="width: 14px; height: 14px"
				/>
				<span>提交</span>
			</div>
			<!-- <div class="btns_item1" @click="handleBtns('out')">
				<img
					src="/src/assets/dw.png"
					alt=""
					style="width: 14px; height: 14px"
				/>
				<span>退出</span>
			</div> -->
		</div>
		<div class="examine_box">
			<div class="detailed_box" style="padding-bottom: 16px">
				<div class="detailed_line"></div>
				<div class="detailed_title">处理意见</div>
			</div>
			<div>
				<el-radio-group
					v-model="radioValue"
					style="margin-left: 14px"
					text-color="#333"
				>
					<div
						v-for="item in checks"
						:key="item.label"
						style="width: 73px; margin-left: 24px"
					>
						<el-radio :label="item.value">{{
							item.label
						}}</el-radio>
					</div>
				</el-radio-group>
				<div style="display: flex; align-items: center">
					<el-input
						class="input-style"
						v-model="inputValue"
						placeholder="请输入审批意见"
						maxlength="20"
					/>
					<span class="look" style="" @click="handleOpen"
						><img
							src="/src/assets/flow@3x.png"
							alt=""
							style="width: 14px; height: 14px"
						/>
						<spna class="look-text" style="">查看流程图</spna>
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'examineTop',
};
</script>
<script setup>
import { ref, toRefs, watch, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';

import { msg } from '@/utils/lodash/msg.js';
const radioValue = ref('1');
const inputValue = ref(null);
const { proxy } = getCurrentInstance();
const { $http } = proxy;
const props = defineProps({
	handleBtns: {
		type: Function,
	},
	radios: {
		type: Object,
	},
	handleOpen: {
		type: Function,
	},
	isexamineBtns: {
		type: Boolean,
	},
});
const emits = defineEmits(['handleBtns', 'handleOpen']);
// const status = localStorage.getItem('examineStatus')
const store = useStore();
const { dispatch } = store;
const { radios, isexamineBtns } = toRefs(props);
console.log(radios.value);
let checks = ref([]);
const initSelectArray = (data) => {
	let arr = [];
	if (!data || JSON.stringify(data) === '{}') {
		console.error('initSelectArray方法接受一个对象并转为数组');
		return [];
	}
	for (let key in data) {
		let obj = {};
		obj.value = key;
		obj.label = data[key];
		arr.push(obj);
	}
	return arr;
};
//获取审批流的select
const getStatus = () => {
	//防止上次账号的缓存
	// dispatch('examine/deleteAll');
	// dispatch('examine/deleteStaffAllList');
	$http.get('ApprovalFlow/status').then((res) => {
		if (res.status === 200) {
			res.data.useOrderType = initSelectArray(res.data.useOrderType);
			res.data.approvalWayType = initSelectArray(
				res.data.approvalWayType
			);
			res.data.method = initSelectArray(res.data.method);
			//approvalResult
			checks.value = res.data.approvalResult = initSelectArray(
				res.data.approvalResult
			);
			dispatch('examine/setExamine', res.data);
		}
	});
};

watch(
	checks.value,
	(newVal) => {
		if (!newVal || !checks.value.length) {
			let examineStatus = localStorage.getItem('examineStatus');
			if (examineStatus) {
				let status = JSON.parse(examineStatus);
				checks.value = status.approvalResult;
			} else {
				getStatus();
			}
		}
	},
	{
		deep: true,
		immediate: true,
	}
);

const handleBtns = (type) => {
	if (isexamineBtns.value) {
		msg('warning', '请稍后再进行操作!');
		return;
	}
	if (radioValue.value != '1' && !inputValue.value) {
		msg('warning', '驳回和终止必须填写审批意见描述！');
		return;
	}
	emits('handleBtns', {
		type,
		approvalResult: Number(radioValue.value),
		remark: inputValue.value,
	});
	inputValue.value = '';
	radioValue.value = '1';
};
const handleOpen = () => {
	emits('handleOpen');
	// $router.push({ path: '/examine/mange/examineFollow' });
};
</script>

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