<template>
  <div class="gl-page-content-full">
    <div class="table">
      <BaseTable
        ref="baseTableRef"
        tableName="DYNAMIC_TABLE"
        :api="listFormConfigureApi"
        :actionList="actionList"
        fullHeight
      >
        <template #leftOptions>
          <el-button type="primary" :icon="Plus" @click="editFun({})">新增表头</el-button>
        </template>
      </BaseTable>
    </div>
    <Detail v-model="detailVisible" :id="detailId" :tableName="tableName" @submit="submitFun" />
    <TableFormDia v-model="formDiaVisible" :name="tableName" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { listFormConfigureApi, deleteFormConfigureApi } from '@/api/system/systemData';
import Detail from './components/detail.vue';
import TableFormDia from '@/components/common/table/tableFormDia.vue';
import { hasPermission } from '@/utils/permission';

const baseTableRef = ref();
const detailVisible = ref(false);
const formDiaVisible = ref(false);
const tableName = ref('');
const detailId = ref(0);

const actionList = ref([
  {
    title: '查看',
    type: 'primary',
    click: (row: any) => {
      checkFun(row);
    },
  },
  {
    title: '编辑',
    type: 'primary',
    click: (row: any) => {
      editFun(row);
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '删除后不可恢复，确定删除吗？',
    click: (row: any) => {
      delFun(row.id);
    },
    hide: () => {
      return !hasPermission('system_dynamicTable_delete');
    },
  },
]);

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

const checkFun = (data: any) => {
  tableName.value = data.formName;
  formDiaVisible.value = true;
};

const editFun = (data: any) => {
  detailId.value = data.id;
  tableName.value = data.formName;
  detailVisible.value = true;
};

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

<style lang="scss" scoped>
.gl-page-content-full {
  .table {
    height: 100%;
  }
}
</style>
