<template>
	<div class="content-padding-inline" style="margin-top: 30px;">
		<a-row :gutter="[10,10]" type="flex" justify="center">
			<a-col span="18">
				<a-row :gutter="20">
					<a-col span="4">
						<common-left-sider :menu_list="menu_list" :selected_key="[1]"
							@changeKey="changeKey"></common-left-sider>
					</a-col>
					<a-col span="20">
						<div style="width: 100%;background-color: #fff;height: calc(100vh - 100px); overflow: auto; padding: 10px;border-radius: 8px;">
							<message-list v-if="curKey == 1" @toEdit="toEdit"></message-list>
							<message-feedback :edit_id="edit_id" v-if="curKey == 2"  @send="send"></message-feedback>
						</div>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import MessageList from '@/components/message/list/index.vue'
	import MessageFeedback from '@/components/message/feedback/index.vue'
	let companyList = ref<object[]>([{}, {}, {}, {}, {}, {}])
	let menu_list = ref([{ title: '意见反馈列表', key: 1 },{ title: '意见反馈', key: 2}])
	let curKey = ref<Number>(1)
	let selectedKeys = ref<Number[]>([1])
	const changeKey = (data) => {
		curKey.value = data.key;
	}
	let edit_id = ref<Number>(0)
	const toEdit = (data) => {
		curKey.value = 2;
		selectedKeys.value = [2]
		edit_id.value = data.record.id
	}
	
	const send = () => {
		curKey.value = 1;
		selectedKeys.value = [1]
	}
</script>

<style>
</style>