<template>
  <div class="app-container">
    <page-search :searchFormConfig="searchFormConfig" @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick" />
    <page-content ref="pageContentRef" :contentTableConfig="contentTableConfig" pageName="/flowable/form"
      @newBtnClick="handleNewData" @editBtnClick="handleEditData">
      <template #handler="{ scope }">
        <el-button
          icon="View"
          size="small"
          type="primary"
          link
          @click="handleViewClick(scope.row)"
        >
        查看
        </el-button>
      </template>
    </page-content>
    <el-dialog title="查看表单" v-model="dialogVisible" width="80%" height="600" center destroy-on-close>
      <form-detail :formId="postFormId"></form-detail>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import FormDetail from '@/tool/form-detail'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'

import { usePageSearch } from '@/hooks/use-page-search'
import router from '@/router'
export default defineComponent({
  name: 'users',
  components: {
    PageSearch,
    PageContent,
    PageModal,
    FormDetail
  },
  setup() {
    const dialogVisible = ref(false)
    const postFormId = ref('')
    const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
    const handleNewData = () => {
      router.push('/workflow/formTool')
    }
    const handleEditData = (data) => {
      const tableId = data.formId
      router.push({
        path: '/workflow/formTool',
        query: { tableId }
      })
    }
    const handleViewClick = (data) => {
      postFormId.value = data.formId.toString()
      dialogVisible.value = true
    }
    return {
      searchFormConfig,
      contentTableConfig,
      pageContentRef,
      handleResetClick,
      handleQueryClick,
      handleNewData,
      postFormId,
      dialogVisible,
      handleEditData,
      handleViewClick
    }
  }
})
</script>
