<script setup lang="ts">
import {
  Button as VanButton,
  Checkbox as VanCheckbox,
  CheckboxGroup as VanCheckboxGroup,
  Radio as VanRadio,
  RadioGroup as VanRadioGroup,
} from 'vant'

interface ColumnItem {
  [key: string]: string | number
}

interface ColumnsFieldNames {
  text: string
  value: string
}

const props = defineProps({
  columns: {
    type: Array as () => ColumnItem[],
    default: () => [] as ColumnItem[],
  },
  columnsFieldNames: {
    type: Object as () => ColumnsFieldNames,
    default: () => ({
      text: 'label',
      value: 'value',
    }),
  },
  gutter: {
    type: Number,
    default: 8,
  },
  columnNum: {
    type: Number,
    default: 4,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits<{
  change: [value: string | string[], list: ColumnItem[]]
}>()

const checked = defineModel<string | string[]>()

function classSel(colRow: ColumnItem): boolean {
  if (typeof checked.value === 'string' || Array.isArray(checked.value))
    return checked.value.includes(String(colRow[props.columnsFieldNames.value]))
  else if (typeof checked.value === 'undefined')
    return false
  else
    return checked.value === String(colRow[props.columnsFieldNames.value])
}

function valueChange(value: string | string[]) {
  const list = props.columns.filter((item) => {
    if (props.multiple)
      return value.includes(String(item[props.columnsFieldNames.value]))

    else
      return value === item[props.columnsFieldNames.value]
  })
  emit('change', value, list)
}
</script>

<template>
  <div id="XGridDropOption">
    <template v-if="props.multiple">
      <VanCheckboxGroup v-model="checked as string[]" direction="horizontal" @change="valueChange">
        <div class="option-container">
          <div v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]" class="option-item">
            <VanCheckbox :name="colRow[props.columnsFieldNames.value]">
              <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
                {{ colRow[props.columnsFieldNames.text] }}
              </VanButton>
            </VanCheckbox>
          </div>
        </div>
      </VanCheckboxGroup>
    </template>
    <template v-else>
      <VanRadioGroup v-model="checked" direction="horizontal" @change="valueChange">
        <div class="option-container">
          <div v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]" class="option-item">
            <VanRadio :name="colRow[props.columnsFieldNames.value]">
              <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
                {{ colRow[props.columnsFieldNames.text] }}
              </VanButton>
            </VanRadio>
          </div>
        </div>
      </VanRadioGroup>
    </template>
  </div>
</template>

<style scoped lang="less">
#XGridDropOption {
  width: 100%;
  --van-grid-item-content-padding: 2px;
  --van-padding-sm: 0px;
  --van-checkbox-label-margin: 0px;
  --van-radio-label-margin: 0px;
  --van-button-default-border-color: 'rgb(247,248,250)';

  .option-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .option-item {
    flex: 0 1 auto;
    min-width: fit-content;
  }

  .select-text-col {
    color: blue;
  }

  :deep(.van-checkbox__icon) {
    display: none;
  }

  :deep(.van-checkbox) {
    width: 100%;
  }
  :deep(.van-radio__icon) {
    display: none;
  }
  :deep(.van-radio) {
    width: 100%;
  }
  :deep(.van-button) {
    width: 100%;
    background-color: rgb(247, 248, 250);
    white-space: nowrap;
  }
  :deep(.van-checkbox__label) {
    width: 100%;
  }
  :deep(.van-radio__label) {
    width: 100%;
  }
}
</style>
