<template>
  <div class="template-picker">
    <div class="template-picker__head">
      <h3 class="template-picker__title">选择问题类型</h3>
      <p class="template-picker__desc">点击模板将自动填充标题与内容，您可继续修改后提交</p>
    </div>
    <div class="template-grid">
      <button
        v-for="item in WORK_ORDER_TEMPLATES"
        :key="item.id"
        type="button"
        class="template-card"
        :class="{ 'template-card--active': modelValue === item.id }"
        @click="select(item)"
      >
        <span class="template-card__icon">{{ item.icon }}</span>
        <span class="template-card__label">{{ item.label }}</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { WORK_ORDER_TEMPLATES } from '@/utils/workOrderTemplates'

defineProps({
  modelValue: { type: String, default: '' }
})

const emit = defineEmits(['update:modelValue', 'select'])

const select = (item) => {
  emit('update:modelValue', item.id)
  emit('select', item)
}
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

.template-picker {
  margin-bottom: 24px;

  &__head {
    margin-bottom: 16px;
  }

  &__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: @store-primary;
  }

  &__desc {
    margin: 0;
    font-size: 0.85rem;
    color: @store-text-muted;
  }
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  min-height: 96px;
  border: 2px solid @store-card-border;
  border-radius: @store-radius-sm;
  background: @store-card-bg;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;

  &:hover {
    border-color: fade(@store-accent, 50%);
    transform: translateY(-2px);
    box-shadow: @store-shadow;
  }

  &--active {
    border-color: @store-accent;
    background: fade(@store-accent, 8%);
    box-shadow: 0 0 0 2px fade(@store-accent, 15%);
  }

  &__icon {
    font-size: 1.75rem;
    line-height: 1;
  }

  &__label {
    font-size: 0.85rem;
    font-weight: 500;
    color: @store-primary;
    text-align: center;
  }
}
</style>
