<template>
    <div>
        <div class="">
            <ElSelect v-model="type">
                <ElOption v-for="item in types" :key="item" :label="item" :value="item" />
            </ElSelect>
            <ElButton :icon="Plus" class="ml-4" @click="addType"></ElButton>
            <ElButton :icon="Trash" @click="delType" />
        </div>
        <el-tabs v-model="activeName" class="mt-4" tabPosition="left">
            <el-tab-pane v-for="(item, i) in prompts" :key="item.name" :label="item.description" :name="item.name">
                <ElInput v-model="item.template" type="textarea" :autosize="{ min: 20 }"></ElInput>
                <div class="mt-4">
                    <ElButton @click="save(i)" :loading="loading" type="primary">保存</ElButton>
                    <ElButton @click="restore(i)" :disabled="loading">恢复默认</ElButton>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import { http } from '@/plugins/http'
import { onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Trash } from '@vicons/tabler'
import { ElMessageBox } from 'element-plus'
const activeName = ref('')
const prompts = ref([])
const types = ref([])
const type = ref(null)
const props = defineProps({
    gameId: {
        type: Number,
        default: 0
    }
})
function load() {
    http.get('/prompt/types').then((res) => {
        types.value = res
        if (res.length === 0) {
            type.value = null
            prompts.value = []
        } else {
            if (!type.value) {
                type.value = res[0]
            } else if (!res.find((item) => item === type.value)) {
                type.value = res[0]
            }
        }
    })
}
watch(type, (val) => {
    if (val) {
        http.get(`/prompt/${val}`).then((res) => {
            prompts.value = res
        })
    }
})
onMounted(() => {
    load()
})
const loading = ref(false)
async function save(i) {
    try {
        loading.value = true
        await http.put('/prompt', prompts.value[i])
        loading.value = false
        ElMessage.success('保存成功')
    } catch (error) {
        loading.value = false
        ElMessage.error(error.message)
    }
}
async function restore(i) {
    prompts.value[i].template = prompts.value[i].defaultTemplate
}
async function addType() {
    const { value: type } = await ElMessageBox.prompt('请输入类型', '添加类型', {
        inputPattern: /.+/,
        inputErrorMessage: '请输入类型'
    })
    console.log(type)
    try {
        await http.put(`/prompt/types`, { type })
        ElMessage.success('添加成功')
        load()
    } catch (error) {
        ElMessage.error(error.message)
    }
}
async function delType() {
    await ElMessageBox.confirm('确定删除该类型吗？', '删除类型', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
    try {
        await http.delete(`/prompt/${type.value}`)
        ElMessage.success('删除成功')
        load()
    } catch (error) {
        ElMessage.error(error.message)
    }
}
</script>
