<template>
  <div class="gl-page-content">
    <div class="table">
      <BaseTable
        ref="baseTableRef"
        tableName="SYSTEM_USER"
        :api="userListUserApi"
        :actionList="actionList"
      >
        <template #leftOptions>
          <el-button type="primary" :icon="Plus" @click="openDetailFun('')">新增用户</el-button>
        </template>
        <template #avatar="{ row }">
          <div class="avatar">
            <Avatar :fileId="row.avatar" />
          </div>
        </template>
        <template #status="{ row }">
          {{ USER_STATUS.O[row.status] }}
        </template>
      </BaseTable>
    </div>
    <Detail v-model="detailVisible" :id="roleId" tableName="SYSTEM_USER" @submit="submitFun" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import BaseTable from '@/components/common/table/baseTable.vue';
import Detail from './components/detail.vue';
import Avatar from '@/components/common/avatar/index.vue';
import { userListUserApi, userDelUserApi } from '@/api/system/user';
import { useDict } from '@/utils/useDict';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const { USER_STATUS } = useDict('USER_STATUS');
const actionList = ref([
  {
    title: t('通用.编辑'),
    type: 'primary',
    click: (row: any) => {
      openDetailFun(row.id);
    },
  },
  {
    title: t('通用.删除'),
    needConfirm: true,
    confirmTip: t('通用.确认删除吗'),
    type: 'danger',
    click: (row: any) => {
      delFun(row.id);
    },
  },
]);
const detailVisible = ref(false);
const baseTableRef = ref<any>();
const roleId = ref<number | string>('');

const openDetailFun = (id: number | string) => {
  roleId.value = id;
  detailVisible.value = true;
};

const submitFun = () => {
  baseTableRef.value.resetFun();
};

const delFun = (id: number) => {
  const params = {
    id,
  };
  userDelUserApi(params).then((res: any) => {
    if (res.code === 200) {
      baseTableRef.value.resetFun();
      ElMessage.success('操作成功');
    }
  });
};
</script>

<style lang="scss" scoped>
.gl-page-content {
  .table {
    .avatar {
      display: inline-block;
      width: 40px;
      height: 40px;
    }
  }
}
</style>
