<script setup>
import { reactive } from 'vue'
import { getFormPage, addForm, updateForm, deleteForm, getFormDetail, getFormFields } from './api'
import { baseModelOptions, baseFilterOptions } from './options'
import useUserStore from '@/store/modules/user'
// const { proxy } = getCurrentInstance();
const user = useUserStore()
const router = useRouter()
const state = reactive({
  baseModelOptions: baseModelOptions(),
  baseFilterOptions: baseFilterOptions(),
  title: "表单管理",
  baseModelName: '表单信息',
  addBtnName: '添加表单',
  editBtnName: '',
  delBtnName: '',
  primaryKey: 'id',
  getTableFn: getFormPage,
  baseAdd: {
    userId: user.userId
  },
  addFn: addForm,
  editFn: updateForm,
  deleteFn: deleteForm,
  detailFn: getFormDetail,
  showAddBtn: false,
  showEditBtn: true,
  showDeleteBtn: true,
  viewForm: false,
  formOptions: null,
  rowControl: {
    showEditBtn: false,
    showDelBtn: false
  },
  permission: {//菜单管理中添加权限
    add: 'system:user:list',
    edit: 'system:user:list',
    delete: 'system:user:list',
    detail: 'system:user:list',
  },
  pageInfo: { total: 0, base: { limit: 8, current: 1 } },
  tableDataFormatter: function (params, res) {
    res.data.total = res.data.count
    return res.data.list
  },
})
const tableRef = ref()
const addoredit = (row) => {
  let obj = {}
  if (row) {
    obj.id = row.id
    obj.originalType = row.originalType
  }
  router.push({
    path: '/form/data',
    query: obj
  })
  // tableRef.value.handleAdd()
}

const viewForm = (row) => {
  getFormDetail({ id:row.id }).then(res => {
    state.formOptions = res.data.content?res.data.content:[];
    state.viewForm = true
  })
}

</script>

<template>
  <div class="app-container">
    <BaseTablePage :tableOptions="state" ref="tableRef">
      <template #beforeTop>
        <el-button @click="addoredit" style="margin-right: 6px;" type="primary" plain icon="Plus"
          v-hasPermi="[state.permission.add]">新增表单</el-button>
      </template>
      <template v-slot:column>
        <el-table-column align="center" prop="id" label="表单id" />
        <el-table-column align="center" prop="formName" label="表单名称" />
        <el-table-column align="center" prop="formDesc" label="表单描述" width="200" />
        <el-table-column align="center" prop="formPath" label="表单路径(node)" />
        <el-table-column align="center" prop="formPath" label="表单类型">
          <template #default="scope">
            <el-tag v-if="scope.row.originalType==2">自定义表单</el-tag>
            <el-tag :type="'success'" v-else>server端文件</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" />
        <el-table-column align="center" prop="createUserName" label="创建人" />

        <!-- type1: 编辑按钮前置插槽，可在编辑按钮前添加内容 -->
      </template>
      <template #control="baseScope">
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-button type="text" icon="View" @click="viewForm(scope.row)">预览表单</el-button>
            <el-button type="text" icon="EditPen" @click="addoredit(scope.row)">
              修改
            </el-button>
            <el-button type="text" icon="Delete"
              @click="baseScope.deleteTableData(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTablePage>
    <BaseModel v-if="state.formOptions" :title="'表单预览'" :modelType="'edit'" :columnCount="1" :showModel="state.viewForm"
      :width="'35%'" :modelOptions="state.formOptions" @dialogClose="state.viewForm = false"
      @dialogSubmit="state.viewForm = false">
    </BaseModel>

  </div>
</template>

<style scoped></style>
