<template>
    <div class="right-box content-box">
        <div class="right-title">
            <div class="touzi-icon"></div>
            <span>{{ title }}</span>
            <div class="touzi-icon"></div>
        </div>
        <div class="from-box">
            <div class="form-item" v-for="(field, index) in fields" :key="index">
                <span class="label">{{ field.label }}</span>
                <template v-if="field.type === 'year-month'">
                    <el-select class="custom-select" style="margin-right: 4px;width: 90px;" v-model="localFormData[field.keys[0]]" placeholder="年">
                        <el-option v-for="year in yearOptions" :key="year" :label="year + '年'" :value="year" />
                    </el-select>
                    <el-select class="custom-select" style="width: 70px;" v-model="localFormData[field.keys[1]]" placeholder="月">
                        <el-option v-for="month in monthOptions" :key="month" :label="month + '月'" :value="month" />
                    </el-select>
                </template>
                <template v-else>
                    <el-input class="custom-input" :type="field.type" v-model="localFormData[field.key]" placeholder="请输入" />
                </template>
            </div>
        </div>
        <div class="action-buttons">
            <button class="btn btn-outline" @click="$emit('saveDraft')">保存草稿</button>
            <button class="btn btn-primary" @click="$emit('download')">下 载</button>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    modelValue: {
        type: Object,
        required: true
    },
    fields: {
        type: Array,
        required: true,
        default: () => []
    },
    title: {
        type: String,
        default: '编辑'
    }
})

const emit = defineEmits(['update:modelValue', 'saveDraft', 'download'])

const localFormData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})

const yearOptions = computed(() => {
    const current = new Date().getFullYear()
    const years = []
    for (let i = 0; i < 15; i++) {
        years.push((current - i).toString())
    }
    return years
})

const monthOptions = Array.from({ length: 12 }, (_, i) => (i + 1).toString())
</script>

<style scoped lang="scss">
.right-box {
    width: 300px;
    height: 600px;

    &.content-box {
        overflow-y: hidden;
        background-color: #FFFFFF;
        border-radius: 18px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        padding: 20px 16px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }

    .right-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        line-height: 18px;
        font-weight: 600;
        color: #1A1A1A;
        margin-bottom: 24px;

        .touzi-icon {
            width: 32px;
            height: 32px;
        }
    }

    .from-box {
        flex: 1;
        height: 100px;
        overflow-y: auto;
    }

    .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        .label {
            font-size: 14px;
            color: #333333;
            width: 90px;
            flex-shrink: 0;
        }
    }

    :deep(.custom-input) {
        flex: 1;

        .el-input__wrapper {
            background-color: #F5F6F9;
            box-shadow: none;
            border-radius: 8px;
            padding: 0 12px;
            height: 36px;
            transition: all 0.3s;

            &.is-focus {
                box-shadow: 0 0 0 1px #808AFC inset;
                background-color: #FFFFFF;
            }
        }

        .el-input__inner {
            color: #333333;
            font-size: 14px;

            &::placeholder {
                color: #BDBDBD;
            }
        }
    }

    :deep(.custom-select) {
        .el-select__wrapper {
            background-color: #F5F6F9;
            box-shadow: none;
            border-radius: 8px;
            padding: 0 12px;
            height: 36px;
            transition: all 0.3s;
            
            &.is-focused {
                box-shadow: 0 0 0 1px #808AFC inset;
                background-color: #FFFFFF;
            }
        }
    }

    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 24px;

        .btn {
            width: 100%;
            height: 36px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            letter-spacing: 2px;
        }

        .btn-outline {
            background-color: transparent;
            border: 1px dashed #9F82F7;
            color: #9F82F7;

            &:hover {
                background-color: #F7F8FF;
            }
        }

        .btn-primary {
            background: linear-gradient(215deg, #A679F4 7.14%, #778CF5 100%);
            border: none;
            color: #FFFFFF;
            box-shadow: 0px 2px 6px rgba(166, 121, 244, 0.3);

            &:hover {
                opacity: 0.9;
            }
        }
    }
}
</style>
