<template>
  <el-form ref="genInfoForm" :model="infoForm" :rules="rules" label-width="180px">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="tplCategory">
          <template #label>{{ $t('gen.edit.genInfo.tplCategory') }}</template>
          <el-select v-model="infoForm.tplCategory" @change="tplSelectChange">
            <el-option :label="$t('gen.edit.genInfo.tplCategoryCrud')" value="crud" />
            <el-option :label="$t('gen.edit.genInfo.tplCategoryTree')" value="tree" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="packageName">
          <template #label>
            {{ $t('gen.edit.genInfo.packageName') }}
            <el-tooltip :content="$t('gen.edit.genInfo.packageNameTip')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="infoForm.packageName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName">
          <template #label>
            {{ $t('gen.edit.genInfo.moduleName') }}
            <el-tooltip :content="$t('gen.edit.genInfo.moduleNameTip')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="infoForm.moduleName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName">
          <template #label>
            {{ $t('gen.edit.genInfo.businessName') }}
            <el-tooltip :content="$t('gen.edit.genInfo.businessNameTip')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="infoForm.businessName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="functionName">
          <template #label>
            {{ $t('gen.edit.genInfo.functionName') }}
            <el-tooltip :content="$t('gen.edit.genInfo.functionNameTip')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="infoForm.functionName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item>
          <template #label>
            {{ $t('gen.edit.genInfo.parentMenu') }}
            <el-tooltip :content="$t('gen.edit.genInfo.parentMenuTip')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-tree-select
            v-model="infoForm.parentMenuId"
            :data="menuOptions"
            :props="{ value: 'menuId', label: 'menuName', children: 'children' } as any"
            value-key="menuId"
            node-key="menuId"
            :placeholder="$t('gen.edit.genInfo.parentMenuPlaceholder')"
            check-strictly
            filterable
            clearable
            highlight-current
          />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genType">
          <template #label>
            {{ $t('gen.edit.genInfo.genType') }}
            <el-tooltip :content="$t('gen.edit.genInfo.genTypeTip')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-radio v-model="infoForm.genType" value="0">{{ $t('gen.edit.genInfo.genTypeZip') }}</el-radio>
          <el-radio v-model="infoForm.genType" value="1">{{ $t('gen.edit.genInfo.genTypeCustom') }}</el-radio>
        </el-form-item>
      </el-col>

      <el-col v-if="infoForm.genType == '1'" :span="24">
        <el-form-item prop="genPath">
          <template #label>
            {{ $t('gen.edit.genInfo.genPath') }}
            <el-tooltip :content="$t('gen.edit.genInfo.genPathTip')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="infoForm.genPath">
            <template #append>
              <el-dropdown>
                <el-button type="primary">
                  {{ $t('gen.edit.genInfo.recentPath') }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="infoForm.genPath = '/'">{{ $t('gen.edit.genInfo.restorePath') }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <template v-if="info.tplCategory == 'tree'">
      <h4 class="form-header">{{ $t('gen.edit.genInfo.otherInfo') }}</h4>
      <el-row v-show="info.tplCategory == 'tree'">
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('gen.edit.genInfo.treeCode') }}
              <el-tooltip :content="$t('gen.edit.genInfo.treeCodeTip')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select v-model="infoForm.treeCode" :placeholder="$t('gen.edit.genInfo.treeCodePlaceholder')">
              <el-option
                v-for="(column, index) in info.columns"
                :key="index"
                :label="column.columnName + '：' + column.columnComment"
                :value="column.columnName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('gen.edit.genInfo.treeParentCode') }}
              <el-tooltip :content="$t('gen.edit.genInfo.treeParentCodeTip')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select v-model="infoForm.treeParentCode" :placeholder="$t('gen.edit.genInfo.treeCodePlaceholder')">
              <el-option
                v-for="(column, index) in infoForm.columns"
                :key="index"
                :label="column.columnName + '：' + column.columnComment"
                :value="column.columnName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('gen.edit.genInfo.treeName') }}
              <el-tooltip :content="$t('gen.edit.genInfo.treeNameTip')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select v-model="infoForm.treeName" :placeholder="$t('gen.edit.genInfo.treeCodePlaceholder')">
              <el-option
                v-for="(column, index) in info.columns"
                :key="index"
                :label="column.columnName + '：' + column.columnComment"
                :value="column.columnName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </template>

    <template v-if="info.tplCategory == 'sub'">
      <h4 class="form-header">{{ $t('gen.edit.genInfo.subInfo') }}</h4>
      <el-row>
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('gen.edit.genInfo.subTableName') }}
              <el-tooltip :content="$t('gen.edit.genInfo.subTableNameTip')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select v-model="infoForm.subTableName" :placeholder="$t('gen.edit.genInfo.subTableNamePlaceholder')" @change="subSelectChange">
              <el-option v-for="(t, index) in table" :key="index" :label="t.tableName + '：' + t.tableComment" :value="t.tableName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('gen.edit.genInfo.subTableFkName') }}
              <el-tooltip :content="$t('gen.edit.genInfo.subTableFkNameTip')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select v-model="infoForm.subTableFkName" :placeholder="$t('gen.edit.genInfo.subTableNamePlaceholder')">
              <el-option
                v-for="(column, index) in subColumns"
                :key="index"
                :label="column.columnName + '：' + column.columnComment"
                :value="column.columnName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </el-form>
</template>

<script setup lang="ts">
import { listMenu } from '@/api/system/menu';
import { propTypes } from '@/utils/propTypes';
import { useI18n } from 'vue-i18n';
import { parseI18nName } from '@/utils/i18n';

const { t } = useI18n();

interface MenuOptionsType {
  menuId: number | string;
  menuName: string;
  children?: MenuOptionsType[];
}
const { proxy } = getCurrentInstance();

const subColumns = ref<any>([]);
const menuOptions = ref<Array<MenuOptionsType>>([]);

const props = defineProps({
  info: propTypes.any.isRequired,
  tables: propTypes.any.isRequired
});

const infoForm = computed(() => props.info);

const table = computed(() => props.tables);

// 表单校验
const rules = computed(() => ({
  tplCategory: [{ required: true, message: t('gen.edit.genInfo.tplCategoryRequired'), trigger: 'blur' }],
  packageName: [{ required: true, message: t('gen.edit.genInfo.packageNameRequired'), trigger: 'blur' }],
  moduleName: [{ required: true, message: t('gen.edit.genInfo.moduleNameRequired'), trigger: 'blur' }],
  businessName: [{ required: true, message: t('gen.edit.genInfo.businessNameRequired'), trigger: 'blur' }],
  functionName: [{ required: true, message: t('gen.edit.genInfo.functionNameRequired'), trigger: 'blur' }]
}));
const subSelectChange = () => {
  infoForm.value.subTableFkName = '';
};
const tplSelectChange = (value: string) => {
  if (value !== 'sub') {
    infoForm.value.subTableName = '';
    infoForm.value.subTableFkName = '';
  }
};
const setSubTableColumns = (value: string) => {
  table.value.forEach((item: any) => {
    const name = item.tableName;
    if (value === name) {
      subColumns.value = item.columns;
      return;
    }
  });
};

/** 解析菜单树的国际化名称 */
const parseMenuTree = (menus: MenuOptionsType[]): MenuOptionsType[] => {
  return menus.map((menu) => {
    const parsedMenu = { ...menu };
    // 解析menuName字段
    if (parsedMenu.menuName) {
      parsedMenu.menuName = parseI18nName(parsedMenu.menuName);
    }
    // 递归处理子节点
    if (parsedMenu.children && parsedMenu.children.length > 0) {
      parsedMenu.children = parseMenuTree(parsedMenu.children);
    }
    return parsedMenu;
  });
};

/** 查询菜单下拉树结构 */
const getMenuTreeselect = async () => {
  const res = await listMenu();
  const data = proxy?.handleTree<MenuOptionsType>(res.data, 'menuId');

  if (data) {
    // 解析菜单名称的国际化
    menuOptions.value = parseMenuTree(data);
  }
};

watch(
  () => props.info.subTableName,
  (val) => {
    setSubTableColumns(val);
  }
);

onMounted(() => {
  getMenuTreeselect();
});
</script>
