<template>
    <div class="container w-auto m-auto bg-gray-200 mb-10">
        
        <div class="p-4">
            
            <div class="flex items-center gap-4">
                <textarea class="block w-full rounded text-sm text-gray-600 h-10 bg-slate-100" v-model="newContent" maxLength="512" placeholder="输入需要搜索或保存的内容"></textarea>
                <button class="bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600  px-4 h-10 rounded-lg hover:bg-gray-600  text-gray-50 shadow-xl " @click="search"> search</button>
                <button class="bg-blue-500  px-4 h-10 rounded-lg hover:bg-blue-600 text-gray-200 shadow-xl" @click="add">+add</button>
            </div>
            <!-- <span>添加内容</span>
            <textarea class="block my-2 w-full rounded" v-model="newContent" maxLength="512"></textarea>
            <button class="bg-gray-300 py-2  px-4 rounded hover:bg-gray-400" @click="add"> add</button>
            <button class="bg-gray-300 py-2  px-4 rounded hover:bg-gray-400 ml-2" @click="search"> search</button>
             -->

            
            
            
            <div class="w-full mt-4">
                <div class="flex justify-between items-center">
                    <span class="text-gray-500 text-sm">
                        共 {{ data?.total }} 条数据
                    </span>
                    <button v-if="data?.total === 0" class="bg-green-600 px-2 text-sm hover:bg-green-700 rounded-lg text-gray-100 h-6" @click="showLoadDataDialog=true">添加样例数据</button>
                </div>
                <table class=" w-full bg-gray-200 text-left">
                    <thead>
                        <tr class="h-10 *:border-b *:border-slate-300 *:pl-2 *:bold">
                            <th >#</th>
                            <th >内容</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in data.list" class="*:h-16 *:border-b *:border-slate-300 *:pl-2 *:hover:bg-gray-300">
                            <td class="w-10 md:w-14">{{ index + 1 }}</td>
                            <td>
                                <textarea class="my-2 w-full bg-gray-100 h-32 max-h-64 border-gray-300 text-slate-600 text-sm" v-model="item.content" maxLength="512"></textarea>
                            </td>
                            <td class="w-16 md:w-24 lg:w-64">
                                <div class="flex gap-2 flex-col md:flex-row justify-center items-center *:rounded ">
                                    <button  @click="deleteItem(item)" class="text-gray-100 bg-orange-800 hover:bg-orange-900 w-14 md:w-16"> 删除</button>
                                    <button  @click="updateItem(item)" class="text-gray-100 bg-slate-700 hover:bg-slate-800 w-14 md:w-16"> 更新</button>
                                </div>
                                
                                
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <t-dialog
                theme="warning"
                header="确认操作"
                body="是否需要加载样例数据？"
                :visible.sync="showLoadDataDialog"
                @confirm="loadDefaultContent"
                :onClose="()=>showLoadDataDialog=false"
                />

        </div>
    </div>
    
</template>
<script>
import Config from '../../js/config'
import RepEs from '../../js/repEs'
import { MessagePlugin } from 'tdesign-vue-next';

import ragDefaultData from '../../js/ragDefaultContent'


const esClient = new RepEs(Config.getData().data.ext)
export default {
    name: 'contentIndex',
    components: {
    },
    data() {
        return {
            showLoadDataDialog:false,
            newContent: '',
            list: [],
            data: {}
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        add (functionInputContent) {
            
            let content = this.newContent
            let showProcess = true
            if (typeof functionInputContent === 'string' && functionInputContent) {
                content = functionInputContent
                showProcess = false
            }
            
            if (content.length < 10) {
                MessagePlugin.error({ content: '内容长度需要超过10个字符', placement: 'center' })
            } else {
                esClient.add(content).then(res=>{
                
                this.newContent = ''

                if (showProcess) {
                    MessagePlugin.success({ content: '添加成功', placement: 'center' })
                    this.reloadData()
                }
                
                
            })
            }
            
        },
        search () {
            esClient.query(this.newContent).then(res => {
                    console.info(res)
                    this.data = res
                    
                })
            
        },
        updateItem (item) {
            if (item.content && item.content.length > 10) {
                esClient.update(item._id, item.content).then(res => {
                    MessagePlugin.success({ content: '更新成功', placement: 'center' })
                    this.reloadData()        
                })
            } else {
                MessagePlugin.error({ content: '内容长度需要超过10个字符', placement: 'center' })
            }
            

        },
        reloadData (waitMs=600) {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.search()
                }, waitMs)
                
            }) 
        },
        deleteItem (item) {
            
            esClient.delete(item._id).then(res => {
                MessagePlugin.success({ content: '删除成功', placement: 'center' })
                this.reloadData()
            }).catch(() => {
                this.reloadData()
            })
        },
        loadDefaultContent () {

            this.showLoadDataDialog = false

            MessagePlugin.loading({ content: '正在导入，请稍等...', placement: 'center', duration: 2000 })
            ragDefaultData.forEach(item => {
                this.add(item)
            })

            this.reloadData(2000)

        }

    }
}
</script>