<template>
  <div class="pay-methods" :class="{ 'pay-methods--grid': layout === 'grid' }">
    <div
      v-for="item in methods"
      :key="item.value"
      class="pay-method"
      :class="[{ active: modelValue === item.value }, `pay-method--${item.value}`]"
      @click="$emit('update:modelValue', item.value)"
    >
      <component :is="item.icon" :size="28" />
      <span>{{ item.label }}</span>
      <icon-check-circle-fill v-if="modelValue === item.value" class="check" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import {
  IconAlipayCircle,
  IconWechatpay,
  IconCheckCircleFill
} from '@arco-design/web-vue/es/icon'

defineEmits(['update:modelValue'])

const defaultMethods = [
  { value: 'alipay', label: '支付宝', icon: IconAlipayCircle },
  { value: 'wxpay', label: '微信支付', icon: IconWechatpay }
]

const props = defineProps({
  modelValue: { type: String, default: '' },
  methods: { type: Array, default: () => [] },
  fallbackDefault: { type: Boolean, default: true },
  layout: { type: String, default: 'stack' }
})

const methods = computed(() => {
  const source = props.methods.length ? props.methods : (props.fallbackDefault ? defaultMethods : [])
  return source.map(item => ({
    value: item.value || item.type,
    label: item.label || item.name || item.type,
    icon: (item.value || item.type) === 'wxpay' ? IconWechatpay : IconAlipayCircle
  })).filter(item => item.value)
})
</script>

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

.pay-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pay-methods--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

.pay-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid @store-card-border;
  border-radius: @store-radius-sm;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  position: relative;
  color: @store-primary;
  min-height: 58px;

  &:hover {
    border-color: fade(@store-accent, 50%);
    background: fade(@store-accent, 6%);
  }

  &.active {
    border-color: @store-accent;
    background: fade(@store-accent, 10%);
    box-shadow: 0 0 0 1px fade(@store-accent, 20%);
  }

  &--alipay {
    :deep(svg) { color: #1677ff; }
  }

  &--wxpay {
    :deep(svg) { color: #07c160; }
  }

  .check {
    margin-left: auto;
    color: @store-accent;
    font-size: 20px;
  }
}
</style>
