<template>
    <div class="container" style="overflow: auto;">
        <el-page-header @back="$router.push('/manage')">
            <template #content>
                <span class="text-large font-600 mr-3"> {{ editing.name }} ({{ editing.id }}) </span>
            </template>
        </el-page-header>
        <div class="colbox" style="margin-top: 20px;">
            <div class="rowbox">
                <div class="card" style="margin-bottom: 20px;">
                    <div class="title">添加单词</div>
                    <el-input ref="input1" autofocus @change="focusnext($refs.input2)" v-model="new_word.word"></el-input>
                    <div class="colbox">
                        <el-text class="mx-1" style="width: 60px;">翻译:</el-text>
                        <el-input ref="input2" @change="focusnext($refs.input3)" v-model="new_word.trans"></el-input>
                    </div>
                    <div class="colbox">
                        <el-text class="mx-1" style="width: 80px;">词性：</el-text>
                        <el-select ref="input3" v-model="new_word.type" class="m-2" placeholder="Select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                    <el-button @click="add_word()" type="primary">添加</el-button>
                </div>
                <div class="card">
                    <div class="title">更改名称</div>
                    <div class="colbox">
                        <el-text class="mx-1" style="width: 60px;">新名称:</el-text>
                        <el-input v-model="new_name"></el-input>
                    </div>
                    <el-button @click="change_name()" type="primary">更改名称</el-button>
                </div>
            </div>
            <div style="width: 100%;" class="card">
                <el-table :data="table" style="max-height: 550px;overflow: auto;border-radius: 10px;">
                    <el-table-column type="index" />
                    <el-table-column prop="word" label="单词" />
                    <el-table-column prop="type" label="词性" />
                    <el-table-column prop="trans" label="翻译" />
                    <el-table-column width="100px" fixed="right" label="操作">
                        <template #default="scope">
                            <div style="display: flex;flex-direction: row;justify-content: space-around;">
                                <box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
                                    @click="del_word(scope.$index)"></box-icon>
                                <box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
                                    @click="edit_word(scope.$index)"></box-icon>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <el-dialog v-model="word_editing">
        <div class="title">修改单词</div>
        <el-input v-model="editing_word.word"></el-input>
        <div class="colbox">
            <el-text class="mx-1" style="width: 60px;">翻译:</el-text>
            <el-input v-model="editing_word.trans"></el-input>
        </div>
        <div class="colbox">
            <el-text class="mx-1" style="width: 80px;">词性：</el-text>
            <el-select v-model="editing_word.type" class="m-2" placeholder="Select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <el-button @click="save_word" type="primary">更改</el-button>
    </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus';

export default {
    name: "NoteEditor",
    data() {
        return {
            editing: window.editing.set,
            editingClass:window.editing.set_class_name,
            wordsets: window.wordsets,
            new_word: {
                word: "",
                trans: "",
                type: "adj.",
            },
            editing_word: {
                word: "",
                trans: "",
                type: "adj.",
                index: 0,
            },
            options: [{ label: "adjective(adj.)", value: "adj." }, { label: "verb(v.)", value: "v." }, { label: "noun(n.)", value: "n." }, { label: "adverb(adv.)", value: "adv." }, { label: "prepositions(prep.)", value: "prep." }, { label: "phrase(phr.)", value: "phr." },],
            table: [],
            word_editing: false,
            new_name:"",
        }
    },
    methods: {
        focusnext(node) {
            node.focus();
        },
        has_word(word) {
            for (let i of this.table) {
                if (i.word === word) return true;
            }
            return false;
        },
        add_word() {
            if (this.has_word(this.new_word.word)) {
                ElMessage({
                    message: `单词 ${this.new_word.word} 已存在`,
                    type: 'error',
                });
                return;
            }
            this.table.push(Object.assign({}, this.new_word));
            localStorage.setItem(this.editing.id, JSON.stringify(this.table));
            ElMessage({
                message: `已添加 ${this.new_word.word} (${this.new_word.type})`,
                type: 'success',
            });
            this.new_word.word = "";
            this.new_word.trans = "";
            this.$refs.input1.focus();
        },
        edit_word(index) {
            this.editing_word = Object.assign({}, this.table[index]);
            this.editing_word.index = index;
            this.word_editing = true;
            return;
        },
        save_word() {
            if (this.editing_word.word != this.table[this.editing_word.index].word) {
                if (this.has_word(this.editing_word.word)) {
                    ElMessage({
                        message: `单词 ${this.new_word.word} 已存在`,
                        type: 'error',
                    });
                    return;
                }
            }
            this.table[this.editing_word.index] = {
                word: this.editing_word.word,
                type: this.editing_word.type,
                trans: this.editing_word.trans,
            }
            localStorage.setItem(this.editing.id, JSON.stringify(this.table));
            ElMessage({
                message: `已保存更改`,
                type: 'success',
            });
            this.word_editing = false;
        },
        change_name() {
            let old_name = this.editing.name;
            this.editing.name = this.new_name;
            localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
            ElMessage({
                message: `已更改 ${old_name} 为 ${this.new_name}`,
                type: 'success',
            });
            return;
        },
        del_word(index) {
            let word = this.table[index].word.concat();
            this.table.splice(index, 1);
            localStorage.setItem(this.editing.id, JSON.stringify(this.table));
            ElMessage({
                message: `已删除 ${word}`,
                type: 'warning',
            });
        },

    },
    created() {
        this.table = JSON.parse(localStorage.getItem(this.editing.id));
    },
}
</script>

<style scoped>
#main-container {
    height: 87%;
}

.title {
    font-weight: 800;
    color: var(--text-color);
    font-size: 35px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 60px;
}


.card div {
    margin-bottom: 10px;
}

#new div {
    margin-bottom: 20px;
}

#sets-container {
    background-color: var(--bg-color);
    padding: 5px;
    border-radius: 8px;
}


.el-collapse {
    --el-collapse-header-bg-color: #FFFFFF00;
    --el-collapse-content-bg-color: #FFFFFF00;
    --el-collapse-header-font-size: 18px;
}
</style>