<template>
  <vxe-modal
    v-model="showEdit"
    :z-index="1006"
    @hide="onHide"
    title="模版变量详情"
    width="800"
    esc-closable
    mask-closable
    show-footer
  >
    <template #default>
      <vxe-table v-if="errors.length" class="mb-2" border :data="errors" size="mini" height="200">
        <vxe-column  field="field" title="错误字段" width="120" />
        <vxe-column  field="message" title="错误信息" />
      </vxe-table>

      <el-dropdown placement="bottom-start" @command="handleExport">
        <el-button type="primary">导出数据</el-button>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="xlsx">*.xlsx</el-dropdown-item>
            <el-dropdown-item command="txt">*.txt</el-dropdown-item>
            <el-dropdown-item command="csv">*.csv</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <vxe-table ref="xTable" border :data="data" size="small" height="400">
        <vxe-column
          v-for="column in titles"
          :key="item"
          :field="column"
          :title="column"
          show-overflow
          width="150"
        ></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: () => []
    },
    errors: {
      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 handleExport = (type: any) => {
      emit('download', type)
    }

    return {
      showEdit,
      xTable,
      tableData,
      onHide,
      handleExport
    }
  }
})
</script>
<style lang="scss" scoped></style>
