<template>
    <div class="h-full flex flex-col bg-white p-2">
      <p class="font-bold text-lg leading-10 border-b-2">客户资料</p>
     
      <el-form class="pt-2" :model="formState" inline>
          <el-form-item label="资料名称">
            <el-input v-model="formState.customerName"></el-input>
          </el-form-item>
    
          <el-form-item>
            <el-button @click="">重置</el-button>
            <el-button @click="" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
    
      <el-space wrap>
        <el-card v-for="informationType in informationTypes" :key="informationType" class="box-card" @click="handleInfoTypeClick(informationType)">
          <div  class="text item">
            {{ informationType }}
          </div>
        </el-card>
      </el-space>
      </div>
    </template>
      
      <script lang="ts" setup>
      import { defineComponent, ref, onMounted, reactive, watch, unref } from 'vue'
      import { getInformationList } from '@/api/customer'
      import type { VxeTableInstance } from 'vxe-table'
      import { useRouter } from 'vue-router'
      
      const loading = ref(false)
      const router = useRouter()
      
      const xTable = ref<VxeTableInstance>()
      const tableData = ref([])
      const informationTypes = ref([])
      const queryParam = reactive({
        type:""
      })
      const formState = reactive({
        customerName: '',
        customerNickName: '',
        currentPage: 1,
        pageSize: 10,
        total: 0
      })
      
    
      const queryInfomartionList = async () => {
        loading.value = true
        try {
          // 模糊查询
          const { data } = await getInformationList(unref(formState))
          informationTypes.value = data.result
          console.log(informationTypes)
          formState.total = +data.result.total
        } catch {}
        loading.value = false
      }
    
      const handleInfoTypeClick = (informationType: any) => {
        alert(informationType)
      }
      
      onMounted(() => {
        queryInfomartionList()
      })
      </script>
     
    
    
     
    <style lang="scss" scoped>
    </style>