<script lang="ts" setup>
import { computed } from 'vue';
import { Step } from './customize.model';

const props = defineProps({
  step: {
    validator(value: Step) {
      return [Step.step1, Step.step2, Step.step3, Step.step4, Step.step5].includes(value);
    },
    required: true
  }
});

const iconClass = computed(() => `icon-${props.step}`);
</script>

<template>
  <div class="step-container">
    <div class="icon-item" :class="iconClass"></div>
    <template v-if="step === Step.step1">
      <ul>
        <li class="customize-title">品牌信息定制工具</li>
        <li class="customize-subtitle">导入品牌信息，定制登录页</li>
      </ul>
    </template>
    <template v-if="step === Step.step2">
      <ul>
        <li class="customize-title">品牌风格定制工具</li>
        <li class="customize-subtitle">定制颜色、文本、布局、控件</li>
      </ul>
    </template>
    <template v-if="step === Step.step3">
      <ul>
        <li class="customize-title">首页卡片自定义工具</li>
        <li class="customize-subtitle">编辑首页面板，调整卡片样式及位置</li>
      </ul>
    </template>
    <template v-if="step === Step.step4">
      <ul>
        <li class="customize-title">定制文件导出工具</li>
        <li class="customize-subtitle">将当前方案生成为定制文件并导出</li>
      </ul>
    </template>
    <template v-if="step === Step.step5">
      <ul>
        <li class="customize-title">定制生效指南</li>
        <li class="customize-subtitle">查看如何使生成的定制文件在软件内生效</li>
      </ul>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.icon-item {
  width: 160px;
  height: 139px;
}
%icon-step {
  display: block;
  margin: 56px 19px 69px 19px;
  width: 160px;
  height: 139px;
}
.icon-step1 {
  @extend %icon-step;
  background: url('/image/customize-1.png') no-repeat center;
  background-size: cover;
}

.icon-step2 {
  @extend %icon-step;
  background: url('/image/customize-2.png') no-repeat center;
  background-size: cover;
}

.icon-step3 {
  @extend %icon-step;
  background: url('/image/customize-3.png') no-repeat center;
  background-size: cover;
}

.icon-step4 {
  @extend %icon-step;
  background: url('/image/customize-4.png') no-repeat center;
  background-size: cover;
}

.icon-step5 {
  @extend %icon-step;
  background: url('/image/customize-5.png') no-repeat center;
  background-size: cover;
}

.customize-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--o-text-color-primary);
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
}
.customize-subtitle {
  font-size: 12px;
  color: var(--o-text-color-secondary);
  letter-spacing: 0;
  text-align: center;
  line-height: 18px;
  text-align: center;
  margin: 8px 34px 8px 34px;
}
.step-container {
  height: 100%;
}
</style>