<template>
  <div style="width: 100%">
    <div class="search-box">
      <BasicForm @register="registerForm" :labelWidth="100" :actionColOptions="{ span: 24 }" />
    </div>
    <div class="table-box">
      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '详情',
                  onClick: handleDetail.bind(null, record),
                },
                {
                  label: '撤回',
                  color: 'error',
                  onClick: revokeBtnClick.bind(null, record),
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>
    <a-modal
      width="100%"
      wrap-class-name="full-modal"
      v-model:open="auditOpen"
      title="详情"
      :destroyOnClose="true"
    >
      <template #footer> </template>
      <Look
        ref="posRef"
        :processId="processId"
        :revokeId="revokeId"
        :revokeUnitName="revokeUnitName"
        @close="closeMolder"
      />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getRetractPageList } from '@/api/sys/WFTask';
  import { getDetail } from '@/api/sys/WFSchemeInfo';
  import { flowStore } from '@/store/modules/flow';
  import { useRoute } from 'vue-router';
  import { retract } from '@/api/sys/WFProcess';
  import { useMessage } from '@/hooks/web/useMessage';
  import { Look } from '@/views/demo/workflow/task/process/page';
  import { BasicForm, useForm } from '@/components/Form';
  import dayjs from 'dayjs';

  const { createConfirm, createMessage } = useMessage();
  const props = defineProps({
    componentCode: String,
  });
  watch(
    () => props.componentCode,
    (val) => {
      if (val == 1) {
        reload();
      }
    },
  );

  const flowWfDataStore = flowStore();
  const searchInfo = reactive<Recordable>({});
  const processId = ref('');
  const revokeId = ref('');
  const revokeUnitName = ref('');
  const auditOpen = ref(false);
  const route: any = useRoute();
  const code = ref(route.params.id);
  searchInfo.Code = code.value;
  const tableData = ref([]);
  const searchParams = ref({
    page: 1,
    limit: 10,
    Code: code.value,
  });
  const tablePaginationRight = ref({
    current: 1,
    pageSize: 10,
    size: 'small',
    defaultPageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '80', '100'],
    showQuickJumper: true,
    total: 0,
  });
  const [registerForm, { validate, getFieldsValue }] = useForm({
    schemas: [
      {
        field: '[StartDate, EndDate]',
        label: '日期范围',
        component: 'RangePicker',
        colProps: { span: 8 },
        componentProps: {
          format: 'YYYY-MM-DD',
          placeholder: ['开始日期', '结束日期'],
        },
      },
      {
        field: 'CaseNo',
        label: '图斑编号',
        component: 'Input',
        colProps: { span: 6 },
      },
    ],
    labelWidth: 100,
    baseColProps: { span: 6 },
    actionColOptions: { span: 24 },
    autoSubmitOnEnter: true,
    submitFunc: handleSubmit,
    resetFunc: handleReset,
    autoSubmitOnEnter: handleSubmit,
  });
  function handleSubmit() {
    searchParams.value = getFieldsValue();
    searchParams.value.page = 1;
    searchParams.value.Code = code.value;
    tablePaginationRight.value.current = 1;
    searchParams.value.limit = tablePaginationRight.value.pageSize;
    getTableData(searchParams.value);
  }
  async function getTableData(querys) {
    if (querys.StartDate && querys.EndDate) {
      querys.StartDate = dayjs(querys.StartDate).format('YYYY-MM-DD');
      querys.EndDate = dayjs(querys.EndDate).endOf('day').format('YYYY-MM-DD HH:mm:ss');
    }
    setLoading(true);
    await getRetractPageList(querys).then((res) => {
      tableData.value = res.items;
      tablePaginationRight.value.total = res.total;
      setTableData(tableData.value);
      setPagination(tablePaginationRight.value);
      setLoading(false);
    });
  }
  function handleReset() {
    searchParams.value = {
      page: 1,
      limit: 10,
      Code: code.value,
    };
    tablePaginationRight.value.current = 1;
    getTableData(searchParams.value);
  }
  function handleChange(data) {
    searchParams.value.page = data.current;
    searchParams.value.limit = data.pageSize;
    tablePaginationRight.value = data;
    getTableData(searchParams.value);
  }
  onMounted(() => {
    getTableData(searchParams.value);
  });
  const [registerTable, { setTableData, reload, setPagination, setLoading }] = useTable({
    // api: getRetractPageList,
    dataSource: tableData.value,
    columns: [
      {
        title: '图斑编号',
        dataIndex: 'case_no',
        width: 200,
      },
      {
        title: '区县',
        dataIndex: 'countyname',
      },
      {
        title: '乡镇',
        dataIndex: 'streetname',
      },
      {
        title: '社区/村',
        dataIndex: 'communityname',
      },
      {
        title: '当前状态',
        dataIndex: 'handle_status_name',
      },
      {
        title: '处理人',
        dataIndex: 'UserName',
      },
      {
        title: '创建时间',
        dataIndex: 'CreateDate',
      },
    ],
    rowKey: 'id',
    useSearchForm: false,
    showTableSetting: true,
    bordered: true,
    // 搜索
    handleSearchInfoFn(info) {
      searchParams.value = info;
      return info;
    },
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
    pagination: tablePaginationRight.value,
  });
  function closeMolder() {
    auditOpen.value = false;
    getTableData(searchParams.value);
  }
  //   详情
  async function handleDetail(record) {
    let data = await getDetail({ code: record.ProcessCode });
    let scheme = JSON.parse(data.scheme.content);
    let wfData = scheme.wfData;
    flowWfDataStore.setWfDataAll(wfData);
    processId.value = record.ProcessId;
    revokeId.value = record.Id;
    revokeUnitName.value = record.UnitName;
    auditOpen.value = true;
  }
  // 撤回
  //   FN371326202408117735
  async function revokeBtnClick(record) {
    createConfirm({
      iconType: 'info',
      title: '撤回',
      content: '确定要撤回到' + record.UnitName + '吗？',
      onOk: async () => {
        const data = await retract(record.Id, {
          code: 'retract',
          name: '撤回',
          des: '',
        });
        if (data) {
          getTableData(searchParams.value);
          return createMessage.success('成功');
        } else {
          return createMessage.error('失败');
        }
      },
    });
  }
</script>
<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
    }

    .ant-modal-content {
      height: calc(100vh);
    }

    .ant-modal-body {
      height: 85%;
    }
  }

  ::v-deep .full-modal .ant-modal-body {
    height: 95% !important;
  }
</style>
<style lang="less" scoped>
  .search-box {
    background: @component-background;
    margin: 16px;
    padding: 16px;
  }
  ::v-deep .search-box .ant-col-24 {
    display: inline-block;
    max-width: fit-content;
    margin-left: 20px;
  }
  .table-box {
    margin: 16px;
  }
</style>
