<template>
      <a-drawer
        @close= "handleClose"
        :title="drawerTitle"
        width="60%"
        :mask="true"
        v-model:open="drawerOpen"
        placement="right"
        @after-open-change=""
      >
        <div style="margin:10px">
          <a-button type="primary" @click="showChildrenDrawer">选择新的表单</a-button>
          <a-drawer v-model:open="childrenDrawer" title="表单列表" width="50%" :closable="false">
            <vxe-grid ref="tableRef" v-bind="gridOptions">
              <template #toolbarButtons>
                <vxe-button status="primary" icon="vxe-icon-add" @click="handleSave">保存</vxe-button>
              </template>
            </vxe-grid>
          </a-drawer>
        </div>
        <div style="margin:10px">
          <a-card v-show="formDetailUrl">
            <iFrame :src="formDetailUrl"></iFrame>
          </a-card>
          <a-card v-show="!formDetailUrl">
            <inner-form ref="refInnerForm"></inner-form>
          </a-card>
        </div>
    </a-drawer>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'
import iFrame from '/@/components/iFrame/index.vue';
import { VxeGridProps,VxeGridInstance } from 'vxe-table'
import { listForm, addFlowLinkFlorm,getFlowFormByDeployId } from "/@/components/Process/api/form"
import InnerForm from './InnerForm.vue'

interface RowVO {
  id: string
  username: string
  nickname: string
}

interface SrhParam {
  username: string
  column: string
  order: string
  pageNo: number
  pageSize: number
}

const drawerTitle = ref("流程关联主表单");
const drawerOpen = ref(false)
const curFlow  = ref({})
const tableRef = ref<VxeGridInstance>(); 
const emit = defineEmits(['callBack']);
const formDetailUrl = ref("");
const childrenDrawer = ref(false);
const refInnerForm = ref();

const srhParams = ref<SrhParam>({
  username: '',
  column: '',
  order: '',
  pageNo: 1,
  pageSize: 10
});

const tpOptions = [
  { label: '内部表单', value: '1' },
  { label: '外部表单', value: '2' }
]

const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  rowConfig: {
    keyField: 'id'
  },
  columnConfig: {
    resizable: true
  },
  checkboxConfig: {
    reserve: true
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10
  },
  toolbarConfig: {
    refresh: false,
    zoom: true,
    custom: true,
    export: true,
    print: true,
    slots: {
      buttons: 'toolbarButtons'
    }
  },
  columns: [
    { type: 'radio', visible: true, width: '40', showOverflow: false },
    { title: '主键', field: 'formId', align: 'center', width: '80' },
    { title: '表单类别', field: 'formTp', align: 'center', width: '200',
      filters: tpOptions,
      filterMultiple: false,
      formatter ({ cellValue }) {
        const item = tpOptions.find(item => item.value === cellValue)
        return item ? item.label : ''
      }
     },
    { title: '表单名称', field: 'formName', align: 'left', minWidth: '200' },
    { title: '表单地址', field: 'formUrl', align: 'left', minWidth: '200' },
    { title: '业务表名称', field: 'formTableName', align: 'left', minWidth: '100' },
   
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'result',
      total: 'page.total'
    },
    ajax: {
      query: ({ page }) => {
        return findPageList(page.currentPage, page.pageSize)
      }
    }
  }
})

const findPageList = async (currentPage: number, pageSize: number) => {
  srhParams.value.pageNo = currentPage;
  srhParams.value.pageSize = pageSize;
  const retData = await setData();
  return {
    page: {
      total: retData.total
    },
    result: retData.records
  };
};

async function iniData(flow) {
  curFlow.value = flow
  drawerOpen.value = true
  const resData = await getFlowFormByDeployId(flow.deploymentId)
  
  if(resData.formUrl) {
    formDetailUrl.value = resData.formUrl
  } else {
    formDetailUrl.value = ""
    refInnerForm.value.iniData(resData)
  }
}

async function setData() {
  return await listForm({
    pageNo: srhParams.value.pageNo,
    pageSize: srhParams.value.pageSize
  })
}

async function getSelectRow() {
  const $table = tableRef.value;
  if ($table) {
    const selRecord = $table.getRadioRecord();
    return selRecord
  }
  return null;
}

const handleSave = async() => {
  const formobj = await getSelectRow()
  if(!formobj) {
    return 
  }

  let data = {
    formId:formobj.formId,
    formUrl:formobj.formUrl,
    formTableName:formobj.formTableName,
    deployId:curFlow.value.deploymentId
  }

  childrenDrawer.value = false
  await addFlowLinkFlorm(data)
  await handleSuccess(formobj);

}

const handleSuccess = async (row) => {
  if(row.formUrl) {
    formDetailUrl.value = row.formUrl;
  } else {
    formDetailUrl.value = ""
    refInnerForm.value.iniData(row)
  }
  const $table = tableRef.value;
  $table?.clearAll();
}

const showChildrenDrawer = () => {
  childrenDrawer.value = true;
};

const handleClose = () => {
  drawerOpen.value = false
  childrenDrawer.value = false;
  //emit("callBack")
};



defineExpose({
  iniData
});
</script>