<template>
  <a-row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="5">
    <a-col :span="6" :xl="6" :lg="24" :md="24" style="overflow-y: hidden; max-height: 87vh">
      <LeftTree ref="leftTree" @select="onTreeSelect" @successTree="handleSuccessTre" />
    </a-col>
    <a-col :span="18" :xl="18" :lg="24" :md="24">
      <BasicTable @register="registerTable">
        <!-- 按钮 -->
        <template #tableTitle>
          <a-button type="primary" v-auth="'zcfg-file-sczl'" @click="upFiles">上传资料</a-button>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
        </template>
      </BasicTable>
    </a-col>
  </a-row>
  <!-- 上传文件 -->
  <UpFile @register="registerUpModal" @success="handleSuccessTre" />
  <!-- 编辑文件 -->
  <Preview @register="registerModal" @success="handleSuccessTre" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useModal } from '/@/components/Modal';
  import { useDesign } from '/@/hooks/web/useDesign';
  import LeftTree from './components/LeftTree.vue';
  import Preview from './Model/preview.vue';
  import UpFile from './Model/UpFile.vue';
  import { columnsFile, searchFlieFormSchema } from './data';
  import { fileList, fileDel } from './api';
  import { downloadFile } from '/@/api/common/api';

  const { createMessage } = useMessage();
  const { prefixCls } = useDesign('address-list');
  //注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      title: '政策法规文件管理',
      api: fileList,
      columns: columnsFile,
      canResize: false,
      // clickToRowSelect: true,
      // showActionColumn: false,
      beforeFetch(params: any) {
        if (orgCode.value) {
          params.pid = orgCode.value;
        }
        if (params.data) {
          const arry = params.data.split(',');
          params.startTime = arry[0];
          params.endTime = arry[1];
        }
      },
      //定义rowSelection的类型，默认是checkbox多选，可以设置成radio单选
      // rowKey: 'wrdkid',
      // rowSelection: { type: 'radio' },
      formConfig: {
        labelWidth: 120,
        schemas: searchFlieFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: false,
      },
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
    },
    // exportConfig: {
    //   name: '政策法规文件管理',
    //   url: getExportUrl,
    // },
    // importConfig: {
    //   url: getImportUrl,
    // },
  });
  const [registerTable, { reload }, {}] = tableContext;
  // 上传文件
  const [registerUpModal, { openModal: openUpModal }] = useModal();
  const [registerModal, { openModal }] = useModal();
  const orgCode = ref<any>();

  // 上次文件
  function upFiles() {
    if (!orgCode.value) {
      createMessage.error('请先选择左侧文件');
      return;
    }
    openUpModal(true, {
      record: { pid: orgCode.value },
      showFooter: true,
      isEdit: false,
    });
  }

  //   点击编辑
  function handleEdit(record) {
    openUpModal(true, {
      record: record,
      showFooter: true,
      isEdit: true,
    });
  }
  // 左侧树选择后触发
  function onTreeSelect(data) {
    orgCode.value = data.id;
    reload();
  }
  //   刷新列表
  function handleSuccessTre() {
    reload();
  }
  /**
   * 操作栏
   */
  function getTableAction(record: any): ActionItem[] {
    return [
      {
        label: '编辑',
        auth: 'zcfg-file-edit',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }
  // 预览
  function handlePreview(record: any) {
    console.log(record, 'record');
    openModal(true, {
      record: record,
      showFooter: true,
    });
  }
  /**
   * 下载
   */
  function down(url, name) {
    let fileExtension = url.split('.').pop();
    downloadFile('/sys/common/static' + url, `${name}.${fileExtension}`);
  }
  /**
   * 删除
   */
  async function handleDelete(record) {
    await fileDel({ id: record.id });
    reload();
  }
  function getDropDownAction(record) {
    return [
      {
        label: '预览',
        auth: 'zcfg-file-preview',
        onClick: handlePreview.bind(null, record),
      },
      {
        label: '下载',
        auth: 'zcfg-file-down',
        onClick: down.bind(null, record.file, record.name),
      },

      {
        label: '删除',
        color: 'error',
        auth: 'zcfg-file-del',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  }
</script>
