<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" size="small" inline>
      <el-form-item label="客户名称">
        <el-input v-model="formState.customerName"></el-input>
      </el-form-item>
      <el-form-item label="客户类型">
        <el-select v-model="formState.customerType"> </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="queryCustomer" type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <vxe-table
      ref="xTable"
      min-height="460"
      border
      :data="tableData"
      :loading="loading"
      size="small"
    >
      <vxe-column type="checkbox" width="40"></vxe-column>
      <!-- <vxe-column field="customerId" title="客户id"></vxe-column> -->
      <vxe-column field="customerName" title="客户名称"></vxe-column>
      <vxe-column field="customerType" title="客户类型">
        <template #default="{ row }">
          {{ row.customerType === 'brand' ? '品牌' : '工厂' }}
        </template>
      </vxe-column>
      <vxe-column field="action" title="操作" width="100">
        <template #default="{ row }">
          <el-button type="primary" text size="small" @click="toEmail(row)">查看邮箱</el-button>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-pager
      size="small"
      background
      v-model:current-page="formState.currentPage"
      v-model:page-size="formState.pageSize"
      :total="formState.total"
      @page-change="queryCustomer"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
    >
    </vxe-pager>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, onMounted, reactive, watch } from 'vue'
import { getCustomerPage } 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 formState = reactive({
  customerName: '',
  customerType: '',
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const toEmail = (row: any) => {
  router.push({
    name: 'OrderCustomerEmail',
    query: {
      customerId: row.customerId,
      customerName: row.customerName
    }
  })
}

const queryCustomer = async () => {
  loading.value = true
  try {
    const { data } = await getCustomerPage(formState)
    tableData.value = data.result.records
    formState.total = +data.result.total
  } catch {}
  loading.value = false
}
const resetForm = () => {
  Object.assign(formState, {
    customerName: '',
    customerType: ''
  })
}

onMounted(() => {
  queryCustomer()
})
</script>
<style lang="scss" scoped></style>
