<template>
	<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增' : '修改'" width="610" center align-center
		@close="handleClose" draggable>
		<el-form :inline="true" v-if="currentMode === '1'">
			<el-form-item label="任务名称:">
				<el-input v-model="taskName" placeholder="请输入任务名称" />
			</el-form-item>
			<el-form-item label="执行时间:">
				<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
			</el-form-item>
		</el-form>
		<div class="m-t-4" />
		<el-form :inline="true">
			<el-form-item label="所属爬虫:">
				<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 181px">
					<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="执行频率:">
				<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
			</el-form-item>
		</el-form>
		<div class="m-t-4" />
		<el-form :inline="true">
			<el-form-item label="启用/停止:">
				<el-switch v-model="taskSwitchValue" class="ml-2"
					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" @click="handleConfirm">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'

const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false
	},
	mode: {
		type: String,
		default: '1'
	},
	spiderType: {
		type: String,
		default: ''
	},
	frequency: {
		type: String,
		default: ''
	},
	taskStatus: {
		type: Boolean,
		default: false
	}
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm'])
// 组件的状态
const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode)
const taskName = ref('')
const taskFrequency = ref('')
const taskSwitchValue = ref(false)
const spiderTypeValue = ref('')
const spiderTypeOptions = ref([
	{
		value: '选项1',
		label: 'DSN爬虫'
	},
	{
		value: '选项2',
		label: 'ITU爬虫'
	},
	{
		value: '选项3',
		label: 'ST爬虫'
	},
])


// 关闭的方法
const handleClose = () => {
	currentVisible.value = false
}
// 确定的方法
const handleConfirm = () => {
	emit('confirm')
	currentVisible.value = false
}

// 监听props变化，同步给组件内部
watch(() => props.dialogVisible,
	(newVal) => {
		currentVisible.value = newVal
	}
)

// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value,
	(newVal) => {
		emit('update:dialogVisible', newVal)
	}
)

watch(() => props.mode,
	(newVal) => {
		currentMode.value = newVal
	}
)
</script>

<style>
/* 修改弹出框样式 */
.el-dialog {
	background: transparent;
	background-image: url("@/assets/picture/dialog1.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #ffffff;

	.el-dialog__title {
		color: #ffffff;
	}
}

/* 修改表单样式 */
.el-form {
	.el-form-item__label {
		color: #ffffff;
	}
}
</style>
