<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    title="新增"
    :ok="btnClick"
    :cancel="() => (visible = false)"
    placement="right">
    <ns-view-list-table v-bind="tableConfig" />
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { NsMessage } from '/nerv-lib/component';

  const visible = ref(false);
  const model = ref({});
  const toggle = () => {
    visible.value = !visible.value;
  };
  const doWnload = (url) => {
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.href = encodeURI(url);
    //设置下载的文件名
    // a.download = fileName.value;
    //触发a标签的点击事件，进行下载
    a.click();
  };

  const mockDataSource = ref([
    {
      type: '电力',
      fileName: '电力_2024.pdf',
    },
    {
      type: '水',
      fileName: '电力_2024.pdf',
    },
    {
      type: '天然气',
      fileName: '电力_2024.pdf',
    },
    {
      type: '汽油',
      fileName: '电力_2024.pdf',
    },
    {
      type: '煤油',
      fileName: '电力_2024.pdf',
    },
  ]);

  const tableConfig = {
    value: mockDataSource.value,
    sticky: false,
    rowKey: 'type',
    columns: [
      {
        title: '序号',
        dataIndex: 'index',
        customRender: ({ index }) => index + 1,
      },
      {
        title: '能源类型',
        dataIndex: 'type',
      },
      {
        title: '文件名',
        dataIndex: 'fileName',
      },
    ],
    headerActions: [
      {
        label: '批量下载',
        name: 'groupTemDownload',
        type: 'primary',
        handle: () => {
          // http.get('/asset/file/whiteListUser.xlsx');
          doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
        },
      },
    ],
    columnActions: {
      title: '操作',
      actions: [
        {
          label: '下载',
          name: 'groupTemDownload',
          handle: () => {
            // http.get('/asset/file/whiteListUser.xlsx');
            doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
          },
        },
      ],
    },
  };

  const btnClick = () => {
    visible.value = false;
    NsMessage.success('操作成功');
  };

  defineExpose({
    toggle,
  });
</script>
<style scoped lang="less">
  :deep(.ns-table-header) {
    min-width: 200px;
  }
  :deep(.ns-table-container),
  :deep(.ns-table-main) {
    border-top: 0px !important;
  }
</style>
