<template>
  <div class="app-container">
    <page-search :searchFormConfig="searchFormConfigRef" @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick" />
    <page-content ref="pageContentRef" 
      :contentTableConfig="contentTableConfig"
      pageName="/flowable/model" 
      @newBtnClick="handleNewData" 
      @editBtnClick="handleEditData"
    >
      <template #handler="{ scope }">
        <el-button
            icon="View"
            size="small"
            type="primary"
            link
            @click="handleViewClick(scope.row)"
            >设计</el-button
          >
        <el-dropdown style="line-height: 23px">
          <span class="el-dropdown-link">
            更多
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                ><el-button
                  icon="View"
                  size="small"
                  type="primary"
                  link
                  @click="handleDeployClick(scope.row, 1)"
                  >部署</el-button
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><el-button
                  icon="View"
                  size="small"
                  type="primary"
                  link
                  @click="handleDeployClick(scope.row, 2)"
                  >流程图</el-button
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><el-button
                  icon="View"
                  size="small"
                  type="primary"
                  link
                  @click="handleDeployClick(scope.row, 3)"
                  >历史</el-button
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </page-content>
    <page-modal :defaultInfo="defaultInfo" ref="pageModalRef" pageName="/flowable/model"
      :modalConfig="modalConfigRef"></page-modal>
    <el-dialog title="流程设计" v-model="dialogVisible" append-to-body fullscreen>
      <process-designer :getModelListData="modelListData" />
    </el-dialog>
    <el-dialog title="流程图" v-model="dialogViewVisible" append-to-body>
      11111
      <!-- <process-designer :getModelListData="modelListData"/> -->
    </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 ProcessDesigner from '@/components/process-designer'
// import ProcessView from '@/components/process-view'

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

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'

import useSelectStore from '@/store/commonSelect/common'
import { deployModel } from "@/api/workflow/model";

export default defineComponent({
  name: 'users',
  components: {
    PageSearch,
    PageContent,
    PageModal,
    ProcessDesigner,
  },
  setup() {
    const { proxy } = getCurrentInstance()
    const dialogVisible = ref(false)
    const dialogViewVisible = ref(false)
    const modelListData = ref({})
    const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
    useSelectStore().getSelectflowableModel()


    // 2.动态添加部门和角色列表
    const searchFormConfigRef = computed(() => {
      const applyItem = searchFormConfig.formItems.find(
        (item) => item.field === 'category'
      )
      applyItem.options = useSelectStore().categoryListData
      return searchFormConfig
    })
    // 1.处理逻辑
    const newCallback = () => { }
    const editCallback = () => { }

    // 2.动态添加部门和角色列表
    const modalConfigRef = computed(() => {
      const applyItem = modalConfig.formItems.find(
        (item) => item.field === 'category'
      )
      applyItem.options = useSelectStore().categoryListData
      return modalConfig
    })

    // 3.调用hook获取公共变量和函数
    const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
      usePageModal(newCallback, editCallback)
    const handleViewClick = (data) => {
      console.log(data)
      modelListData.value = data
      dialogVisible.value = true
    }
    const handleDeployClick = (data, type) => {
      let modelId = data.modelId;
      console.log(data, type)
      if (type === 1) {
        const param = {
          modelId
        }
        proxy.$modal
          .confirm(
            '是否确认部署"' + modelId + '"的数据项？'
          )
          .then(() => {
            deployModel(param).then(response => {
              console.log(response.data)

            })
          })
          .catch(() => { })
      } else if (type === 2) {
        console.log('流程图')
        modelListData.value = data
        dialogViewVisible.value = true
      } else if (type === 3) {
        console.log('历史')

      }


    }
    return {
      modelListData,
      searchFormConfig,
      contentTableConfig,
      pageContentRef,
      ProcessDesigner,
      handleResetClick,
      handleQueryClick,
      handleNewData,
      dialogVisible,
      dialogViewVisible,
      modalConfigRef,
      searchFormConfigRef,
      pageModalRef,
      defaultInfo,
      handleEditData,
      handleDeployClick,
      handleViewClick
    }
  }
})
</script>
