<template>
  <div class="result">
    <div class="success" ref="successRef" :class="{ fixedHeight: docs.currentRightMenu === 1 }">
      <MdPreview
        editorId="preview-only"
        :modelValue="displayedText"
        class="maxkb-md"
      />
    </div>
  </div>
  <el-space class="success-button" v-if="showButton">
    <el-button
      type="primary"
      size="small"
      @click="
        emit('apply');
        emit('close');
      "
    >
      {{ props.status === 'apply' ? '采纳' : '替换原文' }}
    </el-button>
    <el-button
      :icon="Refresh"
      size="small"
      @click="
        emit('refresh');
        emit('close');
      "
    />
    <el-button
      :icon="Delete"
      size="small"
      @click="
        emit('delete');
        emit('close');
      "
    />
  </el-space>
</template>
<script setup lang="ts">
import MdPreview from '@/components/markdown/MdPreview.vue'
import { Refresh, Delete } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
import useStore from '@/stores'

const { docs } = useStore()

interface Props {
  status?: 'apply' | 'replace'
  successText?: string
  showButton: boolean
}

const emit = defineEmits(['refresh', 'delete', 'apply', 'close', 'hideLoading'])
const props = withDefaults(defineProps<Props>(), {
  successText: ''
})
// 响应式数据
const displayedText = computed(() => {
  scrollToBottom()
  return props.successText
})
const successRef: any = ref(null)

// 滚动到底部的方法
const scrollToBottom = () => {
  if (successRef.value) {
    successRef.value.scrollTop = successRef.value.scrollHeight
  }
}
</script>
<style scoped lang="scss">
.result {
  padding: 1px;
  border-radius: 8px;
  background: radial-gradient(
    circle,
    rgba(48, 103, 239, 1),
    rgba(140, 81, 242, 1),
    rgba(48, 103, 239, 1),
    rgba(173, 211, 249, 1)
  );
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  margin-bottom: 4px;

  .success {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    z-index: 102;
    color: #333333;
    line-height: 36px;
  }
  //.fixedHeight {
  //   max-height: 300px;
  //   overflow-y: auto;
  //}
}

.success-button {
  width: 100%;
  height: 57px;
}
</style>
