<template>
  <div class="maintenance-container">
    <PageTitle title="维保服务" />

    <div class="empty-state">
      <div class="empty-icon">
        <img
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Crect fill='%23f5f5f5' width='200' height='160' rx='8'/%3E%3Crect x='50' y='60' width='100' height='70' fill='%23e0e0e0' rx='4'/%3E%3Crect x='60' y='70' width='80' height='8' fill='%23ccc'/%3E%3Crect x='60' y='85' width='60' height='6' fill='%23ccc'/%3E%3Crect x='60' y='98' width='70' height='6' fill='%23ccc'/%3E%3Cpath d='M85 45 L95 55 L115 35' stroke='%23ccc' stroke-width='4' fill='none'/%3E%3C/svg%3E"
          alt="empty"
        />
      </div>
      <p class="empty-text">亲！您还未体验过优易办公金牌维保服务，还在犹豫什么！金牌服务从点击开始！</p>
      <el-button type="danger" plain @click="handleApply">加入金牌维保服务</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PageTitle } from '@/components';
import { useRouter } from 'vue-router';

const router = useRouter();

const handleApply = () => {
  router.push(`/valueAdded/maintenanceApply`);
};
</script>

<style scoped lang="scss">
.maintenance-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
  flex: 1;
  border-radius: 4px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;

  .empty-icon {
    width: 200px;
    height: 160px;
    margin-bottom: 24px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .empty-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
  }
}
</style>
