<template>
    <el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center @close="handleClose" draggable>
        <el-form :inline="true">
            <el-form-item label="用户账号:">
                <el-input v-model="taskName"  />
            </el-form-item>
            <el-form-item label="用户名称:">
                <el-input v-model="taskFrequency" />
            </el-form-item>
        </el-form>
        <div class="m-t-4">
        </div>
        <el-form :inline="true">
            <el-form-item label="用户备注:">
                <el-input v-model="taskName"  />
            </el-form-item>
            <el-form-item label="用户密码:">
                <el-input v-model="taskFrequency" />
            </el-form-item>
        </el-form>
        <div class="m-t-4">
        </div>
        <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 {  onMounted, ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    mode: {
        type: String,
        default: 'add'
    },
    userCount: {
        type: String,
        default: ''
    },
    userName: {
        type: String,
        default: ''
    },
    userRemark: {
        type: String,
        default: false
    },
    userPassword: {
        type: String,
        default: ''
    }
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm'])
// 组件的状态
const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode)
const taskName = ref('')
const taskFrequency = ref('')

// 关闭的方法
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>
