<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag  v-if="record.status == 0" color="green">启用</a-tag>
          <a-tag v-else color="red">禁用</a-tag>
        </template>
      </template>
    </BasicTable>
    <a-modal class="technologicalprocess-modal" v-model:open="openModal" 
      :title="modalData.title"  destroyOnClose="true">
      <UseModal ref="modalForm" :modalData="modalData" @closeModal="closeModal" @submit="submit" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { BasicTable, useTable } from '@/components/Table';
import { LoadPage, AddOrUpdateDroneFlowInstance, DeleteDroneFlowInstance } from '@/api/sys/technologicalprocess';
import { searchFormSchema, emptyAddForm, columns } from './util.ts'
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { ref, reactive, createVNode } from "vue"
import UseModal from './UseModal/index.vue'
import { message, Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
// const modalForm = ref()
const openModal = ref(false)
const modalData = reactive({
  title:'',
  data:{},
  type:'',
})
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
  title: '流程列表',
  api: LoadPage,
  columns,
  showTableSetting: true,
  showIndexColumn: false,
  rowSelection: {
    type: 'radio',
  },
  useSearchForm: true,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
  },
  handleSearchInfoFn(info) {
    return info;
  },
})
const buttonClick = (type) => {
  const row = getSelectRows()
  switch(type){
    case 'add':
      modalData.title = '添加'
      modalData.data = emptyAddForm
      modalData.type = 'add'
      openModal.value = true
      break
    case 'edit':
      if(row.length === 1){
        modalData.title = '编辑'
        modalData.data = {...row[0]}
        modalData.type = 'edit'
        openModal.value = true
      }else {
        message.warning('请选择一条数据进行编辑')
      }
      break
    case 'del':
      if(row.length === 1){
        Modal.confirm({
          title:'是否确认删除?',
          icon: createVNode(ExclamationCircleOutlined),
          onCancel() {},
          async onOk() {
            await DeleteDroneFlowInstance([row[0].id]).then(res => {
              message.success('删除成功')
              reload()
              clearSelectedRowKeys()
            }).catch(err => {
              console.log(err)
            })
          }
        })
      }else {
        message.warning('请选择一条数据进行删除')
      }
      break
    case 'bind':
    if(row.length === 1){
      modalData.title = '绑定角色'
      modalData.data = {...row[0]}
      modalData.type = 'bind'
      openModal.value = true
    }else {
      message.warning('请选择一条数据进行绑定')
    }
  }
}
const submit = (type) => {
  // switch(modalData.type){
  //   case 'add':
      AddOrUpdateDroneFlowInstance(modalData.data).then(res => {
        message.success(modalData.type === 'add'? '添加成功': '编辑成功')
        reload()
        closeModal()
        clearSelectedRowKeys()
      }).catch(err => {
        console.log(err)
      })
      // break
  // }

}
const closeModal = () => {
  openModal.value = false
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
  .technologicalprocess-modal{
    .ant-modal-footer > button{
      display: none;
    }
    .ant-modal-footer{
      margin-top:0px;
      border-top: 0px;
    }
  }
</style>
