<script lang="ts" setup>
import type { SpreadsheetConfigJson } from '../config/spreadsheetDefaults';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import {
  Checkbox,
  Input,
  message,
  Select,
  Space,
} from 'ant-design-vue';

import ColorPicker from '#/components/form/components/color-picker.vue';
import type { CellType, ColumnTextAlign } from '#/components/canvas-spreadsheet';

import SpreadsheetFormulaField from './SpreadsheetFormulaField.vue';

const props = defineProps<{
  config: SpreadsheetConfigJson;
}>();

const emit = defineEmits<{
  save: [config: SpreadsheetConfigJson];
}>();

const colIndex = ref(0);
const title = ref('');
const fieldId = ref('');
const cellType = ref<CellType>('readonly');
const formula = ref('');
const suffix = ref('');
const filterable = ref(true);
const fixed = ref(false);
const headerColor = ref<string | undefined>();
const editable = ref(false);
const textAlign = ref<ColumnTextAlign>('inherit');

const cellTypeOptions = [
  { label: '只读', value: 'readonly' },
  { label: '文本', value: 'text' },
  { label: '数字', value: 'number' },
  { label: '公式', value: 'formula' },
];

const columnTextAlignOptions = [
  { label: '跟随全局', value: 'inherit' },
  { label: '靠左', value: 'left' },
  { label: '居中', value: 'center' },
  { label: '靠右', value: 'right' },
];

const [Modal, modalApi] = useVbenModal({
  title: '设置列',
  class: 'w-[520px]',
  onConfirm: handleSave,
});

function loadCol(col: number) {
  colIndex.value = col;
  const colCfg = props.config.columns.find((c) => c.col === col);
  const hdr = props.config.headers.find((h) => h.col === col);
  title.value = hdr?.title ?? colCfg?.fieldName ?? '';
  fieldId.value = colCfg?.fieldId ?? hdr?.fieldId ?? '';
  cellType.value = colCfg?.cellType ?? 'readonly';
  formula.value = colCfg?.formula ?? '';
  suffix.value = colCfg?.suffix ?? '';
  filterable.value = hdr?.filterable !== false;
  fixed.value = hdr?.fixed ?? false;
  headerColor.value = hdr?.headerColor;
  editable.value = colCfg?.editable ?? false;
  textAlign.value = colCfg?.textAlign ?? 'inherit';
}

function buildConfig(): SpreadsheetConfigJson {
  const headers = props.config.headers.map((h) =>
    h.col === colIndex.value
      ? {
          ...h,
          title: title.value,
          fieldId: fieldId.value,
          filterable: filterable.value,
          fixed: fixed.value,
          headerColor: headerColor.value,
        }
      : h,
  );
  const columns = props.config.columns.map((c) =>
    c.col === colIndex.value
      ? {
          ...c,
          fieldId: fieldId.value,
          fieldName: title.value,
          cellType: cellType.value,
          formula: cellType.value === 'formula' ? formula.value : undefined,
          suffix: suffix.value || undefined,
          editable: editable.value,
          textAlign:
            textAlign.value === 'inherit' ? undefined : textAlign.value,
        }
      : c,
  );
  return { ...props.config, headers, columns };
}

async function handleSave() {
  if (!title.value.trim()) {
    message.error('请输入列标题');
    return false;
  }
  emit('save', buildConfig());
  return true;
}

defineExpose({
  open: (col: number) => {
    loadCol(col);
    modalApi.open();
  },
});
</script>

<template>
  <Modal>
    <Space direction="vertical" style="width: 100%">
      <div>
        <div class="field-label">列标题</div>
        <Input v-model:value="title" />
      </div>
      <div>
        <div class="field-label">字段 ID</div>
        <Input v-model:value="fieldId" />
      </div>
      <div>
        <div class="field-label">单元格类型</div>
        <Select
          v-model:value="cellType"
          :options="cellTypeOptions"
          style="width: 100%"
        />
      </div>
      <div v-if="cellType === 'formula'">
        <div class="field-label">公式</div>
        <SpreadsheetFormulaField
          v-model="formula"
          :headers="config.headers"
        />
      </div>
      <div>
        <div class="field-label">后缀（展示用）</div>
        <Input v-model:value="suffix" placeholder="如 %" />
      </div>
      <div>
        <div class="field-label">对齐</div>
        <Select
          v-model:value="textAlign"
          :options="columnTextAlignOptions"
          style="width: 100%"
        />
      </div>
      <Checkbox v-model:checked="filterable">可筛选</Checkbox>
      <Checkbox v-model:checked="fixed">固定列</Checkbox>
      <Checkbox v-model:checked="editable">可编辑</Checkbox>
      <div>
        <div class="field-label">表头颜色</div>
        <ColorPicker v-model:value="headerColor" />
      </div>
    </Space>
  </Modal>
</template>

<style scoped>
.field-label {
  font-size: 12px;
  color: #86909c;
  margin-bottom: 4px;
}
</style>
