<script setup lang="ts">
import { Preset_Image_1, Preset_Image_2 } from '../tool';

interface Model {
  copyright?: string;

  elements?: string[];

  homeType?: number;
  homeValue?: string;
}

const copyrightPlaceholder = `\
某某机构
杭州六智科技提供技术支持\
`

const props = defineProps<{ id: string }>();
const requestData = defineModel<{ partner?: string; technicalSupporter?: string; tabletDrainageImage?: string }>('requestData', { default: {} });

const model = ref<Model>({});

watchEffect(() => reset());

const error = ref('');
watch(
  [model],
  () => {
    error.value = '';
  },
  { deep: true }
);
function save() {
  error.value = '';
  const values = model.value;
  if (values.homeType === 99 && !values.homeValue?.trim()) {
    error.value = `[自定义] 起始页需要配置值`;
  } else {
    let image = values.homeValue;
    if (values.homeType === 1) image = Preset_Image_1.split(';')[0];
    else if (values.homeType === 2) image = Preset_Image_2.split(';')[0];
    else if (values.homeType === 99 && !image?.includes('preset:')) image = `preset:99;${image}`;

    const snippets = image?.replace(/\s/g, ';')?.split(';').filter(Boolean) ?? [];
    const elIndex = snippets.findIndex((s) => s.startsWith('el'));

    if (elIndex > -1) {
      const els = snippets[elIndex].split('|').filter((k) => k != 'btn' && k != 'scan');
      els.push(...values.elements!);
      snippets[elIndex] = els.join('|');
    } else {
      snippets.push(`el:${values.elements?.join('|')}`);
    }

    const [partner, technicalSupporter] = values.copyright?.trim()?.split(/\s/) ?? [];
    requestData.value = { partner, technicalSupporter, tabletDrainageImage: snippets.join(';') };
  }
}
function reset() {
  Object.assign(model.value, { copyright: '', homeType: 1, homeValue: '', elements: [] });
  const { partner, technicalSupporter, tabletDrainageImage } = requestData.value;
  let image = tabletDrainageImage;
  if (!image || /^preset:1;?$/.test(image)) image = Preset_Image_1;
  else if (/^preset:2;?$/.test(image)) image = Preset_Image_2;

  model.value.copyright = [partner, technicalSupporter].filter(Boolean).join('\n');
  const elements = [];
  const snippets = [];
  for (const snippet of image.split(';')) {
    const [key, config] = snippet.split(':');
    if (key === 'preset') model.value.homeType = +config || 1;
    else if (key === 'el') {
      const els = config.split('|');
      if (els.includes('btn')) elements.push('btn');
      if (els.includes('scan')) elements.push('scan');

      const rest = els.filter((k) => k != 'btn' && k != 'scan').join('|');
      if (rest) snippets.push(`${key}:${rest}`);
    } else snippets.push(snippet);
  }
  model.value.elements = [...elements];
  model.value.homeValue = snippets.join(';');
}

const updateHomeType = () => {
  let image = '';
  if (model.value.homeType === 1) image = Preset_Image_1;
  else if (model.value.homeType === 2) image = Preset_Image_2;
  if (image) {
    const [_, el] = image.match(/el:([^;]*)/) ?? [];
    model.value.elements = el?.split('|') ?? [];
  }
};
</script>

<template>
  <div>
    <a-form-item label="起始页">
      <a-radio-group v-model:value="model.homeType" @change="updateHomeType()">
        <a-radio :value="1">默认</a-radio>
        <!--<a-radio :value="2">萧山</a-radio>-->
        <a-radio :value="99">
          <template v-if="model.homeType === 99">
            <div class="flex-none">自定义：</div>
            <a-textarea class="small" v-model:value="model.homeValue" :auto-size="{ minRows: 1, maxRows: 10 }" placeholder="page:~;com:~;img:~;"></a-textarea>
          </template>
          <template v-else>自定义</template>
        </a-radio>
      </a-radio-group>
      <div class="mt-2 pt-2" style="border-top: 1px #d9d9d9 dashed">
        <a-checkbox-group
          v-model:value="model.elements"
          :options="[
            { label: '显示检测按钮', value: 'btn' },
            { label: '支持扫码开始', value: 'scan' },
          ]"
        />
      </div>
    </a-form-item>
    <a-form-item label="版权信息">
      <template #help>最多显示两行文本</template>
      <a-textarea v-model:value="model.copyright" :placeholder="copyrightPlaceholder" :auto-size="{ minRows: 2, maxRows: 2 }" />
    </a-form-item>
    <div class="flex items-center" style="margin-top: 10px">
      <div class="flex-auto error">{{ error }}</div>
      <div class="flex-none">
        <vxe-button type="reset" content="重置" @click="reset()"></vxe-button>
        <vxe-button type="submit" status="primary" content="确定" @click="save()"></vxe-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ant-form-item {
  margin-bottom: 12px;
  ::placeholder {
    color: #d4d5d7;
    opacity: 1;
  }
}
.ant-radio-group {
  width: 100%;
}
.ant-radio-wrapper {
  display: flex;
  width: 100%;
  line-height: 30px;
  :deep(span:not(.ant-radio)) {
    flex: auto;
    display: flex;
    align-items: center;
  }
}
.error {
  font-size: 12px;
  color: #ff4d4f;
}
</style>
