<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

import { t } from '@/i18n';

import createCustomer from '@/assets/img/create-customer.png';
import createDevice from '@/assets/img/create-device.png';
import registerGateway from '@/assets/img/register-gateway.png';
import setupProtocol from '@/assets/img/setup-protocol.png';

interface ConfigItem {
  title: string;
  description: string;
  icon: string;
  path: string;
  done?: boolean;
}

const route = useRoute();

const configList = computed<ConfigItem[]>(() => {
  const configs: ConfigItem[] = [
    {
      title: t('createCustomer.createCustomer'),
      description: t('firstUsage.createCustomer'),
      icon: createCustomer,
      path: '/create-customer',
    },
    {
      title: t('setupProtocol.setupProtocol'),
      description: t('firstUsage.setupProtocol'),
      icon: setupProtocol,
      path: '/setup-protocol',
    },
    {
      title: t('registerGateway.registerGateway'),
      description: t('firstUsage.registerGateway'),
      icon: registerGateway,
      path: '/register-gateway',
    },
    {
      title: t('createDevice.createDevice'),
      description: t('firstUsage.createDevice'),
      icon: createDevice,
      path: '/create-device',
    },
  ];

  // 配置完成某一项时，路由查询参数 doneItems 会携带该项的页面路径，据此判断是否已经配置该项
  configs.forEach((item) => {
    item.done = route.query.doneItems?.includes(item.path);
  });

  return configs;
});
</script>

<template>
  <div class="page-container">
    <div>
      <div class="usage-tip">
        {{ $t('firstUsage.chooseItemToBeginSetup') }}
        <AButton class="skip-button" type="text" @click="$router.push('/home')">{{ $t('common.skip') }}</AButton>
      </div>
      <AFlex :gap="24" wrap="wrap">
        <div
          :class="['config-container', { 'config-container-done': item.done }]"
          v-for="(item, index) in configList"
          :key="index"
          @click="item.done || $router.push({ path: item.path, query: route.query })"
        >
          <img class="config-icon" :src="item.icon" />
          <div>
            <div class="config-title">{{ item.title }}</div>
            <div class="config-description">{{ item.description }}</div>
          </div>
          <span v-show="item.done" class="config-done-text">{{ $t('common.configured') }}</span>
        </div>
      </AFlex>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: linear-gradient(180deg, var(--antd-color-primary-opacity-20) 0%, rgb(255 255 255) 80%);
}

.usage-tip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 188px;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 500;
  line-height: 40px;
  color: var(--antd-color-text);
  text-align: center;
}

.config-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: 240px;
  height: 296px;
  text-align: center;
  cursor: pointer;
  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(10px);
  border: 1px solid #d9dbe2;
  border-radius: 16px;

  &:hover {
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, var(--antd-color-primary-opacity-15) 100%);
    border-color: var(--antd-color-primary);
    outline: 1px solid #32bac0;
  }
}

.config-container-done {
  cursor: not-allowed;

  &,
  &:hover {
    background: #f5f7fa;
    border-color: #f5f7fa;
    outline: none;
  }
}

.config-icon {
  width: 72px;
  height: 72px;
  margin-top: 56px;
  margin-bottom: 24px;
}

.config-title {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--antd-color-text);
}

.config-description {
  font-size: 12px;
  line-height: 20px;
  color: #666;
}

.config-done-text {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 14px;
  line-height: 24px;
  color: var(--antd-color-text-secondary);
}

.skip-button {
  position: absolute;
  right: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--antd-color-text-secondary);
}
</style>
