<template>
	<!-- 转视频 -->
	<div class="to-video">
		<p class="label">Frames</p>
		<div class="frames">
			<upload-file v-model="data.first_file" tip="First Frame" />
			<upload-file v-model="data.last_file" tip="Last Frame" />
		</div>
		<p class="label">Size</p>
		<pixel-ratio-selection v-model="data.pixelRatio" />
		<div class="label">
			<span>Aspect Ratio</span>
			<span>Time</span>
		</div>
		<div class="select">
			<el-select v-model="data.aspectRatio">
				<el-option v-for="v in aspectRatioList" :key="v" :label="v" :value="v" />
			</el-select>
			<el-select v-model="data.time">
				<el-option v-for="v in timeList" :key="v" :label="v" :value="v" />
			</el-select>
		</div>
		<p class="label">Prompt</p>
		<my-textarea v-model="data.prompt" />
	</div>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import myTextarea from '../my-textarea.vue'
	import uploadFile from '../upload-file.vue'
	import pixelRatioSelection from '../pixel-ratio-selection.vue'
	const aspectRatioList = ref(['720p', '1080p', '1440p', '2160p', '1k', '2k'])
	const timeList = ref(['5s', '10s', '15s', '20s', '30s', '60s'])
	const data = reactive({
		first_file: null,
		last_file: null,
		pixelRatio: '1:1',
		aspectRatio: '720p',
		time: '5s',
		prompt: ''
	})

	defineExpose({ data })
</script>

<style lang="less" scoped>
	.to-video {
		> .frames {
			display: flex;
			gap: 0.5rem;
		}
		> .select,
		> div.label {
			display: flex;
			gap: 1.3rem;
			> * {
				flex: 1;
			}
		}
		> .select {
			&:deep(.el-select) {
				--el-select-input-font-size: 1.2rem;
				.el-select__wrapper {
					font-size: 1.2rem;
					min-height: 0;
					height: 2.8rem;
					padding: 0 0.8rem;
				}
				.el-select__selected-item,
				.el-select__input-wrapper,
				.el-select__placeholder {
					line-height: normal;
				}
				.el-select__input {
					height: 2.4rem;
				}
			}
		}
	}
	.el-popper{
		.el-select-dropdown{
			li{
				padding-left: 0.8rem;
				height: 3rem;
				line-height: 3rem;;
				font-size: 1.2rem;
			}
		}
	}
</style>
