<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue';

import { useClipboard } from '@vueuse/core';
import { Page } from '@vben/common-ui';
import { useAccessStore } from '@vben/stores';

import InlineFilterField from '#/views/_shared/inline-filter-field.vue';
import InlineFilterToolbar from '#/views/_shared/inline-filter-toolbar.vue';
import {
  addRegionAssistConfig,
  addRegionConfig,
  deleteRegionAssistConfig,
  getCountryAlls,
  regionAssistConfigTable,
  regionConfigTable,
  resetRegionWithdrawal,
  updateRegionAssistConfig,
  updateRegionConfig,
} from '#/api/legacy/system';
import {
  ACTUAL_LANGUAGE_OPTIONS,
  BANK_CARD_TYPES,
  formatDate,
  getAllowedSysOrigins,
  REGION_ASSIST_TYPES,
} from '#/views/system/shared';

import {
  Button,
  Card,
  Checkbox,
  Col,
  Drawer,
  Form,
  FormItem,
  Input,
  Modal,
  Radio,
  RadioGroup,
  Row,
  Select,
  Space,
  Table,
  TabPane,
  Tabs,
  TextArea,
  Tooltip,
  message,
} from 'antdv-next';

defineOptions({ name: 'SystemRegionConfig' });

interface RegionMetadataField {
  describe: string;
  key: string;
  label: string;
  type: 'checkbox' | 'radio';
  value: boolean | string;
}

function cloneValue<T>(value: T): T {
  return JSON.parse(JSON.stringify(value));
}

function createRegionMetadata(): RegionMetadataField[] {
  return [
    {
      describe: '开启钱包后当前区域用户都可以使用钱包功能(显示钱包模块)',
      key: 'walletVisible',
      label: '开启钱包',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '在区域钱包关闭情况下,代理角色能使用钱包',
      key: 'agentWalletVisible',
      label: '代理钱包',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '将主播工资结算到代理钱包中, 否则将结算到主播自己的钱包',
      key: 'hostSalaryToAgent',
      label: '主播工资结算代理钱包',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '允许使用钱包“兑换金币”功能(显示兑换金币按钮)',
      key: 'openExchangeGold',
      label: '允许钱包兑换金币',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '允许使用钱包“转账”功能(显示转账按钮)',
      key: 'openTransfer',
      label: '允许钱包转账',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '勾选后用户可以发起钱包提现',
      key: 'openWithdraw',
      label: '允许钱包提现',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '开启后用户可以使用钻石兑换金币',
      key: 'openDiamondExchangeGold',
      label: '开启钻石兑换金币',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '开启之后该区域下的代理将可以删除自己名下主播',
      key: 'openTeamDelHost',
      label: '开启代理删除主播权限',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '开启之后该区域下的主播将可以发起与代理解约申请',
      key: 'openHostApplyQuitTeam',
      label: '开启主播申请解约权限',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '勾选后用户可以看到银行卡菜单',
      key: 'openBankCardMenu',
      label: '显示银行卡菜单',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '勾选后用户可以看到 KYC 菜单',
      key: 'openKycMenu',
      label: '显示KYC菜单',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '请慎重选择，一旦开启日结模式后将停止使用月结工资，且无法恢复',
      key: 'openDailyAutoSalary',
      label: '支付工资模式',
      type: 'radio',
      value: 'false',
    },
  ];
}

function createDiamondMetadata(): RegionMetadataField[] {
  return [
    {
      describe: '开启钱包后当前区域用户都可以使用钱包功能(显示钱包模块)',
      key: 'walletVisible',
      label: '开启钱包',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '在区域钱包关闭情况下,代理角色能使用钱包',
      key: 'agentWalletVisible',
      label: '代理钱包',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '将主播工资结算到代理钱包中, 否则将结算到主播自己的钱包',
      key: 'hostSalaryToAgent',
      label: '主播工资结算代理钱包',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '允许使用钱包“兑换金币”功能(显示兑换金币按钮)',
      key: 'openExchangeGold',
      label: '允许钱包兑换金币',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '允许使用钱包“转账”功能(显示转账按钮)',
      key: 'openTransfer',
      label: '允许钱包转账',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '勾选后用户可以发起钱包提现',
      key: 'openWithdraw',
      label: '允许钱包提现',
      type: 'checkbox',
      value: false,
    },
    {
      describe: '请慎重选择，一旦开启日结模式后将停止使用月结工资，且无法恢复',
      key: 'openDailyAutoSalary',
      label: '支付工资模式',
      type: 'radio',
      value: 'false',
    },
  ];
}

function createRegionForm() {
  return {
    countryCodes: [] as string[],
    diamondMetadata: {},
    diamondMetadatas: createDiamondMetadata(),
    id: '',
    langeCodes: [] as string[],
    metadata: {},
    metadatas: createRegionMetadata(),
    regionCode: '',
    regionName: '',
    remarks: '',
    sysOrigin: '',
    withdrawalWaysList: [] as string[],
  };
}

function createAssistForm() {
  return {
    data: '',
    id: '',
    imgUrl: '',
    regionId: '',
    sysOrigin: '',
    type: '',
  };
}

const { copy } = useClipboard();
const accessStore = useAccessStore();

const activeTab = ref('region');
const loadingRegion = ref(false);
const loadingAssist = ref(false);
const savingRegion = ref(false);
const savingAssist = ref(false);
const regionDrawerOpen = ref(false);
const assistDrawerOpen = ref(false);

const regionList = ref<Array<Record<string, any>>>([]);
const assistList = ref<Array<Record<string, any>>>([]);
const regionOptions = ref<Array<Record<string, any>>>([]);
const countries = ref<Array<Record<string, any>>>([]);

const regionQuery = reactive({
  sysOrigin: '',
});

const assistQuery = reactive({
  regionId: '',
  sysOrigin: '',
  type: '',
});

const regionForm = reactive(createRegionForm());
const assistForm = reactive(createAssistForm());
const assistExtra = reactive({
  end: '',
  start: '',
  text: '',
  value: '',
});
const regionDrawerTitle = ref('添加');
const assistDrawerTitle = ref('添加');

const sysOriginOptions = computed(() => {
  const options = getAllowedSysOrigins(accessStore.accessCodes || []);
  return options.length > 0 ? options : getAllowedSysOrigins([]);
});

const regionColumns = [
  { dataIndex: 'regionCode', key: 'regionCode', title: '区域编码', width: 140 },
  { dataIndex: 'regionName', key: 'regionName', title: '区域', width: 140 },
  { dataIndex: 'countryCodes', key: 'countryCodes', title: '国家', width: 220 },
  { dataIndex: 'langeCodes', key: 'langeCodes', title: '语言', width: 180 },
  { dataIndex: 'remarks', key: 'remarks', title: '备注' },
  { dataIndex: 'createTime', key: 'createTime', title: '创建时间', width: 180 },
  { dataIndex: 'actions', key: 'actions', title: '操作', width: 220 },
];

const assistColumns = [
  { dataIndex: 'regionName', key: 'regionName', title: '区域', width: 160 },
  { dataIndex: 'typeName', key: 'typeName', title: '业务类型', width: 280 },
  { dataIndex: 'data', key: 'data', title: '值' },
  { dataIndex: 'createTime', key: 'createTime', title: '创建时间', width: 180 },
  { dataIndex: 'actions', key: 'actions', title: '操作', width: 140 },
];

const specialAssistTypes = new Set([
  'WITHDRAW_PROPORTION_TIPS',
  'COIN_SELLER_WITHDRAW_PROPORTION_TIPS',
  'WITHDRAW_PROPORTION_DIAMOND_TIPS',
  'WITHDRAW_PROPORTION_DIAMOND_USD_TIPS',
]);

const countrySelectOptions = computed(() =>
  countries.value
    .filter((item) => Boolean(item.alphaTwo))
    .map((item) => ({
      label: `${item.aliasName || item.countryName || item.alphaTwo} (${item.alphaTwo})`,
      value: String(item.alphaTwo),
    })),
);

const languageSelectOptions = ACTUAL_LANGUAGE_OPTIONS.map((item) => ({
  label: `${item.name} (${item.value})`,
  value: item.value,
}));

const withdrawalWaysSelectOptions = BANK_CARD_TYPES.map((item) => ({
  label: item.name,
  value: item.value,
}));
const assistTypeOptions = REGION_ASSIST_TYPES.map((item) => ({
  label: item.name,
  value: item.value,
}));
const assistRegionOptions = computed(() =>
  regionOptions.value.map((item) => ({
    label: item.regionName || item.regionCode || item.id,
    value: item.id,
  })),
);

watch(
  sysOriginOptions,
  (options) => {
    if (!regionQuery.sysOrigin) {
      regionQuery.sysOrigin = options[0]?.value ?? 'LIKEI';
    }
    if (!assistQuery.sysOrigin) {
      assistQuery.sysOrigin = options[0]?.value ?? 'LIKEI';
    }
  },
  { immediate: true },
);

watch(
  () => assistQuery.sysOrigin,
  () => {
    assistQuery.regionId = '';
    loadRegionOptions();
  },
  { immediate: true },
);

function assignRegionForm(target: ReturnType<typeof createRegionForm>) {
  Object.assign(regionForm, cloneValue(target));
}

function assignAssistForm(target: ReturnType<typeof createAssistForm>) {
  Object.assign(assistForm, cloneValue(target));
}

function splitCommaValues(value: unknown) {
  return String(value || '')
    .split(',')
    .map((item) => item.trim())
    .filter(Boolean);
}

function getRegionSubmitPayload() {
  const metadata = Object.fromEntries(
    regionForm.metadatas.map((item) => [
      item.key,
      item.type === 'checkbox' ? String(Boolean(item.value)) : String(item.value),
    ]),
  );
  const diamondMetadata = Object.fromEntries(
    regionForm.diamondMetadatas.map((item) => [
      item.key,
      item.type === 'checkbox' ? String(Boolean(item.value)) : String(item.value),
    ]),
  );
  return {
    countryCodes: regionForm.countryCodes.join(','),
    diamondMetadata,
    id: regionForm.id,
    langeCodes: regionForm.langeCodes.join(','),
    metadata,
    regionCode: regionForm.regionCode?.trim(),
    regionName: regionForm.regionName?.trim(),
    remarks: regionForm.remarks?.trim(),
    sysOrigin: regionQuery.sysOrigin,
    withdrawalWaysList: [...(regionForm.withdrawalWaysList || [])],
  };
}

function fillRegionForm(row?: Record<string, any>) {
  const nextForm = createRegionForm();
  if (!row) {
    assignRegionForm(nextForm);
    return;
  }
  nextForm.id = row.id || '';
  nextForm.regionCode = row.regionCode || '';
  nextForm.regionName = row.regionName || '';
  nextForm.countryCodes = splitCommaValues(row.countryCodes);
  nextForm.langeCodes = splitCommaValues(row.langeCodes);
  nextForm.remarks = row.remarks || '';
  nextForm.withdrawalWaysList = Array.isArray(row.withdrawalWaysList)
    ? [...row.withdrawalWaysList]
    : splitCommaValues(row.withdrawalWays);

  const metadata = row.metadata || {};
  nextForm.metadatas = createRegionMetadata().map((item) => ({
    ...item,
    value:
      item.type === 'checkbox'
        ? metadata[item.key] === 'true'
        : (metadata[item.key] ?? item.value),
  }));

  const diamondMetadata = row.diamondMetadata || {};
  nextForm.diamondMetadatas = createDiamondMetadata().map((item) => ({
    ...item,
    value:
      item.type === 'checkbox'
        ? diamondMetadata[item.key] === 'true'
        : (diamondMetadata[item.key] ?? item.value),
  }));

  assignRegionForm(nextForm);
}

function getAssistDesc(row: Record<string, any>) {
  if (
    row.type === 'WITHDRAW_PROPORTION_TIPS' ||
    row.type === 'COIN_SELLER_WITHDRAW_PROPORTION_TIPS'
  ) {
    const data = JSON.parse(row.data || '{}');
    return `(1$ : ${data.value}) 范围:${data.start}~${data.end} 提示:${data.text}`;
  }
  if (
    row.type === 'WITHDRAW_PROPORTION_DIAMOND_TIPS' ||
    row.type === 'WITHDRAW_PROPORTION_DIAMOND_USD_TIPS'
  ) {
    const data = JSON.parse(row.data || '{}');
    return `(1钻石 : ${data.value}) 范围:${data.start}~${data.end} 提示:${data.text}`;
  }
  return row.data || '-';
}

function fillAssistForm(row?: Record<string, any>) {
  const nextForm = createAssistForm();
  Object.assign(assistExtra, {
    end: '',
    start: '',
    text: '',
    value: '',
  });
  if (!row) {
    assignAssistForm(nextForm);
    return;
  }
  nextForm.id = row.id || '';
  nextForm.regionId = row.regionId || '';
  nextForm.type = row.type || '';
  nextForm.data = row.data || '';
  nextForm.imgUrl = row.imgUrl || '';
  if (specialAssistTypes.has(nextForm.type) && nextForm.data) {
    Object.assign(assistExtra, JSON.parse(nextForm.data));
  }
  assignAssistForm(nextForm);
}

async function loadRegionList() {
  loadingRegion.value = true;
  try {
    regionList.value = await regionConfigTable({ ...regionQuery });
  } finally {
    loadingRegion.value = false;
  }
}

async function loadRegionOptions() {
  if (!assistQuery.sysOrigin) {
    regionOptions.value = [];
    return;
  }
  regionOptions.value = await regionConfigTable({
    sysOrigin: assistQuery.sysOrigin,
  });
}

async function loadAssistList() {
  loadingAssist.value = true;
  try {
    assistList.value = await regionAssistConfigTable({ ...assistQuery });
  } finally {
    loadingAssist.value = false;
  }
}

async function loadCountryOptions() {
  countries.value = (await getCountryAlls()) || [];
}

async function handleSaveRegion() {
  if (!regionForm.regionCode?.trim()) {
    message.warning('请输入区域编码');
    return;
  }
  if (!regionForm.regionName?.trim()) {
    message.warning('请输入区域名称');
    return;
  }

  savingRegion.value = true;
  try {
    const payload = getRegionSubmitPayload();
    if (regionForm.id) {
      await updateRegionConfig(payload);
    } else {
      await addRegionConfig(payload);
    }
    message.success('保存成功');
    regionDrawerOpen.value = false;
    await loadRegionList();
    await loadRegionOptions();
  } finally {
    savingRegion.value = false;
  }
}

async function handleSaveAssist() {
  if (!assistForm.regionId) {
    message.warning('请选择区域');
    return;
  }
  if (!assistForm.type) {
    message.warning('请选择业务类型');
    return;
  }

  const payload = {
    ...assistForm,
    data: assistForm.data,
    sysOrigin: assistQuery.sysOrigin,
  };

  if (specialAssistTypes.has(assistForm.type)) {
    payload.data = JSON.stringify({ ...assistExtra });
  }

  if (!payload.data && !specialAssistTypes.has(assistForm.type)) {
    message.warning('请填写值');
    return;
  }

  savingAssist.value = true;
  try {
    if (assistForm.id) {
      await updateRegionAssistConfig(payload);
    } else {
      await addRegionAssistConfig(payload);
    }
    message.success('保存成功');
    assistDrawerOpen.value = false;
    await loadAssistList();
  } finally {
    savingAssist.value = false;
  }
}

function openRegionCreate() {
  regionDrawerTitle.value = '添加';
  fillRegionForm();
  regionDrawerOpen.value = true;
}

function openRegionUpdate(row: Record<string, any>) {
  regionDrawerTitle.value = '修改';
  fillRegionForm(row);
  regionDrawerOpen.value = true;
}

function copyRegionId(row: Record<string, any>) {
  copy(String(row.id || '')).then(() => {
    message.success('已复制');
  });
}

function handleResetWithdrawal(row: Record<string, any>) {
  Modal.confirm({
    async onOk() {
      await resetRegionWithdrawal(row.id);
      message.success('已重置');
      await loadRegionList();
    },
    title: '是否确定重置，该区域的团队用户将可重新发起？',
  });
}

function openAssistCreate() {
  assistDrawerTitle.value = '添加';
  fillAssistForm();
  assistDrawerOpen.value = true;
}

function openAssistUpdate(row: Record<string, any>) {
  assistDrawerTitle.value = '修改';
  fillAssistForm(row);
  assistDrawerOpen.value = true;
}

function handleDeleteAssist(row: Record<string, any>) {
  Modal.confirm({
    async onOk() {
      await deleteRegionAssistConfig(row.id);
      message.success('删除成功');
      await loadAssistList();
    },
    title: '确认删除吗？',
  });
}

loadRegionList();
loadAssistList();
loadCountryOptions();
</script>

<template>
  <Page title="区域配置">
    <Tabs v-model:activeKey="activeTab">
      <TabPane key="region" tab="区域列表">
        <Card>
          <InlineFilterToolbar class="toolbar">
            <InlineFilterField label="系统">
              <SysOriginSelect
                v-model:value="regionQuery.sysOrigin"
                style="width: 140px"
                @change="loadRegionList"

                :options="sysOriginOptions"
              ></SysOriginSelect>
            </InlineFilterField>
            <Button type="primary" @click="loadRegionList">搜索</Button>
            <Button @click="openRegionCreate">新增</Button>
            <a
              class="download-link"
              href="https://img.sugartimeapp.com/web/country-code-and-language-code-data.xlsx"
              rel="noreferrer"
              target="_blank"
            >
              国家与语言 Code 文档
            </a>
          </InlineFilterToolbar>

          <Table
            :columns="regionColumns"
            :data-source="regionList"
            :loading="loadingRegion"
            :pagination="false"
            :row-key="(record: Record<string, any>) => record.id"
            :scroll="{ x: 1180 }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'createTime'">
                {{ formatDate(record.createTime) }}
              </template>
              <template v-else-if="column.key === 'actions'">
                <Space>
                  <Button size="small" type="link" @click="openRegionUpdate(record)">
                    修改
                  </Button>
                  <Button size="small" type="link" @click="copyRegionId(record)">
                    复制ID
                  </Button>
                  <Button
                    size="small"
                    type="link"
                    @click="handleResetWithdrawal(record)"
                  >
                    重置提现
                  </Button>
                </Space>
              </template>
            </template>
          </Table>
        </Card>
      </TabPane>

      <TabPane key="assist" tab="辅助配置">
        <Card>
          <InlineFilterToolbar class="toolbar">
            <InlineFilterField label="系统">
              <SysOriginSelect
                v-model:value="assistQuery.sysOrigin"
                style="width: 140px"
                @change="loadAssistList"

                :options="sysOriginOptions"
              ></SysOriginSelect>
            </InlineFilterField>
            <InlineFilterField label="区域">
              <Select
                v-model:value="assistQuery.regionId"
                allow-clear
                :options="assistRegionOptions"
                placeholder="请选择区域"
                style="width: 180px"
              />
            </InlineFilterField>
            <InlineFilterField label="业务类型" :label-width="84">
              <Select
                v-model:value="assistQuery.type"
                allow-clear
                :options="assistTypeOptions"
                placeholder="业务类型"
                style="width: 280px"
              />
            </InlineFilterField>
            <Button type="primary" @click="loadAssistList">搜索</Button>
            <Button @click="openAssistCreate">新增</Button>
          </InlineFilterToolbar>

          <Table
            :columns="assistColumns"
            :data-source="assistList"
            :loading="loadingAssist"
            :pagination="false"
            :row-key="(record: Record<string, any>) => record.id"
            :scroll="{ x: 1200 }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'data'">
                {{ getAssistDesc(record) }}
              </template>
              <template v-else-if="column.key === 'createTime'">
                {{ formatDate(record.createTime) }}
              </template>
              <template v-else-if="column.key === 'actions'">
                <Space>
                  <Button size="small" type="link" @click="openAssistUpdate(record)">
                    修改
                  </Button>
                  <Button size="small" type="link" danger @click="handleDeleteAssist(record)">
                    删除
                  </Button>
                </Space>
              </template>
            </template>
          </Table>
        </Card>
      </TabPane>
    </Tabs>

    <Drawer
      :open="regionDrawerOpen"
      :title="`${regionDrawerTitle}（${regionQuery.sysOrigin}）`"
      destroy-on-close
      width="620"
      @close="regionDrawerOpen = false"
    >
      <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" layout="horizontal">
        <FormItem label="区域编码">
          <Input
            v-model:value="regionForm.regionCode"
            :disabled="savingRegion || Boolean(regionForm.id)"
            placeholder="区域编码(慎重填写,不可修改)"
          />
        </FormItem>
        <FormItem label="区域名称">
          <Input
            v-model:value="regionForm.regionName"
            :disabled="savingRegion"
            placeholder="请输入区域名称"
          />
        </FormItem>
        <FormItem label="国家">
          <Select
            v-model:value="regionForm.countryCodes"
            :disabled="savingRegion"
            :options="countrySelectOptions"
            mode="multiple"
            option-filter-prop="label"
            placeholder="请选择国家"
            show-search
          >
          </Select>
        </FormItem>
        <FormItem label="语言">
          <Select
            v-model:value="regionForm.langeCodes"
            :disabled="savingRegion"
            :options="languageSelectOptions"
            mode="multiple"
            option-filter-prop="label"
            placeholder="请选择语言"
            show-search
          >
          </Select>
        </FormItem>
        <FormItem label="备注">
          <TextArea
            v-model:value="regionForm.remarks"
            :disabled="savingRegion"
            :rows="4"
            placeholder="请输入备注"
          />
        </FormItem>
        <FormItem label="提现方式">
          <Select
            v-model:value="regionForm.withdrawalWaysList"
            :disabled="savingRegion"
            :options="withdrawalWaysSelectOptions"
            mode="multiple"
            option-filter-prop="label"
            placeholder="请选择"
            show-search
          />
        </FormItem>
        <FormItem label="美金$钱包设置">
          <div class="metadata-group">
            <div
              v-for="item in regionForm.metadatas"
              :key="item.key"
              class="metadata-item"
            >
              <template v-if="item.type === 'radio'">
                <div class="metadata-label">
                  <span>{{ item.label }}</span>
                  <Tooltip :title="item.describe">
                    <span class="metadata-help">?</span>
                  </Tooltip>
                </div>
                <RadioGroup v-model:value="item.value">
                  <Radio :disabled="item.value === 'true'" value="false">
                    月结模式
                  </Radio>
                  <Radio value="true">日结模式</Radio>
                </RadioGroup>
              </template>
              <template v-else>
                <Checkbox v-model:checked="item.value as boolean">
                  {{ item.label }}
                </Checkbox>
                <Tooltip :title="item.describe">
                  <span class="metadata-help">?</span>
                </Tooltip>
              </template>
            </div>
          </div>
        </FormItem>
        <FormItem label="钻石钱包设置">
          <div class="metadata-group">
            <div
              v-for="item in regionForm.diamondMetadatas"
              :key="item.key"
              class="metadata-item"
            >
              <template v-if="item.type === 'radio'">
                <div class="metadata-label">
                  <span>{{ item.label }}</span>
                  <Tooltip :title="item.describe">
                    <span class="metadata-help">?</span>
                  </Tooltip>
                </div>
                <RadioGroup v-model:value="item.value">
                  <Radio :disabled="item.value === 'true'" value="false">
                    月结模式
                  </Radio>
                  <Radio value="true">日结模式</Radio>
                </RadioGroup>
              </template>
              <template v-else>
                <Checkbox v-model:checked="item.value as boolean">
                  {{ item.label }}
                </Checkbox>
                <Tooltip :title="item.describe">
                  <span class="metadata-help">?</span>
                </Tooltip>
              </template>
            </div>
          </div>
        </FormItem>
      </Form>

      <template #footer>
        <Space>
          <Button @click="regionDrawerOpen = false">取消</Button>
          <Button :loading="savingRegion" type="primary" @click="handleSaveRegion">
            保存
          </Button>
        </Space>
      </template>
    </Drawer>

    <Drawer
      :open="assistDrawerOpen"
      :title="`${assistDrawerTitle}（${assistQuery.sysOrigin}）`"
      destroy-on-close
      width="580"
      @close="assistDrawerOpen = false"
    >
      <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" layout="horizontal">
        <FormItem label="业务类型">
          <Select
            v-model:value="assistForm.type"
            :options="assistTypeOptions"
            :disabled="savingAssist || Boolean(assistForm.id)"
            placeholder="请选择业务类型"
          />
        </FormItem>
        <FormItem label="区域">
          <Select
            v-model:value="assistForm.regionId"
            :options="assistRegionOptions"
            :disabled="savingAssist || Boolean(assistForm.id)"
            placeholder="请选择区域"
          />
        </FormItem>
        <template v-if="assistForm.type === 'DIAMOND_EXCHANGE_GOLD'">
          <FormItem label="值">
            <Input
              v-model:value="assistForm.data"
              :disabled="savingAssist"
              placeholder="钻石兑换金币比例(%)"
            />
          </FormItem>
        </template>
        <template v-else-if="assistForm.type === 'MIN_EXCHANGE_DIAMOND'">
          <FormItem label="值">
            <Input
              v-model:value="assistForm.data"
              :disabled="savingAssist"
              placeholder="钻石起兑最小数量"
            />
          </FormItem>
        </template>
        <template v-else-if="specialAssistTypes.has(assistForm.type)">
          <Row :gutter="12">
            <Col :span="12">
              <FormItem :label="assistForm.type.includes('USD') || assistForm.type.includes('DIAMOND') ? '开始值' : '>=美元'">
                <Input v-model:value="assistExtra.start" :disabled="savingAssist" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem :label="assistForm.type.includes('USD') || assistForm.type.includes('DIAMOND') ? '结束值' : '<=美元'">
                <Input v-model:value="assistExtra.end" :disabled="savingAssist" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="比例值">
                <Input v-model:value="assistExtra.value" :disabled="savingAssist" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="提示文案">
                <Input v-model:value="assistExtra.text" :disabled="savingAssist" />
              </FormItem>
            </Col>
          </Row>
        </template>
        <template
          v-else-if="
            [
              'ROOM_CONTRIBUTION_ACTIVITY_RATIO',
              'GIFT_TO_OWN_GOLD_RATIO',
              'GIFT_TO_OTHER_GOLD_RATIO',
              'HOST_TERMINATION_FEE',
              'WITHDRAWAL_COMMISSION_RATIO',
              'GIFT_TO_OTHER_DIAMOND_RATIO',
              'GIFT_TO_OTHER_DIAMOND_RATIO_AGENCY',
              'GIFT_TARGET_RATIO',
              'GIFT_TO_OTHER_GOLD_RATIO_NORMAL',
              'GIFT_TO_OWN_GOLD_RATIO_NORMAL',
              'RESIDUE_TARGET_EXCHANGE_PROPORTION',
            ].includes(assistForm.type)
          "
        >
          <FormItem label="值">
            <Input
              v-model:value="assistForm.data"
              :disabled="savingAssist"
              placeholder="请输入内容"
            />
          </FormItem>
          <FormItem
            v-if="assistForm.type === 'ROOM_CONTRIBUTION_ACTIVITY_RATIO'"
            label="图片"
          >
            <Input
              v-model:value="assistForm.imgUrl"
              :disabled="savingAssist"
              placeholder="请输入图片地址"
            />
          </FormItem>
        </template>
      </Form>

      <template #footer>
        <Space>
          <Button @click="assistDrawerOpen = false">取消</Button>
          <Button :loading="savingAssist" type="primary" @click="handleSaveAssist">
            保存
          </Button>
        </Space>
      </template>
    </Drawer>
  </Page>
</template>

<style scoped>
.toolbar {
  margin-bottom: 16px;
}

.download-link {
  color: var(--color-primary);
}

.metadata-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metadata-item {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 12px 14px;
}

.metadata-help {
  align-items: center;
  border: 1px solid #d4d4d8;
  border-radius: 999px;
  display: inline-flex;
  height: 18px;
  justify-content: center;
  margin-left: 8px;
  width: 18px;
}

.metadata-label {
  align-items: center;
  display: flex;
  margin-bottom: 8px;
}
</style>
