<template>
  <vxe-modal
    v-model="showEdit"
    :z-index="1006"
    @hide="onHide"
    title="用户选择"
    width="800"
    esc-closable
    mask-closable
    show-footer
  >
    <template #default>
      <el-form :model="formState" size="small" inline>
        <el-form-item label="用户名称">
          <el-input v-model="formState.nickName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="queryUser" type="primary">查询</el-button>
        </el-form-item>
      </el-form>

      <vxe-table ref="xTable" border :data="tableData" :loading="loading" size="small" height="400">
        <vxe-column type="radio" width="40"></vxe-column>
        <vxe-column field="nickName" title="用户名称"></vxe-column>
        <vxe-column field="phonenumber" title="联系电话"></vxe-column>
        <vxe-column field="email" title="邮箱"></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="queryUser"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
      >
      </vxe-pager>
    </template>

    <template #footer>
      <el-button type="primary" @click="confirmModal">确认</el-button>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, watch } from 'vue'
import { getUserList } from '@/api/customer'
import type { VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'UserModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['confirm', 'update:visible'],
  setup(props, { emit }) {
    const loading = ref(false)
    const showEdit = ref(false)
    const xTable = ref<VxeTableInstance>()
    const tableData = ref([])
    const formState = reactive({
      nickName: '',
      currentPage: 1,
      pageSize: 10,
      total: 0
    })

    watch(
      () => props.visible,
      (val) => {
        showEdit.value = val
      }
    )

    const resetForm = () => {
      formState.nickName = ''
    }
    const queryUser = async () => {
      loading.value = true
      try {
        const { data } = await getUserList(formState)
        tableData.value = data.result.records
        formState.total = +data.result.total
      } catch {}
      loading.value = false
    }

    const confirmModal = () => {
      const list = xTable.value?.getRadioRecord()
      if (list == null) {
        return ElMessage.warning('请选择一条数据！')
      }
      emit('confirm', [list])
      emit('update:visible', false)
    }

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

    onMounted(() => {
      queryUser()
    })
    return {
      showEdit,
      xTable,
      formState,
      loading,
      tableData,
      resetForm,
      onHide,
      confirmModal,
      queryUser
    }
  }
})
</script>
<style lang="scss" scoped></style>
