<template>
  <div class="loading">
    <el-row justify="space-between" class="loading-container">
      <el-col :span="12">
        <el-space>
          <img src="../../../../assets/webapp/loading.svg" class="loading-img" alt="" v-if="['loading'].includes(status)" />
          <img
            src="../../../../assets/webapp/chaoshi.svg"
            alt=""
            v-else-if="['timeout', 'error'].includes(status)"
          />
          {{ text }}
        </el-space>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-space style="color: #3067ef; cursor: pointer" @click="onClick">
          <img src="../../../../assets/webapp/tingzhi.svg" alt="" v-if="['loading'].includes(status)" />
          <img
            src="../../../../assets/webapp/shuaxin.svg"
            alt=""
            v-if="['timeout', 'error'].includes(status)"
          />
          {{ buttonText }}
          <el-icon v-if="status === 'error'" @click="emit('close')"><Close /></el-icon>
        </el-space>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import useStore from '@/stores'

const { docs } = useStore()

const emit = defineEmits(['stop', 'refresh', 'close'])

const status = ref('loading')

const buttonText = computed(() => {
  if (status.value === 'loading') {
    return '终止生成'
  }
  return '重新生成'
})
const onClick = () => {
  if (status.value === 'loading') {
    status.value = 'error'
    emit('stop')
  } else {
    emit('refresh')
    status.value = 'loading'
  }
}

const text = computed(() => {
  if (status.value === 'error') {
    return '生成失败'
  }
  return docs.aiLoadingText || 'AI正在生成文章'
})

const updateStatus = (val: string) => {
  status.value = val
}
defineExpose({
  updateStatus
})
</script>
<style scoped lang="scss">
.loading {
  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, .12);
  .loading-container {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    z-index: 102;
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .loading-img {
      animation: rotate 2s linear infinite;
    }
  }
}

</style>
