<template>
  <div class="page">
    <el-card shadow="never">
      <el-form inline>
        <el-form-item :label="$t('message.formI18nLabel.categoryName')">
          <el-input v-model="tableData.param.name" :placeholder="$t('message.formI18nPlaceholder.categoryName')" @keyup.enter.native="getCateList" class="w-50" clearable :style="{width: currentLang === 'en' ? '220px' : '150px' }" />
        </el-form-item>
        <el-form-item>
          <!-- 查询 -->
          <el-button type="primary" class="ml10" @click="getCateList">
            <el-icon>
              <ele-Search />
            </el-icon>
            {{ $t('message.formI18nButton.query') }}
          </el-button>
          <!-- 新增分类 -->
          <el-button type="primary" class="ml10" @click="onOpenAdd" v-auth="'add'">
            <el-icon>
              <ele-FolderAdd />
            </el-icon>
            {{ $t('message.formI18nButton.addCategory') }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData.data" style="width: 100%" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
        <!-- 分类名称 -->
        <el-table-column prop="name" :label="$t('message.device.tableI18nColumn.categoryName')" v-col="'name'" show-overflow-tooltip> </el-table-column>
        <!-- 描述 -->
        <el-table-column prop="desc" :label="$t('message.device.tableI18nColumn.desc')" align="center" v-col="'desc'"></el-table-column>
        <!-- 排序 -->
        <el-table-column prop="sort" v-col="'sort'" :label="$t('message.device.tableI18nColumn.sort')" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column :label="$t('message.tableI18nColumn.operation')" align="center" width="140" fixed="right">
          <template #default="scope">
            <!-- 新增 -->
            <el-button size="small" type="text" @click="onOpenAdd(scope.row)" v-auth="'add'">{{ $t('message.tableI18nAction.add') }}</el-button>
            <!-- 修改 -->
            <el-button size="small" text type="warning" @click="onOpenEdit(scope.row)" v-auth="'edit'">{{ $t('message.tableI18nAction.edit') }}</el-button>
            <!-- 删除 -->
            <el-button size="small" text type="info" @click="onTabelRowDel(scope.row)" v-auth="'del'">{{ $t('message.tableI18nAction.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddOrEditCate ref="addOrEditRef" @getCateList="getCateList" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddOrEditCate from './component/addOrEdit.vue';
import api from '/@/api/device';
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();

const currentLang = computed(() => locale.value);

// 定义接口来定义对象的类型
interface TableDataRow {
  id: number;
  parentId: number;
  name: string;
  status: number;
  orderNum: number;
  leader: string;
  children?: TableDataRow[];
}

const addOrEditRef = ref();
const tableData = ref<any>({
    data: [],
    loading: false,
    param: {
      name: '',
      status: -1,
    },
});
// 初始化表格数据
const initTableData = () => {
  getCateList();
};
const getCateList = () => {
  tableData.value.loading = true;
  api.category.getList(tableData.value.param).then((res: any) => {
    tableData.value.data = res.category;
  }).finally(() => (tableData.value.loading = false));
};
// 打开新增菜单弹窗
const onOpenAdd = (row?: TableDataRow) => {
  addOrEditRef.value.openDialog(row?.id);
};
// 打开编辑菜单弹窗
const onOpenEdit = (row: TableDataRow) => {
  addOrEditRef.value.openDialog({ ...row });
};
// 删除当前行
const onTabelRowDel = (row: TableDataRow) => {
  ElMessageBox.confirm(
    t('message.device.tableI18nConfirm.deleteCatrgoryMessage', { name: row.name }),
    t('message.tableI18nConfirm.deleteTitle'),
    {
      confirmButtonText: t('message.tableI18nConfirm.confirmText'),
      cancelButtonText: t('message.tableI18nConfirm.cancelText'),
      type: 'warning',
    }
  ).then(() => {
    api.category.del(row.id).then(() => {
      // 删除成功
      ElMessage.success(t('message.tableI18nConfirm.deleteSuccess'));
      getCateList();
    });
  });
};
// 页面加载时
onMounted(() => {
  initTableData();
});
</script>