<template>
  <BaseTable
    showIndex
    tableName="DEPARTMENT_USER"
    ref="tableRef"
    :api="listDeptApi"
    :actionList="actionList"
    fullHeight
  >
    <template #leftOptions>
      <el-button icon="plus" @click="openDialog('add')" type="primary"> 新增 </el-button>
    </template>
    <template #userId="{ row }">
      {{ disposeMemberList(row, 'userResp') }}
    </template>
  </BaseTable>
  <Dialog
    v-model="dialogVisible"
    :diaTitle="isEditDialog ? '编辑' : '新增'"
    :width="500"
    :height="300"
    show-confirm-button
    show-cancel-button
    show-footer
  >
    <div class="content">
      <TableForm ref="tableFormRef" tableName="DEPARTMENT_USER" v-model:data="editRowInfo" />
    </div>
    <template #footer>
      <div>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmFun">确定</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import BaseTable from '@/components/common/table/baseTable.vue';
import Dialog from '@/components/common/dialog/index.vue';
import { ref } from 'vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { ElMessage } from 'element-plus';
import { addDeptApi, delDeptApi, editDeptApi, listDeptApi } from '@/api/system/departMent';
import { disposeMemberList } from '@/views/task/projectDetail/components/project';

const isEditDialog = ref(false);
const dialogVisible = ref(false);
const actionList = ref<any>([
  {
    title: '编辑',
    type: 'primary',
    click: (row: any) => {
      openDialog('edit', row);
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '确认删除？',
    click: async (row: any) => {
      const res: any = await delDeptApi({ id: row.id });
      if (res.code === 200) {
        ElMessage.success('删除成功');
        tableRef.value.resetFun();
      } else {
        ElMessage.error(res.message);
      }
    },
  },
]);

const editRowInfo = ref({});

const openDialog = (type: string, row?: any) => {
  isEditDialog.value = type === 'edit';
  dialogVisible.value = true;
  // nextTick(() => {
  if (type === 'edit' && row) {
    row.fileType = String(row.fileType);
    row.files = [{ name: row.originalName }];
    // tableFormRef.value.setFormDataFun(row);
    editRowInfo.value = row;
  } else if (type === 'add') {
    editRowInfo.value = {};
    // tableFormRef.value.resetFun();
  }
  // });
};

const tableFormRef = ref();
const tableRef = ref();

const confirmFun = async () => {
  const valid = await tableFormRef.value.validateFun();
  if (valid) {
    const fromData = tableFormRef.value.getFormDataFun();
    if (isEditDialog.value) {
      const res: any = await editDeptApi(fromData);
      if (res.code === 200) {
        ElMessage.success('操作成功');
        tableRef.value.resetFun();
        dialogVisible.value = false;
      }
    } else {
      const res: any = await addDeptApi(fromData);
      if (res.code === 200) {
        ElMessage.success('操作成功');
        tableRef.value.resetFun();
        dialogVisible.value = false;
      }
    }
    tableRef.value.resetFun();
    dialogVisible.value = false;
  }
};
</script>
