<script setup lang="ts">
import useStore from '@/stores'
import { computed } from 'vue'

const { docs } = useStore()


const showLoading = computed(() => docs.auditLoading)


const emit = defineEmits(['refresh'])

</script>

<template>
  <div class="audit-loading" v-if="showLoading">
    <div class="audit-loading-mask"></div>
    <div class="audit-loading-container">
      <div class="audit-loading-container-left">
        <img v-if="docs.auditLoadingStatus !== 'error'" src="@/assets/webapp/loading.svg" class="loading-img img" alt="" />
        <img v-else src="@/assets/webapp/chaoshi.svg" class="img" alt="" />
        {{ docs.auditLoadingText }}
      </div>
      <div class="audit-loading-container-right" v-if="docs.auditLoadingStatus === 'error'">
        <div class="pointer" style="color: #3067EF;" @click="emit('refresh')">
          <el-icon style="color: #3067EF;" class="img">
            <Refresh />
          </el-icon>
          重新审核
        </div>
        <el-icon class="close pointer" @click="docs.setAuditLoadingText('')">
          <Close />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.audit-loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  &-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
  }

  &-container {
    width: 50%;
    background: linear-gradient( 90deg, #E7EEFF 0%, #DAEAFF 48%, #DAF4FF 100%);
    border-radius: 8px;
    padding: 16px;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 101;
    display: flex;
    align-content: center;
    justify-content: space-between;

    .img {
      position: relative;
      top: 2px;
      margin-right: 4px;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .loading-img {
      animation: rotate 2s linear infinite;
    }

    &-right {
      display: flex;

      .close {
        font-size: 20px;
        margin-left: 30px;
      }
    }
  }
}
</style>
