<script setup lang="ts">
/**
 * OA 场景 - 钉钉 actionCard 按钮列表（btns）
 *
 * 用于 dingtalk 平台 actionCard 消息类型的 btns 字段编辑。
 * 每条 btn 字段对齐钉钉官方结构（DingTalkChannel::buildPayload case 'actionCard'）：
 *   - title      按钮文案（必填）
 *   - actionURL  跳转 URL（必填）
 *
 * 受 maxCount 限制（钉钉限制 6 个）。
 */
import { computed } from 'vue';

import { Button, Input } from 'ant-design-vue';

interface ActionButton {
  title?: string;
  actionURL?: string;
}

const props = withDefaults(
  defineProps<{
    /** 双向绑定的 btns 数组 */
    modelValue?: ActionButton[];
    /** 最大条数 */
    maxCount?: number;
  }>(),
  {
    modelValue: () => [],
    maxCount: 6,
  },
);

const emit = defineEmits<{
  'update:modelValue': [value: ActionButton[]];
}>();

const list = computed<ActionButton[]>({
  get: () => (Array.isArray(props.modelValue) ? props.modelValue : []),
  set: (val) => emit('update:modelValue', val),
});

const canAdd = computed(() => list.value.length < props.maxCount);

function updateItem(index: number, key: keyof ActionButton, value: string) {
  list.value = list.value.map((item, i) =>
    i === index ? { ...item, [key]: value } : item,
  );
}

function addItem() {
  if (!canAdd.value) return;
  list.value = [...list.value, {}];
}

function removeItem(index: number) {
  list.value = list.value.filter((_, i) => i !== index);
}
</script>

<template>
  <div class="button-list">
    <div
      v-for="(item, idx) in list"
      :key="idx"
      class="btn-row"
    >
      <span class="btn-index">{{ idx + 1 }}</span>
      <Input
        :value="item.title"
        placeholder="按钮文案（必填）"
        size="small"
        allow-clear
        class="btn-input"
        @update:value="(v: string) => updateItem(idx, 'title', v)"
      />
      <Input
        :value="item.actionURL"
        placeholder="跳转 URL（必填）"
        size="small"
        allow-clear
        class="btn-input btn-url"
        @update:value="(v: string) => updateItem(idx, 'actionURL', v)"
      />
      <Button
        type="link"
        size="small"
        danger
        class="btn-del"
        @click="removeItem(idx)"
      >
        删除
      </Button>
    </div>

    <Button
      v-if="canAdd"
      type="dashed"
      size="small"
      block
      @click="addItem"
    >
      + 添加按钮（{{ list.length }}/{{ maxCount }}）
    </Button>
    <div v-else-if="list.length > 0" class="max-hint">
      已达上限 {{ maxCount }} 条
    </div>
  </div>
</template>

<style scoped lang="scss">
.button-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.btn-row {
  display: grid;
  grid-template-columns: 20px 1fr 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--ant-color-split, #f0f0f0);
}

.btn-index {
  font-size: 11px;
  font-weight: 600;
  color: var(--ant-color-text-tertiary, #86909c);
  text-align: center;
}

.btn-input {
  min-width: 0;
}

.btn-del {
  padding: 0 4px;
  height: auto;
  font-size: 12px;
}

.max-hint {
  text-align: center;
  font-size: 11px;
  color: var(--ant-color-text-tertiary, #86909c);
}
</style>
