<template>
    <div class="form-overlay">
        <form class="form-validation-example" @submit.prevent="submitForm">
            <div class="form-header">
                <h5>点检异常数据</h5>
                <p>提交原因</p>
            </div>
            <div class="spacing"></div>
            <div class="form-body">                
                <div class="item-chip-container">
                    <p>{{ itemName }}</p>
                    <IxChip class="chip" background="#FF2640" chip-color="#000028" variant="custom">
                        {{ itemTime }} 超出上下限
                    </IxChip>
                </div>
                <label for="reason">请输入原因</label>
                <textarea id="reason" v-model="reason"></textarea>
            </div>
            <div class="form-footer">
                <!-- <IxButton type="submit">提交</IxButton> -->
                <IxButton Outline @click="resetForm">重置</IxButton>
                <IxButton Outline @click="$emit('close')">关闭</IxButton>
                <IxButton @click="handleSubmit">提交</IxButton>
            </div>
        </form>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { IxButton, IxChip } from '@siemens/ix-vue';
import moment from 'moment-timezone';

const props = defineProps({
    itemName: String,
    itemTime: String,
    timezone: String,
});

const reason = ref('');

const submitForm = () => {
    console.log('提交原因:', reason.value);
};

const resetForm = () => {
    reason.value = '';
};

const emit = defineEmits(['close', 'submit']);

const handleSubmit = () => {
    const currentTime = moment().tz(props.timezone).format('HH:mm');
    emit('submit', currentTime);
};
</script>

<style scoped>
.form-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border: white;
}

.form-validation-example {
    background-color:#23233C;
    padding: 2rem;
    border-radius: 0.5rem;
    width: 25rem; /* 设置表单宽度 */
    display: flex;
    flex-direction: column;
    border: 0.0625rem solid white; /* 增加白色边框 */
}

.form-header h5 {
    color: #9898A8; /* 修改颜色 */
}

.form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

/* 间隔样式 */
.spacing {
    height: 0.2vh;
    /* 使用视口高度作为间隔 */
    background-color: #000028;
    /* 与主背景色相同 */
    margin: 0.875rem 0;
    /* 使用相对单位的外边距 */
}

.form-header h5,
.form-body p,
.form-body label {
    color: #9898A8; /* 修改颜色 */
    text-align: left; /* 文字靠左对齐 */
    font-size: 0.7rem; /* 字体大小为9px */
}

.form-header p {
    text-align: left; /* 文字靠左对齐 */
    font-size: 0.875rem; /* 字体大小为12px */
    
}

.item-chip-container {
    display: flex;
    align-items: center;
    gap: 0.03125rem; /* 0.5px */
    height: 100%; /* 确保容器高度 */
}

.item-chip-container p {
    display: flex;
    align-items: center; /* 上下居中 */
    margin: 0; /* 移除默认外边距 */
    line-height: 1; /* 确保行高 */
}

.chip {
    font-size: 0.7rem; /* 字体大小为9px */
}
</style>
