<script setup>
import { computed } from "vue";
import { Icon } from "@iconify/vue";
import { Button } from "../../../../ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../ui/dropdown-menu";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import { Separator } from "../../../../ui/separator";
import { Field, FieldLabel } from "../../../../ui/field";
import { Locale } from "../../../../ui/locale";
import { Textarea } from "../../../../ui/textarea";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupNumberField
} from "../../../../ui/input-group";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../../ui/tabs";
import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
import { Markdown } from "../../../../ui/markdown";
import TriggersField from "../../../../actions/components/triggers-field.vue";
import { itemSchema, remoteOptionsSchema, schema, writeSchema } from "./schema";
defineOptions({ name: "ShwfedTableComboboxMultiConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const fieldSchema = schema(() => {
});
const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
const itemFieldSchema = itemSchema(() => {
});
const itemFieldTitle = (f) => getStructFieldTitle(itemFieldSchema, f) ?? f;
const itemFieldDescription = (f) => getStructFieldDescription(itemFieldSchema, f);
const remoteSchema = remoteOptionsSchema(() => {
});
const remoteFieldTitle = (f) => getStructFieldTitle(remoteSchema, f) ?? f;
const remoteFieldDescription = (f) => getStructFieldDescription(remoteSchema, f);
const writeUnion = writeSchema(() => {
});
const writeMembers = (writeUnion.ast.types ?? []).map(
  (ast) => (
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    { ast }
  )
);
const writeFieldTitle = (f) => {
  for (const m of writeMembers) {
    const t = getStructFieldTitle(m, f);
    if (t) return t;
  }
  return f;
};
const writeFieldDescription = (f) => {
  for (const m of writeMembers) {
    const d = getStructFieldDescription(m, f);
    if (d) return d;
  }
  return void 0;
};
const ROW_VARS = {
  row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
  index: { type: "number", label: "\u884C\u7D22\u5F15" }
};
const ROW_JSON_VARS = {
  ...ROW_VARS,
  json: { type: "dyn", label: "HTTP \u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09" }
};
const ROW_OPTION_VARS = {
  ...ROW_VARS,
  option: { type: "dyn", label: "\u5F53\u524D\u9009\u9879" }
};
const ROW_VALUE_VARS = {
  ...ROW_VARS,
  value: { type: "dyn", label: "\u7528\u6237\u5F53\u524D\u9009\u4E2D\u9879 `value` \u7EC4\u6210\u7684\u6570\u7EC4\uFF08\u6E05\u7A7A\u65F6\u4E3A\u7A7A\u6570\u7EC4\uFF09" }
};
const JSON_VARS = {
  json: { type: "dyn", label: "HTTP \u54CD\u5E94\u4F53" }
};
function celModel(field) {
  return computed({
    get: () => value.value[field] ?? "",
    set: (v) => {
      if (v === "") {
        const { [field]: _omit, ...rest } = value.value;
        value.value = rest;
      } else {
        value.value = { ...value.value, [field]: v };
      }
    }
  });
}
const hiddenModel = celModel("hidden");
const disabledModel = celModel("disabled");
const readonlyModel = celModel("readonly");
const writeKind = computed(() => value.value.write.kind);
function setWriteKind(kind) {
  if (value.value.write.kind === kind) return;
  const write = kind === "binding" ? { kind: "binding", binding: "" } : { kind: "remote", accessor: "" };
  value.value = { ...value.value, write };
}
function patchRemoteWrite(patch) {
  if (value.value.write.kind !== "remote") return;
  value.value = { ...value.value, write: { ...value.value.write, ...patch } };
}
function remoteWriteCelModel(field) {
  return computed({
    get: () => value.value.write.kind === "remote" ? value.value.write[field] ?? "" : "",
    set: (v) => {
      if (value.value.write.kind !== "remote") return;
      if (v === "") {
        const { [field]: _omit, ...rest } = value.value.write;
        value.value = { ...value.value, write: rest };
      } else {
        patchRemoteWrite({ [field]: v });
      }
    }
  });
}
const bindingModel = computed({
  get: () => value.value.write.kind === "binding" ? value.value.write.binding : "",
  set: (v) => {
    if (value.value.write.kind !== "binding") return;
    value.value = { ...value.value, write: { kind: "binding", binding: v.trim() } };
  }
});
const accessorModel = computed({
  get: () => value.value.write.kind === "remote" ? value.value.write.accessor : "",
  set: (v) => patchRemoteWrite({ accessor: v })
});
const onChangeModel = remoteWriteCelModel("onChange");
const successMessageModel = remoteWriteCelModel("successMessage");
const triggers = computed(
  () => value.value.write.kind === "remote" ? value.value.write.triggers ?? [] : []
);
function updateTriggers(next) {
  if (value.value.write.kind !== "remote") return;
  if (next.length === 0) {
    const { triggers: _omit, ...rest } = value.value.write;
    value.value = { ...value.value, write: rest };
  } else {
    value.value = { ...value.value, write: { ...value.value.write, triggers: [...next] } };
  }
}
const optionsKind = computed(() => value.value.options.kind);
function emptyStatic() {
  return { kind: "static", items: [] };
}
function emptyRemote() {
  return {
    kind: "remote",
    request: "",
    options: "",
    optionValue: "option",
    optionLabel: [{ locale: "zh", message: "" }]
  };
}
function setKind(kind) {
  if (value.value.options.kind === kind) return;
  value.value = {
    ...value.value,
    options: kind === "static" ? emptyStatic() : emptyRemote()
  };
}
const items = computed(() => {
  return value.value.options.kind === "static" ? value.value.options.items : [];
});
function patchStatic(patch) {
  if (value.value.options.kind !== "static") return;
  value.value = {
    ...value.value,
    options: { ...value.value.options, ...patch }
  };
}
function patchRemote(patch) {
  if (value.value.options.kind !== "remote") return;
  value.value = {
    ...value.value,
    options: { ...value.value.options, ...patch }
  };
}
const requestModel = computed({
  get: () => value.value.options.kind === "remote" ? value.value.options.request : "",
  set: (v) => patchRemote({ request: v })
});
const optionsExprModel = computed({
  get: () => value.value.options.kind === "remote" ? value.value.options.options : "",
  set: (v) => patchRemote({ options: v })
});
const optionValueModel = computed({
  get: () => value.value.options.kind === "remote" ? value.value.options.optionValue : "option",
  set: (v) => patchRemote({ optionValue: v })
});
const optionLabelModel = computed({
  get: () => value.value.options.kind === "remote" ? value.value.options.optionLabel : [{ locale: "zh", message: "" }],
  set: (v) => patchRemote({ optionLabel: v })
});
const optionKeywordsModel = computed({
  get: () => value.value.options.kind === "remote" ? value.value.options.optionKeywords ?? "" : "",
  set: (v) => {
    if (value.value.options.kind !== "remote") return;
    if (v === "") {
      const { optionKeywords: _omit, ...rest } = value.value.options;
      value.value = { ...value.value, options: rest };
    } else {
      patchRemote({ optionKeywords: v });
    }
  }
});
function newId() {
  return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
    const r = Math.random() * 16 | 0;
    const v = c === "x" ? r : r & 3 | 8;
    return v.toString(16);
  });
}
function newItem() {
  return {
    id: newId(),
    label: [{ locale: "zh", message: "" }],
    value: { kind: "text", value: "" }
  };
}
function patchItem(index, patch) {
  if (value.value.options.kind !== "static") return;
  const next = [...value.value.options.items];
  const cur = next[index];
  if (!cur) return;
  next[index] = { ...cur, ...patch };
  patchStatic({ items: next });
}
function addItem() {
  if (value.value.options.kind !== "static") return;
  patchStatic({ items: [...value.value.options.items, newItem()] });
}
function removeItem(index) {
  if (value.value.options.kind !== "static") return;
  const next = [...value.value.options.items];
  next.splice(index, 1);
  patchStatic({ items: next });
}
function setItemKind(index, kind) {
  if (value.value.options.kind !== "static") return;
  const cur = value.value.options.items[index];
  if (!cur || cur.value.kind === kind) return;
  patchItem(index, {
    value: kind === "text" ? { kind: "text", value: "" } : { kind: "number", value: 0 }
  });
}
function setItemTextValue(index, text) {
  patchItem(index, { value: { kind: "text", value: text } });
}
function setItemNumberValue(index, n) {
  patchItem(index, {
    value: {
      kind: "number",
      value: typeof n === "number" && Number.isFinite(n) ? n : 0
    }
  });
}
function setItemLabel(index, label) {
  patchItem(index, { label });
}
function setItemTooltip(index, tooltip) {
  const isEmpty = !tooltip || tooltip.every((l) => l.message.trim().length === 0);
  if (value.value.options.kind !== "static") return;
  if (isEmpty) {
    const cur = value.value.options.items[index];
    if (!cur) return;
    const { tooltip: _omit, ...rest } = cur;
    const next = [...value.value.options.items];
    next[index] = rest;
    patchStatic({ items: next });
  } else {
    patchItem(index, { tooltip });
  }
}
function keywordsText(item) {
  return (item.keywords ?? []).join("\n");
}
function setItemKeywords(index, text) {
  if (value.value.options.kind !== "static") return;
  const list = text.split("\n").map((s) => s.trim()).filter((s) => s.length > 0);
  const cur = value.value.options.items[index];
  if (!cur) return;
  const next = [...value.value.options.items];
  if (list.length === 0) {
    const { keywords: _omit, ...rest } = cur;
    next[index] = rest;
  } else {
    next[index] = { ...cur, keywords: list };
  }
  patchStatic({ items: next });
}
</script>

<template>
  <div class="space-y-5">
    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('title')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('title')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("title") }}
        </FieldLabel>
        <Locale v-model="value.title" />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('tooltip')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('tooltip')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("tooltip") }}
        </FieldLabel>
        <Locale
          v-model="value.tooltip"
          markdown
        />
      </Field>
    </div>
    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('placeholder')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('placeholder')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("placeholder") }}
        </FieldLabel>
        <Locale v-model="value.placeholder" />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('size')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('size')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("size") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupNumberField
            :model-value="value.size"
            :disabled="value.grow"
            :min="0"
            @update:model-value="(v) => value = { ...value, size: v }"
          />
          <InputGroupAddon align="inline-end">
            <InputGroupButton
              :variant="value.grow ? 'primary' : 'ghost'"
              size="xs"
              @click="value = { ...value, grow: !value.grow }"
            >
              <Icon :icon="value.grow ? 'fluent:lock-closed-20-regular' : 'fluent:arrow-autofit-width-20-regular'" />
              {{ fieldTitle("grow") }}
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </Field>
    </div>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template #tooltip>
          <Markdown
            source="选项可以是静态配置的固定列表，也可以由远程接口实时加载"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        选项来源
      </FieldLabel>

      <Tabs
        :model-value="optionsKind"
        @update:model-value="(v) => {
  if (v === 'static' || v === 'remote') setKind(v);
}"
      >
        <TabsList>
          <TabsTrigger value="static">
            静态
          </TabsTrigger>
          <TabsTrigger value="remote">
            远程
          </TabsTrigger>
        </TabsList>
        <TabsContent
          value="static"
          class="outline-none"
        >
          <div class="flex flex-col gap-3 pt-3">
            <div
              v-for="(item, index) in items"
              :key="item.id"
              data-slot="combobox-multi-item"
              class="relative pt-8 grid grid-cols-2 gap-3 rounded border border-zinc-200 bg-zinc-50/40 p-3"
            >
              <InputGroupButton
                variant="destructive"
                size="icon-xs"
                data-slot="combobox-multi-item-delete"
                aria-label="删除选项"
                class="absolute right-2 top-2 z-10"
                @click="removeItem(index)"
              >
                <Icon icon="fluent:delete-20-regular" />
              </InputGroupButton>

              <Field orientation="vertical">
                <FieldLabel class="text-xs text-zinc-500">
                  <template
                    v-if="itemFieldDescription('label')"
                    #tooltip
                  >
                    <Markdown
                      :source="itemFieldDescription('label')"
                      block
                      class="prose prose-sm prose-zinc"
                    />
                  </template>
                  {{ itemFieldTitle("label") }}
                </FieldLabel>
                <Locale
                  markdown
                  translate-hint="combobox option label"
                  :model-value="item.label"
                  @update:model-value="(v) => setItemLabel(index, v)"
                />
              </Field>

              <Field orientation="vertical">
                <FieldLabel class="text-xs text-zinc-500">
                  <template
                    v-if="itemFieldDescription('value')"
                    #tooltip
                  >
                    <Markdown
                      :source="itemFieldDescription('value')"
                      block
                      class="prose prose-sm prose-zinc"
                    />
                  </template>
                  {{ itemFieldTitle("value") }}
                </FieldLabel>
                <InputGroup>
                  <InputGroupAddon align="inline-start">
                    <DropdownMenu>
                      <DropdownMenuTrigger as-child>
                        <InputGroupButton
                          size="icon-sm"
                          as-child
                        >
                          <button
                            type="button"
                            data-slot="combobox-multi-item-kind-trigger"
                            class="text-zinc-500 transition-colors hover:text-zinc-700 [&_svg:not([class*='size-'])]:size-3.5"
                            aria-label="切换值类型"
                          >
                            <Icon
                              :icon="item.value.kind === 'number' ? 'fluent:number-symbol-20-regular' : 'fluent:textbox-20-regular'"
                            />
                          </button>
                        </InputGroupButton>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="start">
                        <DropdownMenuItem @select="setItemKind(index, 'text')">
                          <Icon icon="fluent:textbox-20-regular" />
                          <span>文本</span>
                        </DropdownMenuItem>
                        <DropdownMenuItem @select="setItemKind(index, 'number')">
                          <Icon icon="fluent:number-symbol-20-regular" />
                          <span>数字</span>
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </InputGroupAddon>

                  <InputGroupInput
                    v-if="item.value.kind === 'text'"
                    :model-value="item.value.value"
                    placeholder="例：admin"
                    @update:model-value="(v) => setItemTextValue(index, String(v ?? ''))"
                  />
                  <InputGroupNumberField
                    v-else
                    :model-value="item.value.value"
                    @update:model-value="(v) => setItemNumberValue(index, v)"
                  />
                </InputGroup>
              </Field>

              <Field orientation="vertical">
                <FieldLabel class="text-xs text-zinc-500">
                  <template
                    v-if="itemFieldDescription('tooltip')"
                    #tooltip
                  >
                    <Markdown
                      :source="itemFieldDescription('tooltip')"
                      block
                      class="prose prose-sm prose-zinc"
                    />
                  </template>
                  {{ itemFieldTitle("tooltip") }}
                </FieldLabel>
                <Locale
                  markdown
                  translate-hint="combobox option tooltip"
                  :model-value="item.tooltip"
                  @update:model-value="(v) => setItemTooltip(index, v)"
                />
              </Field>

              <Field orientation="vertical">
                <FieldLabel class="text-xs text-zinc-500">
                  <template
                    v-if="itemFieldDescription('keywords')"
                    #tooltip
                  >
                    <Markdown
                      :source="itemFieldDescription('keywords')"
                      block
                      class="prose prose-sm prose-zinc"
                    />
                  </template>
                  {{ itemFieldTitle("keywords") }}
                </FieldLabel>
                <Textarea
                  data-slot="combobox-multi-item-keywords"
                  :model-value="keywordsText(item)"
                  placeholder="每行一个关键词"
                  :rows="2"
                  @update:model-value="(v) => setItemKeywords(index, String(v ?? ''))"
                />
              </Field>
            </div>

            <Button
              type="button"
              data-slot="combobox-multi-add-item"
              class="w-full justify-center"
              @click="addItem"
            >
              <Icon icon="fluent:add-20-regular" />
              <span>增加选项</span>
            </Button>
          </div>
        </TabsContent>
        <TabsContent
          value="remote"
          class="outline-none"
        >
          <div class="grid grid-cols-2 gap-x-6 gap-y-4 pt-3">
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="remoteFieldDescription('request')"
                  #tooltip
                >
                  <Markdown
                    :source="remoteFieldDescription('request')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ remoteFieldTitle("request") }}
              </FieldLabel>
              <ExpressionEditor
                v-model="requestModel"
                placeholder="如 http.get('/api/roles')"
                result-type="HttpRequest"
                :extra-vars="ROW_VARS"
                multiline
              />
            </Field>
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="remoteFieldDescription('options')"
                  #tooltip
                >
                  <Markdown
                    :source="remoteFieldDescription('options')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ remoteFieldTitle("options") }}
              </FieldLabel>
              <ExpressionEditor
                v-model="optionsExprModel"
                placeholder="如 json.data"
                result-type="dyn"
                :extra-vars="ROW_JSON_VARS"
                multiline
              />
            </Field>
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="remoteFieldDescription('optionValue')"
                  #tooltip
                >
                  <Markdown
                    :source="remoteFieldDescription('optionValue')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ remoteFieldTitle("optionValue") }}
              </FieldLabel>
              <ExpressionEditor
                v-model="optionValueModel"
                placeholder="如 option.id"
                result-type="dyn"
                :extra-vars="ROW_OPTION_VARS"
              />
            </Field>
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="remoteFieldDescription('optionLabel')"
                  #tooltip
                >
                  <Markdown
                    :source="remoteFieldDescription('optionLabel')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ remoteFieldTitle("optionLabel") }}
              </FieldLabel>
              <Locale
                :model-value="optionLabelModel"
                markdown
                translate-hint="combobox option label"
                @update:model-value="(v) => optionLabelModel = v"
              />
            </Field>
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="remoteFieldDescription('optionKeywords')"
                  #tooltip
                >
                  <Markdown
                    :source="remoteFieldDescription('optionKeywords')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ remoteFieldTitle("optionKeywords") }}
              </FieldLabel>
              <ExpressionEditor
                v-model="optionKeywordsModel"
                placeholder="如 option.aliases"
                result-type="dyn"
                :extra-vars="ROW_OPTION_VARS"
              />
            </Field>
          </div>
        </TabsContent>
      </Tabs>
    </Field>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template #tooltip>
          <Markdown
            source="**绑定**：单元格行内可编辑，读写同一 dot-prop 路径；**远程**：只读回显行数据，选择后发起请求写入服务端"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        写入方式
      </FieldLabel>

      <Tabs
        :model-value="writeKind"
        @update:model-value="(v) => {
  if (v === 'binding' || v === 'remote') setWriteKind(v);
}"
      >
        <TabsList>
          <TabsTrigger value="binding">
            绑定
          </TabsTrigger>
          <TabsTrigger value="remote">
            远程
          </TabsTrigger>
        </TabsList>
        <TabsContent
          value="binding"
          class="outline-none"
        >
          <div class="pt-3">
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="writeFieldDescription('binding')"
                  #tooltip
                >
                  <Markdown
                    :source="writeFieldDescription('binding')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ writeFieldTitle("binding") }}
              </FieldLabel>
              <InputGroup>
                <InputGroupInput
                  v-model="bindingModel"
                  placeholder="例：roles"
                  class="font-mono"
                />
              </InputGroup>
            </Field>
          </div>
        </TabsContent>
        <TabsContent
          value="remote"
          class="outline-none"
        >
          <div class="grid grid-cols-2 gap-x-6 gap-y-4 pt-3">
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="writeFieldDescription('accessor')"
                  #tooltip
                >
                  <Markdown
                    :source="writeFieldDescription('accessor')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ writeFieldTitle("accessor") }}
              </FieldLabel>
              <ExpressionEditor
                v-model="accessorModel"
                placeholder="如 row.roles"
                result-type="dyn"
                :extra-vars="ROW_VARS"
              />
            </Field>
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="writeFieldDescription('onChange')"
                  #tooltip
                >
                  <Markdown
                    :source="writeFieldDescription('onChange')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ writeFieldTitle("onChange") }}
              </FieldLabel>
              <ExpressionEditor
                v-model="onChangeModel"
                placeholder="如 http.patch('/api/items/' + row.id).body({ roles: value })"
                result-type="HttpRequest"
                :extra-vars="ROW_VALUE_VARS"
                multiline
              />
            </Field>
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="writeFieldDescription('successMessage')"
                  #tooltip
                >
                  <Markdown
                    :source="writeFieldDescription('successMessage')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ writeFieldTitle("successMessage") }}
              </FieldLabel>
              <ExpressionEditor
                v-model="successMessageModel"
                placeholder="如 '已更新'"
                result-type="string"
                :extra-vars="JSON_VARS"
              />
            </Field>
            <Field orientation="vertical">
              <FieldLabel class="text-xs text-zinc-500">
                <template
                  v-if="writeFieldDescription('triggers')"
                  #tooltip
                >
                  <Markdown
                    :source="writeFieldDescription('triggers')"
                    block
                    class="prose prose-sm prose-zinc"
                  />
                </template>
                {{ writeFieldTitle("triggers") }}
              </FieldLabel>
              <TriggersField
                :triggers="triggers"
                @update:triggers="updateTriggers"
              />
            </Field>
          </div>
        </TabsContent>
      </Tabs>
    </Field>

    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('hidden')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('hidden')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("hidden") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="hiddenModel"
          placeholder="例：row.archived"
          result-type="bool"
          :extra-vars="ROW_VARS"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('disabled')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('disabled')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("disabled") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="disabledModel"
          placeholder="例：row.locked"
          result-type="bool"
          :extra-vars="ROW_VARS"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('readonly')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('readonly')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("readonly") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="readonlyModel"
          placeholder="例：row.id == null"
          result-type="bool"
          :extra-vars="ROW_VARS"
        />
      </Field>
    </div>
    <Separator />
    <div class="flex flex-wrap gap-x-8 gap-y-3">
      <Field
        orientation="vertical"
        class="w-full max-w-xs"
      >
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('enableSorting')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('enableSorting')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("enableSorting") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupInput
            :model-value="value.sortKey"
            placeholder="例：created_at"
            @update:model-value="(v) => value = { ...value, sortKey: v || void 0 }"
          />
          <InputGroupAddon align="inline-end">
            <InputGroupButton
              :variant="value.enableSorting ? 'primary' : 'ghost'"
              size="xs"
              @click="value = { ...value, enableSorting: !value.enableSorting }"
            >
              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
              {{ fieldTitle("enableSorting") }}
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </Field>
    </div>
  </div>
</template>
