<template>
  <div v-if="props.visible" class="result-feedback">
    <el-icon class="close-btn" @click="closeResult"><Close /></el-icon>
    <!-- 成功 -->
    <div v-if="props.status">
      <img src="~@/assets/icons/config-success.png" alt="" class="result-pic" />
      <div class="success-word">保存成功</div>
      <div class="success-go" @click="goMain">前往查看</div>
      <div class="success-back" @click="goBack">5S后返回首页</div>
    </div>
    <!-- 失败 -->
    <div v-else>
      <img src="~@/assets/icons/config-fail.png" alt="" class="result-pic" />
      <div class="success-word">保存失败</div>
      <div class="success-go" @click="reSave">重新上传</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { Close } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();

  const props = defineProps<{
    visible: boolean;
    status: boolean;
  }>();

  const emit = defineEmits(['onClose', 'saveConfig']);

  const closeResult = () => {
    emit('onClose');
  };

  const goMain = () => {
    router.push('/page-config/layout');
  };

  const goBack = () => {
    router.push('/');
  };

  const reSave = () => {};
</script>

<style lang="scss" scoped>
  .result-feedback {
    width: 480px;
    height: 460px;
    // background: linear-gradient(
    //   180deg,
    //   #a8caea 1%,
    //   rgba(24, 144, 255, 0.2) 40%,
    //   rgba(148, 182, 245, 0) 100%
    // );
    background: linear-gradient(to bottom, #a8caea, white);
    border-radius: 8px;
    position: relative;
  }
  .close-btn {
    position: absolute;
    right: 24px;
    top: 23px;
  }
  .result-pic {
    margin-top: 39px;
    margin-left: 166px;
    margin-bottom: 20px;
  }
  .success-word {
    font-size: 32px;
    // font-family: YouSheBiaoTiHei;
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
    margin-bottom: 40px;
  }
  .success-go {
    width: 200px;
    height: 46px;
    background: #1890ff;
    color: #ffffff;
    border-radius: 4px;
    text-align: center;
    font-size: 20px;
    line-height: 46px;
    margin-left: 140px;
    cursor: pointer;
    margin-bottom: 12px;
  }
  .success-back {
    font-size: 14px;
    font-weight: 400;
    color: #1890ff;
    text-align: center;
    cursor: pointer;
  }
</style>
