<template>
  <vxe-modal
    v-model="showEdit"
    :z-index="1006"
    @hide="onHide"
    title="客户选择"
    width="800"
    esc-closable
    mask-closable
    show-footer
  >
    <template #default>
      <vxe-table ref="xTable" border :data="data" size="small" height="400">
        <vxe-column
          v-for="column in titles"
          :key="item"
          :field="column"
          :title="column"
          cell-type="string"
          show-overflow
          width="150"
        >
        </vxe-column>
      </vxe-table>
    </template>

    <template #footer>
      <el-button type="primary" @click="exportRunData">导出</el-button>
      <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'],
  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 exportRunData = () => {
      xTable.value?.exportData({ type: 'csv' })
    }
    return {
      showEdit,
      xTable,
      tableData,
      onHide,
      exportRunData
    }
  }
})
</script>
<style lang="scss" scoped></style>
