<template>
    <vxe-modal
      v-model="showEdit"
      :z-index="1006"
      @hide="onHide"
      title="客户选择"
      width="800"
      esc-closable
      mask-closable
      show-footer
    >
      <template #default>
        
        <el-button type="primary" @click="download">导出</el-button>
  
        <vxe-table ref="xTable" border :data="data" size="small" height="400">
          <vxe-column v-for="column in titles" :key="item" :field="column" :title="column"></vxe-column>
        </vxe-table>
  
       
      </template>
  
      <template #footer>
        <el-button type="primary" @click="showEdit = false">关闭</el-button>
      </template>
    </vxe-modal>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, onMounted, reactive, watch, unref } from 'vue'
  import { getCustomerPage } from '@/api/customer'
  import type { VxeTableInstance } from 'vxe-table'
  import { ElMessage } from 'element-plus'
  
  export default defineComponent({
    name: 'TemplateVariables',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      titles: {
        type: Array,
        default: () => []
      },
      data: {
        type: Array,
        default: () => []
      }
    },
    emits: ['update:visible', 'download'],
    setup(props, { emit }) {
      const showEdit = ref(false)
      const xTable = ref<VxeTableInstance>()
      const tableData = ref([])
      
  
      watch(
        () => props.visible,
        (val) => {
          showEdit.value = val
        }
      )

  
      const onHide = () => {
        emit('update:visible', false)
      }

      const download = () => {
        emit('download')
      }
  
      return {
        showEdit,
        xTable,
        tableData,
        onHide,
        download
      }
    }
  })
  </script>
  <style lang="scss" scoped></style>
  