<template>
  <div>
    <el-text type="info">
      <span class="ml-4" style="margin-left: 4px">{{ datetimeFormat(data.time) }}</span>
    </el-text>
  </div>
  <div>
    <span>
      <el-tooltip effect="dark" content="换个答案" placement="top" popper-class="operate-tooltip">
        <el-button  text @click="regeneration" style="padding: 0">
          <el-icon><RefreshRight /></el-icon>
        </el-button>
      </el-tooltip>
      <el-divider direction="vertical" />
      <el-tooltip effect="dark" content="复制" placement="top"  popper-class="operate-tooltip">
        <el-button text @click="copyClick(data)" style="padding: 0">
          <el-icon><CopyDocument /></el-icon>
        </el-button>
      </el-tooltip>
      <el-divider direction="vertical" />
      <el-tooltip
        effect="dark"
        content="赞同"
        placement="top"
        v-if="data.operate === null || data.operate === ''"
        popper-class="operate-tooltip"
      >
        <el-button text @click="thumbUp" style="padding: 0">
          <i class="ri-thumb-up-line"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip
        effect="dark"
        content="取消赞同"
        placement="top"
        v-if="data.operate !== null && data.operate === 'thumb_up'"
        popper-class="operate-tooltip"
      >
        <el-button text @click="cancelThumb" style="padding: 0">
          <i class="ri-thumb-up-fill" style="color: orange"></i>
        </el-button>
      </el-tooltip>
      <el-divider direction="vertical" v-if="data.operate === null || data.operate === ''" />
      <el-popover
          :visible="visible"
          v-if="data.operate === null || data.operate === ''"
          placement="left"
          popper-style="z-index:99999;"
          :show-arrow=false
          title="反对原因"
          :width="260">
        <template #default>
          <el-input v-model="thumbDownReason"></el-input>
          <div style="text-align: right; margin-top: 10px">
            <el-button size="small" text @click="closeThumb">取消</el-button>
            <el-button size="small" type="primary" @click="confirmReason">确定</el-button>
          </div>
        </template>
        <template #reference>
          <el-button text @click="showPop" style="padding: 0">
            <el-tooltip
                effect="dark"
                content="反对"
                placement="top"
                popper-class="operate-tooltip"
            >
                <i class="ri-thumb-down-line"></i>
            </el-tooltip>
          </el-button>
        </template>
      </el-popover>
      <el-tooltip
        effect="dark"
        :content="'反对原因:'+data.thumbDownReason"
        placement="top"
        v-if="data.operate !== null && data.operate === 'thumb_down'"
        popper-class="operate-tooltip"
      >
        <el-button text @click="cancelThumb" style="padding: 0">
          <i class="ri-thumb-down-fill" style="color: orange"></i>
        </el-button>
      </el-tooltip>
    </span>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import Clipboard from 'vue-clipboard3'
import { datetimeFormat } from '@/utils/time'
import {updateChat} from "@/api/aichat/aichat.js";
const { proxy } = getCurrentInstance();
const route = useRoute()
const {
  params: { id }
} = route

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  index: Number
})
const thumbDownReason = ref("")
const visible = ref(false)

const emit = defineEmits(['update:data', 'regeneration', 'changeThumb'])

function regeneration() {
  emit('regeneration')
}

function closeThumb(){
  visible.value = false
  thumbDownReason.value = ""
}
function showPop(){
  visible.value = true
  thumbDownReason.value = props.data.thumbDownReason?props.data.thumbDownReason:''
}
function confirmReason(){
  let obj = {
    operate:'thumb_down',
    thumbDownReason: thumbDownReason.value
  }
  let chat = JSON.parse(JSON.stringify(props.data))
  chat.operate = 'thumb_down'
  chat.thumbDownReason = thumbDownReason.value
  chat.content = JSON.stringify(chat.content)
  updateChat(chat).then(res=>{
    visible.value = false
    emit("changeThumb",props.index,obj)
  })
}

async function copyClick(data) {
  const {toClipboard} = Clipboard()
  let str = ''
  let content = data.content
  for (let i = 0; i < content.length; i++){
    let cont = content[i]
    if (cont.type === 'text'){
      str += cont.content
    }
  }
  try {
    await toClipboard(str)
    proxy.$modal.msgSuccess("复制成功");
  } catch (e) {
    console.error(e)
    proxy.$modal.msgError('复制失败')
  }
}

function thumbUp(){
  let obj = {
    operate:'thumb_up',
    thumbDownReason: ''
  }
  let chat = JSON.parse(JSON.stringify(props.data))
  chat.operate = 'thumb_up'
  chat.content = JSON.stringify(chat.content)
  updateChat(chat).then(res=>{
    emit("changeThumb",props.index,obj)
  })
}

function cancelThumb(){
  let obj = {
    operate:'',
    thumbDownReason: ''
  }
  let chat = JSON.parse(JSON.stringify(props.data))
  chat.operate = ''
  chat.content = JSON.stringify(chat.content)
  updateChat(chat).then(res=>{
    emit("changeThumb",props.index,obj)
  })
}

function voteHandle(operate) {
  let chat = props.data
  let obj = {
    operate:'',
    thumbDownReason:''
  }
  if (operate === 'thumb_up'){
    chat.operate = 'thumb_up'
    chat.content = JSON.stringify(chat.content)
    updateChat(chat).then(res=>{
      obj.operate = 'thumb_up'
      emit("changeThumb",props.index,obj)
    })
  }
  if (operate === 'cancel-thumb-up'){
    chat.operate = ''
    chat.content = JSON.stringify(chat.content)
    updateChat(chat).then(res=>{
      obj.operate = ''
      emit("changeThumb",props.index,obj)
    })
  }
  if(operate === 'cancel-thumb-down'){

  }
  emit("voteHandle",props.index,val)
}

function ToPlainText(md) {
  return (
    md
      // 移除图片 ![alt](url)
      .replace(/!\[.*?\]\(.*?\)/g, '')
      // 移除链接 [text](url)
      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
      // 移除  标题符号 (#, ##, ###)
      .replace(/^#{1,6}\s+/gm, '')
      // 移除加粗 **text** 或 __text__
      .replace(/\*\*(.*?)\*\*/g, '$1')
      .replace(/__(.*?)__/g, '$1')
      // 移除斜体 *text* 或 _text_
      .replace(/\*(.*?)\*/g, '$1')
      .replace(/_(.*?)_/g, '$1')
      // 移除行内代码 `code`
      .replace(/`(.*?)`/g, '$1')
      // 移除代码块 ```code```
      .replace(/```[\s\S]*?```/g, '')
      // 移除多余的换行符
      .replace(/\n{2,}/g, '\n')
      .trim()
  )
}

</script>
<style lang="scss">
.operate-tooltip {
  z-index: 99999 !important;
}
</style>
