<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <!-- <LeftTree ref="childRef" class="w-1/5 xl:w-1/6" @select="handleSelect" /> -->
    <!-- <div class="w-4/5 xl:w-5/6"> -->
    <div class="w-5/5 xl:w-6/6">
      <BasicTable @register="registerTable" :searchInfo="searchInfo">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'zjzl'">
            <span style="width: 100%; display: flex; align-items: center; justify-content: center">
              {{ record.zjzl == 1 ? '身份证' : '-' }}
            </span>
          </template>
          <template v-if="column.key === 'htzmj'">
            <span style="width: 100%; display: flex; align-items: center; justify-content: center">
              {{ parseFloat(record.htzmj).toFixed(4) }}
            </span>
          </template>
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '查看档案',
                  onClick: () => {
                    openModal(record);
                  },
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>

    <a-modal
      v-model:open="open"
      width="100%"
      title="承包资料"
      wrap-class-name="full-modal"
      :centered="true"
      :closable="true"
      :destroyOnClose="true"
      :keyboard="false"
      :mask="false"
      :footer="null"
      :maskClosable="false"
    >
      <Files :fileList="fileList" @closeModal="closeModal" />
    </a-modal>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch, h, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { useModal } from '@/components/Modal';
  import {
    EditOutlined,
    DeleteOutlined,
    BorderHorizontalOutlined,
    PlusOutlined,
    ColumnHeightOutlined,
  } from '@ant-design/icons-vue';
  import { GetPageList, GetModel, GetFiles } from '@/api/nongjingquan/index';
  import LeftTree from './LeftTree.vue';
  import Files from './Files.vue';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { getAppEnvConfig } from '@/utils/env';
  import { useMessage } from '@/hooks/web/useMessage';
  import { columns, searchFormSchema } from './data';
  import dayjs from 'dayjs';
  import { cloneDeep } from 'lodash-es';
  import { defHttp } from '@/utils/http/axios';

  const { createConfirm, createMessage } = useMessage();

  const searchInfo = reactive<Recordable>({});
  const searchParams = ref();
  const [
    registerTable,
    { reload, getDataSource, getSelectRows, setSelectedRows, clearSelectedRowKeys },
  ] = useTable({
    api: GetPageList,
    rowKey: 'id',
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    isTreeTable: false,
    striped: false,
    bordered: false,
    inset: false,
    useSearchForm: true,
    showIndexColumn: false,
    showTableSetting: true,
    beforeFetch: (data) => {
      // 接口请求前 参数处理
      let temp = {
        ...data,
        pageIndex: data.page,
        pageSize: data.limit,
      };
      return temp;
    },
    handleSearchInfoFn(info) {
      if (info.startTime && info.endTime) {
        info = {
          ...info,
        };
      }
      searchParams.value = info;
      return info;
    },
  });

  // 弹窗----------------------------------------------------------------------
  // 左侧目录选择
  function handleSelect(orgId = '') {
    searchInfo.orgId = orgId;
    reload();
  }
  // 刷新表格
  const childRef = ref<any>();
  function handleSuccess(record = null) {
    clearSelectedRowKeys();
    childRef.value.fetch();
    reload();
  }

  // 查看弹窗----------------------------------------------------------------------------
  const open = ref(false);
  // 目前展示图片的列表
  const fileList: any = ref([]);
  // 开启
  async function openModal(record) {
    GetModel({
      cbfbm: record.cbfbm,
    }).then((res1) => {
      GetFiles({
        path: res1.path,
      }).then((res2) => {
        open.value = true;
        fileList.value = [];
        res2.forEach((item, index) => {
          if (item.isDirectory) {
            fileList.value.push(item);
          }
        });
      });
    });
  }
  // 关闭
  function closeModal() {
    open.value = false;
  }
</script>
<style lang="less" scoped>
  ::v-deep .full-modal {
    height: 100% !important;
  }
  ::v-deep .ant-modal-body {
    height: 100% !important;
  }
</style>
