<script setup lang="ts">
import type { QuestionnaireProps }            from '@/request/model';
import type { DialogProps as VanDialogProps } from 'vant';


type DialogProps = Partial<VanDialogProps> & {
  _ignore_close: boolean;
  options?: Option[];
  onConfirm: (option?: Option) => void;
  onCancel?: () => void;
  onClosed?: () => void;
  'onUpdate:show'(value: boolean): void;
}

interface Option {
  id: string;
  label: string;
  checked?: boolean;
  value?: string;
  // 子选项属性
  multiple?: boolean;
  options?: Option[];
}


const { multiple, disabled } = defineProps<{ multiple?: boolean; disabled?: boolean }>();
const options = defineModel<QuestionnaireProps['options']>('options', { default: [] });

const subDialog = reactive<DialogProps>({
  _ignore_close: false,
  title: '',
  showCancelButton: true,
  showConfirmButton: false,
  closeOnClickOverlay: true,
  show: false,
  'onUpdate:show'(value: boolean) {
    if ( !subDialog._ignore_close ) subDialog.show = false;
    subDialog._ignore_close = false;
  },
  onConfirm: () => { subDialog._ignore_close = false; },
  onCancel: () => { subDialog.show = false; },
});

function handle(option: QuestionnaireProps['options'][number], index: number, options: QuestionnaireProps['options'], sub = false) {
  const checked = !option.checked;
  if ( checked ) {
    subDialog.show = !!option.options?.length;
    if ( subDialog.show ) {
      subDialog.title = option.label;
      subDialog.options = option.options;
      subDialog.showConfirmButton = !!option.multiple;
      subDialog.onConfirm = (sub?: Option) => {
        subDialog._ignore_close = true;
        if ( sub ) {
          const checked = !sub.checked;
          if ( checked && !option.multiple ) for ( const op of subDialog.options! ) { op.checked = false; }
          sub.checked = checked;
          if ( option.multiple ) return;
        }
        const checked = subDialog.options!.some(op => op.checked);
        if ( checked && !multiple ) for ( const op of options ) { op.checked = false; }
        option.checked = checked;
        option.value = subDialog.options!.filter(op => op.checked).map(item => item.label).join(' ');
        subDialog.show = false;
      };
    } else {
      if ( !multiple ) { for ( const op of options ) op.checked = false; }
      option.checked = checked;
    }
  } else {
    for ( const op of option.options ?? [] ) op.checked = checked;
    option.checked = checked;
    option.value = '';
  }
}
</script>
<template>
  <div class="grid grid-rows-1 grid-cols-5 gap-4 my-4">
    <div v-for="(option, index) in options" :key="option.id"
         class="option
            flex justify-center items-center flex-wrap min-h-16
            text-lg text-primary hover:text-primary-400
            rounded-xl border border-primary hover:border-primary-400
            cursor-pointer
         "
         :class="{checked: option.checked}"
         @click="!disabled && handle(option, index, options)"
    >
      <div class="p-2 text-center">
        <span>{{ option.label }}</span>
        <span class="value" v-if="option.value">{{ option.value }}</span>
      </div>
    </div>
    <van-dialog v-if="subDialog.show" class="sub-dialog" v-bind="subDialog">
      <div class="grid grid-rows-1 grid-cols-4 gap-4 my-12 p-12">
        <div v-for="(option, index) in subDialog.options" :key="option.id"
             class="sub-option
              flex justify-center items-center min-h-16
              text-lg text-primary hover:text-white
              rounded-xl border border-primary hover:border-primary-400
             "
             :class="{checked: option.checked}"
             @click="!disabled && subDialog.onConfirm(option)"
        >
          <div class="p-2 text-center">{{ option.label }}</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<style scoped lang="scss">
.option {
  &.checked {
    color: var(--primary-color-hover);
    background: linear-gradient(to bottom, #1ca459, transparent 40%, transparent 60%, #1ca459);
  }

  .value {
    &::before {
      content: ":";
      margin: 0 4px 0 2px;
    }
  }
}

.sub-option.checked {
  color: #fff;
  background-color: var(--primary-color);;
}
</style>
<style lang="scss">
.sub-dialog {
  --van-dialog-width: 60vw;
  --van-dialog-font-size: 24px;
  --van-dialog-button-height: 60px;
  --van-button-default-font-size: 24px;
  //--van-dialog-background: #fff;
}
</style>
