<template>
    <div id="app">
        <div style="width: 500px;">
            <el-form label-width="80px">
                <el-form-item label="单词数">
                    <div style="display: flex;">
                        <el-input v-model="itemData.wordCount"></el-input>
                        <el-button class="btn" type="ghost" size="mini" @click="updateWordCount()">更新</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div style="display: flex; flex-wrap: wrap;">
            <div v-for="item, index in itemData.texts" :key="index" style="width: 350px; margin: 0 10px 10px 10px;">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>第{{ index + 1 }}页</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="deleteConf(index)">删除</el-button>
                    </div>
                    <el-form label-width="80px">
                        <el-form-item label="原文">
                            <el-input v-model="itemData.texts[index]" @change="save"></el-input>
                        </el-form-item>
                        <el-form-item label="译文">
                            <el-input v-model="itemData.transTexts[index]" @change="save"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="width: 350px; height: 226px; margin: 0 10px 10px 10px;">
                <el-card style="height: 226px;" shadow="hover">
                    <div style="width: 300px; height: 200px; cursor: pointer;" @click="addConfig()">
                        <el-button class="btn" type="text" size="mini"  icon="el-icon-plus">新建</el-button>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import AudioUploader from './components/AudioUploader.vue'

export default {
    name: 'App',
    components: {
        AudioUploader
    },
    data() {
        return {
            itemData: {
                "texts": [],    
                "transTexts": [],
                "wordCount": 0,
            },
            configArr: [],
            // 结束时间点
            endConf: 0
        };
    },
    async mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const res = await this.$getData();
            if(!res) {
                // 默认数据
                this.itemData = {
                    "texts": [

                    ],
                    "transTexts": [

                    ],
                    "wordCount": 0
                }
            } else {
                this.itemData = res
            }
        },

        // 更新字数
        updateWordCount() {
            const allWords = [];
            this.itemData.texts.forEach(line => {
                const lineWords = line.split(' ')
                lineWords.forEach(word => {
                    const _w = word.replace(/[\s\.\,\!\?]/g, '')
                    if(_w && allWords.indexOf(_w) === -1) {
                        allWords.push(_w)
                    }
                })
            })
            this.itemData.wordCount = allWords.length
            this.save()
        },

        // 删除
        deleteConf(index) {
            this.$confirm('确认删除该页吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.itemData.texts.splice(index, 1)
                this.itemData.transTexts.splice(index, 1)
                this.save()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 添加新的配置
        addConfig() {
            this.itemData.texts.push('')
            this.itemData.transTexts.push('')
            this.save();
        },

        // 保存数据
        save() {
            this.$message({
                type: 'success',
                message: '保存成功',
                duration: 500
            });
            this.$setData(this.itemData)
        }
    }
}
</script>

<style>
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
    background-color: #FFFFFF;
}

#app {
    padding: 10px;
}

.btn {
    margin-left: 10px;
    font-size: 14px;
}

.warn .el-form-item__label {
    background-color: #F56C6C;
    color: #FFFFFF;
}
</style>
