<script setup lang="ts">
import type { BlockSchema, FixedField } from '#/components/oa-template-card-editor/types';

import { computed, ref, watch } from 'vue';

import { Radio, RadioGroup } from 'ant-design-vue';

import TemplateCardEditor from '#/components/oa-template-card-editor/index.vue';

/**
 * OA 场景 - 企业微信模板卡片专用编辑器
 *
 * 在通用拖拽编辑器之上做 OA 封装：
 * - 顶部用 RadioGroup 切换卡片子类型（text_notice / news_notice）
 * - 根据子类型动态切换 schema（fixedFields + blocks）
 * - 输出的 JSON 结构与企微官方文档对齐（template_card 子结构）
 *
 * 本期支持两种子类型：
 * - text_notice：文本通知卡片
 * - news_notice：图文展示卡片（在 text_notice 基础上加 card_image）
 * 其他子类型（button_interaction/vote_interaction/multiple_interaction）后续扩展
 */

interface Props {
  /** 双向绑定的 template_card 数据（企微 payload.template_card） */
  modelValue?: Record<string, any>;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({}),
});

const emit = defineEmits<{
  'update:modelValue': [value: Record<string, any>];
}>();

/** 当前选中的卡片子类型 */
const cardType = ref<string>(props.modelValue?.card_type || 'text_notice');

/** 卡片子类型选项 */
const cardTypeOptions = [
  { label: '文本通知（text_notice）', value: 'text_notice' },
  { label: '图文展示（news_notice）', value: 'news_notice' },
];

/**
 * 顶层固定字段定义（不可拖拽，固定在属性面板顶部）
 * 共通字段：card_type、source、main_title、emphasis_content、sub_title_text、card_action
 */
const commonFixedFields: FixedField[] = [
  {
    name: 'card_type',
    label: '卡片类型',
    type: 'select',
    required: true,
    options: cardTypeOptions,
    defaultValue: 'text_notice',
  },
  {
    name: 'main_title.title',
    label: '一级标题',
    type: 'string',
    placeholder: '建议不超过 26 个字',
    required: true,
  },
  {
    name: 'main_title.desc',
    label: '标题辅助信息',
    type: 'string',
    placeholder: '建议不超过 30 个字',
  },
  {
    name: 'emphasis_content.title',
    label: '关键数据内容',
    type: 'string',
    placeholder: '如「100」，建议不超过 10 个字',
  },
  {
    name: 'emphasis_content.desc',
    label: '关键数据描述',
    type: 'string',
    placeholder: '如「数据含义」，建议不超过 15 个字',
  },
  {
    name: 'sub_title_text',
    label: '二级普通文本',
    type: 'textarea',
    placeholder: '建议不超过 112 个字',
  },
  {
    name: 'card_action.type',
    label: '整体卡片点击事件',
    type: 'radio',
    options: [
      { label: '跳转 URL', value: 1 },
      { label: '跳转小程序', value: 2 },
    ],
    defaultValue: 1,
  },
  {
    name: 'card_action.url',
    label: '卡片点击跳转 URL',
    type: 'url',
    placeholder: 'https://...',
  },
];

/**
 * news_notice 特有的字段（图文展示）
 */
const newsOnlyFields: FixedField[] = [
  {
    name: 'card_image.url',
    label: '卡片图片 URL',
    type: 'image',
    acceptTypes: [0],
    placeholder: '图文展示卡片的主图',
  },
  {
    name: 'card_image.aspect_ratio',
    label: '图片宽高比',
    type: 'string',
    placeholder: '如 2.25（宽/高）',
    defaultValue: '2.25',
  },
];

/**
 * 完整的固定字段列表（根据 cardType 动态组合）
 */
const fixedFields = computed<FixedField[]>(() => {
  const list = [...commonFixedFields];
  if (cardType.value === 'news_notice') {
    // news_notice 在 main_title 之后插入 card_image 字段
    const insertIdx = list.findIndex((f) => f.name === 'main_title.desc') + 1;
    list.splice(insertIdx, 0, ...newsOnlyFields);
  }
  return list;
});

/**
 * 可拖拽块定义
 * - horizontal_content_list：二级标题+文本列表（最多 6 项）
 * - jump_list：跳转链接列表（最多 3 项）
 */
const blockSchemas: BlockSchema[] = [
  {
    type: 'horizontal_content_item',
    label: '二级标题+文本',
    icon: 'mdi:format-list-bulleted',
    targetArrayPath: 'horizontal_content_list',
    maxCount: 6,
    defaultValue: { keyname: '', value: '' },
    fields: [
      {
        name: 'keyname',
        label: '二级标题',
        type: 'string',
        required: true,
        placeholder: '建议不超过 5 个字',
      },
      {
        name: 'value',
        label: '二级文本',
        type: 'string',
        placeholder: '二级文本内容',
      },
      {
        name: 'type',
        label: '类型',
        type: 'select',
        options: [
          { label: '普通文本（默认）', value: 0 },
          { label: 'URL 链接', value: 1 },
          { label: '文件附件', value: 2 },
          { label: '成员详情', value: 3 },
        ],
        defaultValue: 0,
      },
      {
        name: 'url',
        label: '跳转 URL',
        type: 'url',
        placeholder: 'type=1 时必填',
      },
    ],
  },
  {
    type: 'jump_item',
    label: '跳转链接',
    icon: 'mdi:link-variant',
    targetArrayPath: 'jump_list',
    maxCount: 3,
    defaultValue: { title: '', type: 1, url: '' },
    fields: [
      {
        name: 'title',
        label: '跳转文案',
        type: 'string',
        required: true,
        placeholder: '建议不超过 13 个字',
      },
      {
        name: 'type',
        label: '跳转类型',
        type: 'radio',
        options: [
          { label: 'URL', value: 1 },
          { label: '小程序', value: 2 },
        ],
        defaultValue: 1,
      },
      {
        name: 'url',
        label: '跳转 URL',
        type: 'url',
        required: true,
      },
    ],
  },
];

/** 编辑器输出的 JSON（实时双向同步给父级） */
const editorValue = ref<Record<string, any>>({ ...props.modelValue });

/**
 * 监听 props.modelValue 变化，同步到内部（编辑场景回显）
 */
watch(
  () => props.modelValue,
  (val) => {
    if (val && Object.keys(val).length > 0) {
      cardType.value = val.card_type || 'text_notice';
      editorValue.value = { ...val };
    }
  },
  { immediate: true, deep: false },
);

/**
 * 切换卡片子类型时，更新 editorValue.card_type 并清空 news_notice 特有字段
 */
function handleCardTypeChange(val: any) {
  cardType.value = val;
  editorValue.value = {
    ...editorValue.value,
    card_type: val,
  };
  if (val !== 'news_notice') {
    // 切换回 text_notice 时清除 card_image 字段
    delete editorValue.value.card_image;
  }
  emit('update:modelValue', editorValue.value);
}

/**
 * 编辑器值变化时同步给父级
 */
function handleEditorUpdate(val: Record<string, any>) {
  editorValue.value = val;
  emit('update:modelValue', val);
}
</script>

<template>
  <div class="template-card-form">
    <div class="card-type-switcher">
      <label>卡片子类型：</label>
      <RadioGroup
        :value="cardType"
        size="small"
        @update:value="handleCardTypeChange"
      >
        <Radio
          v-for="opt in cardTypeOptions"
          :key="opt.value"
          :value="opt.value"
        >
          {{ opt.label }}
        </Radio>
      </RadioGroup>
    </div>

    <TemplateCardEditor
      :model-value="editorValue"
      :schema="blockSchemas"
      :fixed-fields="fixedFields"
      @update:model-value="handleEditorUpdate"
    />
  </div>
</template>

<style scoped lang="scss">
.template-card-form {
  width: 100%;
}

.card-type-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--ant-color-primary-bg, #f2f7ff);
  font-size: 13px;

  label {
    color: var(--ant-color-text-secondary, #4e5969);
    font-weight: 500;
  }
}
</style>
