<script lang="ts" setup>
import type { MpAccountApi } from '#/api/mp/account';

import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

import { useTabs } from '@vben/hooks';

import { ElMessage, ElOption, ElSelect } from 'element-plus';

import { getSimpleAccountList } from '#/api/mp/account';

// TODO @hw：调整下代码，和 antd 代码风格，尽量保持一致；
defineOptions({ name: 'AccountSelect' });

const props = defineProps<{
  modelValue?: number;
}>();

const emit = defineEmits<{
  (e: 'change', id: number, name: string): void;
  (e: 'update:modelValue', id: number): void;
}>();

const message = ElMessage; // 消息弹窗
const { closeCurrentTab } = useTabs(); // 视图操作
const { push } = useRouter();

const account: MpAccountApi.AccountSimple = reactive({
  id: -1,
  name: '',
});

const accountList = ref<MpAccountApi.AccountSimple[]>([]);

// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
const currentId = computed({
  get: () => {
    // 如果外部传入了 modelValue，优先使用外部的值
    if (props.modelValue !== undefined && props.modelValue !== null) {
      return props.modelValue;
    }
    return account.id;
  },
  set: (value: number) => {
    // 更新内部状态
    account.id = value;
    // 同步到外部（表单系统）
    emit('update:modelValue', value);
    // 触发 change 事件（保持向后兼容）
    const found = accountList.value.find(
      (v: MpAccountApi.AccountSimple) => v.id === value,
    );
    if (found) {
      account.name = found.name;
      emit('change', value, found.name);
    }
  },
});

// 监听外部 modelValue 变化，同步到内部状态
watch(
  () => props.modelValue,
  (newValue) => {
    if (
      newValue !== undefined &&
      newValue !== null &&
      newValue !== account.id
    ) {
      account.id = newValue;
      const found = accountList.value.find(
        (v: MpAccountApi.AccountSimple) => v.id === newValue,
      );
      if (found) {
        account.name = found.name;
      }
    }
  },
);

/** 查询公众号列表 */
async function handleQuery() {
  accountList.value = await getSimpleAccountList();
  if (accountList.value.length === 0) {
    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
    await closeCurrentTab();
    await push({ name: 'MpAccount' });
    return;
  }

  // 如果外部没有传入值（modelValue 为空），默认选中第一个
  if (props.modelValue === undefined || props.modelValue === null) {
    const firstAccount = accountList.value[0];
    if (firstAccount) {
      currentId.value = firstAccount.id;
      account.name = firstAccount.name;
      emit('change', firstAccount.id, firstAccount.name);
    }
  } else {
    // 如果外部有值，同步到内部状态
    const found = accountList.value.find(
      (v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
    );
    if (found) {
      account.id = props.modelValue;
      account.name = found.name;
    }
  }
}

/** 公众号变化 */
function onChanged(id?: number) {
  if (id) {
    currentId.value = id;
  }
}

/** 初始化 */
onMounted(() => {
  handleQuery();
});
</script>

<template>
  <ElSelect
    v-model="currentId"
    placeholder="请选择公众号"
    class="!w-full"
    @change="onChanged"
  >
    <ElOption
      v-for="item in accountList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </ElSelect>
</template>
<style lang="scss" scoped>
:deep(.el-select__wrapper) {
  width: 240px !important;
}
</style>
