<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useExcel, type IExcel } from '@/hooks/useExcel'

const { exportExcel } = useExcel()

const tableData = [
  {
    name: '张三',
    province: '山西',
    city: '太原',
    zone: '小店区',
    street: '平阳路街道',
    address: '平阳景苑30栋1单元',
    price: 18
  },
  {
    name: '李四',
    province: '山东',
    city: '青岛',
    zone: '市北区',
    street: '香港中路',
    address: '中心大厦1号楼2单元',
    price: 85
  },
  {
    name: '王五',
    province: '浙江',
    city: '杭州',
    zone: '西湖区',
    street: '文三路',
    address: '西溪风景区3栋9单元',
    price: 8
  },
  {
    name: '赵六',
    province: '福建',
    city: '泉州',
    zone: '丰泽区',
    street: '南洋街道',
    address: '南洋村6幢1单元',
    price: 16
  },
  {
    name: '孙七',
    province: '河北',
    city: '武汉',
    zone: '武昌区',
    street: '武昌大道',
    address: '两湖花园16幢2单元',
    price: 12
  },
  {
    name: '周八',
    province: '河北',
    city: '石家庄',
    zone: '黄山区',
    street: '汤口镇',
    address: '温泉村21号',
    price: 11
  }
]

// 选中数据
const selects = ref([])

/* 导出 */
const exportFile = () => {
  const excelParams: IExcel = {
    fileName: '用户数据',
    rows: [['用户名', '省', '市', '区', '街道', '详细地址', '金额']],
    width: [16, 16, 16, 16, 30, 40, 15],
    data: []
  }
  tableData.forEach((item: any) => {
    excelParams.data.push([item.name, item.province, item.city, item.zone, item.street, item.address, item.price])
  })
  exportExcel(excelParams)
    .then(() => {
      ElMessage.success('导出成功')
    })
    .catch(e => {
      ElMessage.error(e.message)
    })
}

/* 导出合并表格 */
const exportFile2 = () => {
  const excelParams: IExcel = {
    fileName: '用户数据',
    rows: [
      ['用户名', '地址', '', '', '', '', '金额'],
      ['', '省', '市', '区', '街道', '详细地址', '']
    ],
    width: [16, 16, 16, 16, 30, 40, 15],
    data: [],
    merge: ['A1:A2', 'B1:F1', 'G1:G2'] // 传递合并参数
  }
  tableData.forEach((item: any) => {
    excelParams.data.push([item.name, item.province, item.city, item.zone, item.street, item.address, item.price])
  })
  exportExcel(excelParams)
    .then(() => {
      console.log()
    })
    .catch(e => {
      ElMessage.error(e.message)
    })
}

/* 选择导出 */
const exportFile3 = () => {
  const excelParams: IExcel = {
    fileName: '用户数据',
    rows: [['用户名', '省', '市', '区', '街道', '详细地址', '金额']],
    width: [16, 16, 16, 16, 30, 40, 15],
    data: []
  }
  selects.value.forEach((item: any) => {
    excelParams.data.push([item.name, item.province, item.city, item.zone, item.street, item.address, item.price])
  })
  exportExcel(excelParams)
    .then(() => {
      console.log()
    })
    .catch(e => {
      ElMessage.error(e.message)
    })
}

const handleSelectionChange = (data: any) => {
  selects.value = data
}
</script>

<template>
  <el-card shadow="never">
    <el-button type="primary" @click="exportFile">导出</el-button>
    <el-button type="primary" @click="exportFile2">导出合并表格</el-button>
    <el-button type="primary" :disabled="!selects.length" @click="exportFile3">导出选中</el-button>
    <el-table :data="tableData" border style="width: 100%" class="mt-3" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="用户名"></el-table-column>
      <el-table-column label="地址" align="center">
        <el-table-column prop="province" label="省" />
        <el-table-column prop="city" label="市" />
        <el-table-column prop="zone" label="区" />
        <el-table-column prop="street" label="街道" />
        <el-table-column prop="address" label="详细地址" />
      </el-table-column>
      <el-table-column prop="price" label="金额" />
    </el-table>
  </el-card>
</template>

<style scoped></style>
