<script setup lang="ts">
import { ID_Report_Health } from '../nodes/config';
import { Key_jumpable, Key_miniProgramCode, Key_payLock, Key_printable } from '../tool';

interface Model {
  payLock: boolean;
  miniProgramCode: boolean;

  jumpable?: boolean;
  printable?: boolean;
}

const props = defineProps<{ id: string }>();
const requestData = defineModel<{ key: string; elements: string[] }>('requestData', { default: { elements: [] } });

const isHealthAnalysisReport = computed(() => props.id === ID_Report_Health);

const model = ref<Model>({
  payLock: true,
  miniProgramCode: false,
});

watchEffect(() => reset());

const updatePayLockAndMiniProgramCode = (key: 'payLock' | 'miniProgramCode', value: boolean) => {
  if (key === 'payLock' && value) model.value.miniProgramCode = true;
  else if (key === 'miniProgramCode' && !value) model.value.payLock = false;
};

const error = ref('');
watch(
  model,
  () => {
    error.value = '';
  },
  { deep: true }
);
function save() {
  error.value = '';

  if (model.value.payLock && !model.value.miniProgramCode) {
    model.value.miniProgramCode = true;
    nextTick(() => {
      error.value = `[扫码查看] 需要配置 [小程序码] (请重试)`;
    });
  } else {
    const key = requestData.value.key;
    const elements: string[] = [];
    if (model.value.miniProgramCode) elements.push(`${key}_${Key_miniProgramCode}`);
    if (model.value.payLock) elements.push(`${key}_${Key_payLock}`);
    if (!model.value.jumpable && isHealthAnalysisReport.value) elements.push(`${key}_${Key_jumpable}`);
    if (!model.value.printable && isHealthAnalysisReport.value) elements.push(`${key}_${Key_printable}`);
    requestData.value = { key, elements };
  }
}
function reset() {
  Object.assign(model.value, { payLock: false, miniProgramCode: false, jumpable: true, printable: true });
  const { key, elements } = requestData.value;
  for (const element of elements) {
    if (!element.startsWith(key)) continue;
    if (element.endsWith(Key_miniProgramCode)) model.value.miniProgramCode = true;
    if (element.endsWith(Key_payLock)) model.value.payLock = true;
    if (element.endsWith(Key_jumpable)) model.value.jumpable = false;
    if (element.endsWith(Key_printable)) model.value.printable = false;
  }
}
</script>

<template>
  <div>
    <a-form-item label="查看报告">
      <a-switch v-model:checked="model.payLock" checked-children="扫码查看" un-checked-children="完整展示" @change="updatePayLockAndMiniProgramCode('payLock', model.payLock)" />
    </a-form-item>
    <a-form-item label="按钮配置">
      <a-checkbox v-model:checked="model.miniProgramCode" @change="updatePayLockAndMiniProgramCode('miniProgramCode', model.miniProgramCode)">小程序码</a-checkbox>
      <template v-if="isHealthAnalysisReport">
        <a-space :size="12">
          <a-checkbox v-model:checked="model.printable">打印分析报告</a-checkbox>
          <a-checkbox v-model:checked="model.jumpable">加载调理方案</a-checkbox>
        </a-space>
      </template>
    </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;
}
.error {
  font-size: 12px;
  color: #ff4d4f;
}
</style>
