<script setup lang="ts">
import { reactive } from 'vue'
import { getRemoteCsdnCommit, askGpt } from '../../service/csdnApi.js'
import { message } from 'ant-design-vue';
const state: any = reactive({
    loading: false,
    analysis:'',
    text: '',
    articleId: '133955447',
    page: 1,
    pageSize: 10,
    unfold: '',
    commitId: ''
})

const getCommit = async () => {
    state.loading = true
    state.text = ''
    const params = { ...state }
    delete params.text
    delete params.loading
    try {
        const result = await getRemoteCsdnCommit(params)
        console.log(result, 'result')
        const { data } = result?.data
        if (data?.list) {
            state.text = data.list.map((item:any) => item.info.content).join(',')
        }
    }
    catch (e) {
        message.warning(JSON.stringify(e))
    }
    finally {
        state.loading = false
    }

}
const analysisCommit = async () => {
    try {
        console.log('state.text',state.text)
        const res = await askGpt({
            content: '帮我分析总结这些评论' + state.text
        })
        if(res?.data?.data?.result){
            state.analysis=res?.data?.data?.result
        }
    }
    catch (e) {
        message.warn(JSON.stringify(e))
    }
}
</script>

<template>
    <a-spin :spinning="state.loading">
        <div>
            <div style="display: flex;">
                <div style="width:50%">
                    <div>
                        articleId: <a-input v-model:value="state.articleId" />
                    </div>
                    <div>
                        page: <a-input v-model:value="state.page" />
                    </div>

                    <div>
                        pageSize: <a-input v-model:value="state.pageSize" />
                    </div>
                    <div>
                        unfold: <a-input v-model:value="state.unfold" />
                    </div>
                    <div>
                        commitId: <a-input v-model:value="state.commitId" />
                    </div>
                </div>
                <div style="width:50%;display: flex;justify-content: center;align-items: center;">
                    <a-button @click="getCommit">获取评论</a-button>
                </div>
            </div>
            <div>
                <div class="des">
                    评论
                </div>
                <a-textarea v-model:value="state.text" placeholder="评论" :disabled="state.loading"
                    :auto-size="{ minRows: 2, maxRows: 5 }" />
            </div>

            <div style="margin-top:10px;;width:100%;display: flex;justify-content: center;align-items: center;">
                <a-button @click="analysisCommit">文心一言分析评论</a-button>
            </div>
            <div style="margin-top:10px;">
                <div class="des">
                    生成的评论总结
                </div>
                <a-textarea v-model:value="state.analysis" placeholder="生成的文章总结" readonly
                    :auto-size="{ minRows: 2, maxRows: 5 }" />
            </div>
        </div>
    </a-spin>
</template>