<template>
  <div class="ai-hint" v-show="item.from === 'ai' && !item.loading">
    <span>注：本回答由AI生成，内容仅供参考</span>
    <div class="upload-text" @click="uploadImage(index)">
      <n-icon size="14">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
          <g fill="none">
            <path
              d="M3.5 13h9a.75.75 0 0 1 .102 1.493l-.102.007h-9a.75.75 0 0 1-.102-1.493L3.5 13h9h-9zM7.898 1.007L8 1a.75.75 0 0 1 .743.648l.007.102v7.688l2.255-2.254a.75.75 0 0 1 .977-.072l.084.072a.75.75 0 0 1 .072.977l-.072.084L8.53 11.78a.75.75 0 0 1-.976.073l-.084-.073l-3.536-3.535a.75.75 0 0 1 .977-1.133l.084.072L7.25 9.44V1.75a.75.75 0 0 1 .648-.743L8 1l-.102.007z"
              fill="currentColor"
            ></path>
          </g>
        </svg>
      </n-icon>
      <span>下载图片</span>
    </div>
  </div>
</template>

<script setup>
import { canvasCut } from '@/utils'
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  currentIndex: {
    type: Number,
    default: 0
  }
})
/**
 * 下载AI回答为图片
 */
const uploadImage = () => {
  const range = document.getElementById(`box${props.currentIndex}`)
  // 隐藏边距线
  if (!range) {
    window['$message'].error('下载失败！')
    return
  }

  canvasCut(range)
}
</script>

<style scoped></style>
