import { computed, ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { FormSchema } from '@/components/Form';
import { useDictStore } from '@/store/modules/dict';
import { List as TenantList } from '@/api/imTenant';

const dict = useDictStore();

export const tenantOptions = ref<any[]>([]);

export class State {
  public tenantId = 0;
  public tenantName = '';
  public id = 0;
  public service = '';
  public provider = '';
  public endpoint = '';
  public enabled = 0;
  public status = '';
  public configJson = '{}';
  public secretJson = '';
  public hasSecret = false;
  public checkedAt = '';
  public checkResult = '';
  public createdAt = '';
  public updatedAt = '';

  constructor(state?: Partial<State>) {
    if (state) Object.assign(this, state);
  }
}

export function newState(state: State | Record<string, any> | null): State {
  if (state !== null) {
    if (state instanceof State) return cloneDeep(state);
    return new State(state);
  }
  return new State();
}

export const schemas = ref<FormSchema[]>([
  {
    field: 'tenantId',
    component: 'NSelect',
    label: '租户',
    componentProps: {
      clearable: false,
      options: computed(() => tenantOptions.value),
      placeholder: '请选择租户',
    },
  },
  {
    field: 'service',
    component: 'NSelect',
    label: '服务',
    componentProps: {
      clearable: true,
      options: computed(() => dict.getOptions('ImExternalServiceOptions')),
      placeholder: '请选择服务',
    },
  },
  {
    field: 'provider',
    component: 'NInput',
    label: '服务商',
    componentProps: { placeholder: '请输入服务商' },
  },
  {
    field: 'enabled',
    component: 'NSelect',
    label: '启用',
    componentProps: {
      clearable: true,
      options: [
        { label: '启用', value: 1 },
        { label: '停用', value: 0 },
      ],
      placeholder: '请选择启用状态',
    },
  },
]);

export const columns = [
  {
    title: '服务',
    key: 'service',
    align: 'left',
    width: 130,
    render(row: State) {
      return dict.getLabel('ImExternalServiceOptions', row.service);
    },
  },
  { title: '服务商', key: 'provider', align: 'left', width: 140 },
  { title: '端点', key: 'endpoint', align: 'left', width: 220 },
  {
    title: '启用',
    key: 'enabled',
    align: 'left',
    width: 90,
    render(row: State) {
      return row.enabled ? '启用' : '停用';
    },
  },
  {
    title: '配置状态',
    key: 'status',
    align: 'left',
    width: 110,
    render(row: State) {
      return dict.getLabel('ImExternalConfigStatusOptions', row.status);
    },
  },
  {
    title: '敏感配置',
    key: 'hasSecret',
    align: 'left',
    width: 110,
    render(row: State) {
      return row.hasSecret ? '已配置' : '未配置';
    },
  },
  { title: '检查结果', key: 'checkResult', align: 'left', width: 220 },
  { title: '检查时间', key: 'checkedAt', align: 'left', width: 180 },
  { title: '更新时间', key: 'updatedAt', align: 'left', width: 180 },
];

export function loadOptions() {
  dict.loadOptions(['ImExternalServiceOptions', 'ImExternalConfigStatusOptions']);
}

export async function loadTenantOptions() {
  const res = await TenantList({ page: 1, perPage: 20 });
  tenantOptions.value = (res?.list || []).map((item) => ({
    label: `${item.name}（${item.code}）`,
    value: item.id,
  }));
  return tenantOptions.value;
}