<template>
    <el-dialog style="padding: 0 ; border-radius: 12px; overflow: hidden;  min-width:600px; max-width:800px"
        class="legend_my_el_dialog" v-model="showModal" width="24%" @close="handleCancel">
        <template #title>
            <div class="legend-dialog-title">保存文件</div>
        </template>
        <div class="save-dialog-content">
            <div class="file-selection-section">
                <div class="select-all-section">
                    <h6>选择要保存的文件</h6>
                    <el-checkbox class="my_save_checkbox select-all-checkbox" v-model="selectAll"
                        :indeterminate="isIndeterminate" @change="handleSelectAll">
                        全选
                    </el-checkbox>
                </div>
                <div class="file-list">
                    <div>
                        <div v-for="file in selectedFiles" :key="file.path" class="file-item">
                            <el-checkbox class="my_save_checkbox" v-model="file.selected" :label="file.label"
                                @change="handleFileSelect">
                                {{ file.label }}
                            </el-checkbox>
                        </div>
                    </div>
                </div>
            </div>

            <div class="save-location-section">
                <h6>保存位置</h6>
                <div class="location-input">
                    <el-input v-model="saveLocation" placeholder="请选择保存位置">
                    </el-input>
                    <el-button @click="selectSaveLocation" class="input-group-button">浏览</el-button>
                </div>
            </div>
            <div class="save-actions">
                <el-button type="primary" @click="handleSave" class="input-group-button-primary">保存</el-button>
                <el-button @click="handleCancel" class="input-group-button">取消</el-button>
            </div>
        </div>

    </el-dialog>
</template>

<script>
import { dialog } from '@tauri-apps/api'

export default {
    name: 'SaveFileDialog',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        files: {
            type: Array,
            default: () => []
        }
    },
    emits: ['update:visible', 'save', 'cancel'],
    data() {
        return {
            saveLocation: '',
            selectedFiles: [],
            selectAll: false,
            isIndeterminate: false
        }
    },
    computed: {
        showModal: {
            get() {
                return this.visible
            },
            set(value) {
                this.$emit('update:visible', value)
            }
        }
    },
    watch: {
        files: {
            handler(newFiles) {
                this.selectedFiles = newFiles.map(file => ({
                    ...file,
                    selected: true
                }))
                this.updateSelectAllState()
            },
            immediate: true
        }
    },
    methods: {
        async selectSaveLocation() {
            try {
                const selected = await dialog.open({
                    directory: true,
                    title: '选择保存位置'
                })
                if (selected) {
                    this.saveLocation = selected
                }
            } catch (error) {
                console.error('选择保存位置失败:', error)
            }
        },

        handleSave() {
            const filesToSave = this.selectedFiles.filter(file => file.selected)
            if (filesToSave.length === 0) {
                // this.$message.warning('请至少选择一个文件')
                alert('请至少选择一个文件')
                return
            }
            if (!this.saveLocation) {
                alert('请选择保存位置')
                // this.$message.warning('请选择保存位置')
                return
            }

            this.$emit('save', {
                files: filesToSave,
                location: this.saveLocation
            })
            this.showModal = false
        },

        handleCancel() {
            this.$emit('cancel')
            this.showModal = false
        },

        handleSelectAll(value) {
            this.selectedFiles.forEach(file => {
                file.selected = value
            })
            this.updateSelectAllState()
        },

        handleFileSelect() {
            this.updateSelectAllState()
        },

        updateSelectAllState() {
            const selectedCount = this.selectedFiles.filter(file => file.selected).length
            const totalCount = this.selectedFiles.length

            if (selectedCount === 0) {
                this.selectAll = false
                this.isIndeterminate = false
            } else if (selectedCount === totalCount) {
                this.selectAll = true
                this.isIndeterminate = false
            } else {
                this.selectAll = false
                this.isIndeterminate = true
            }
        },

    }
}
</script>

<style lang="less" scoped>
.file-selection-section,
.save-location-section {
    margin-bottom: 20px;

    h6 {
        text-align: left;
    }

    .select-all-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.file-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px;
}

.file-item {
    margin-bottom: 8px;
    padding: 5px;
    border-radius: 3px;
    text-align: left;

}

.file-item:hover {
    background-color: #f5f7fa;
}

.file-path {
    color: #606266;
    font-size: 12px;
    margin-left: 8px;
}

.no-files-message {
    text-align: center;
    color: #909399;
    padding: 20px;
}

.location-input {
    width: 100%;
    display: flex;
}
</style>

<style lang="less">
.legend_my_el_dialog {
    .el-dialog__header.show-close {
        padding: 0 !important;
        font-size: 16px;
        color: #333333;

        .el-dialog__headerbtn {
            box-shadow: none;
            top: 4px;
            right: 14px;
            font-size: 24px;
            color: #000;

            .el-icon {
                fill: #000;

                path {
                    fill: #000;
                }
            }
        }
    }
}


.legend-dialog-title {
    text-align: left;
    height: 50px;
    line-height: 50px;
    background: #F3F5FA;
    border-radius: 12px 12px 0px 0px;
    padding: 0;
    font-weight: 600;
    padding-left: 30px;
}

.save-dialog-content {
    padding: 20px 0;

    .my_save_checkbox {
        .el-checkbox__input.is-checked+.el-checkbox__label {
            color: #4271EE;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner {
            border-color: #4271EE;
            background-color: #4271EE;
        }

        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: #4271EE;
            border-color: #4271EE;
        }
    }

    .el-input__wrapper.is-focus {
        box-shadow: 0 0 0 1px #dcdfe6;
    }


    .input-group-button {
        margin-left: 10px;
        box-shadow: none;
        background-color: #EDF1FB;
        color: #6B7181;
        border: 1px solid #D3D8E3;
    }

    .input-group-button-primary {
        box-shadow: none;
        color: #fff;
        background-color: #4271EE;
    }

    .el-button:hover {
        color: #6B7181;
        border-color: #aaabad;
    }

    .input-group-button-primary:hover {
        color: #fff;
        border-color: #4271EE;
    }
}
</style>