<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.productName" clearable></el-input>
          </el-form-item>
          <el-form-item label="产品编码">
            <el-input v-model="formState.productCode" clearable></el-input>
          </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" border :data="tableData" :loading="loading" size="mini" height="400">
          <vxe-column type="radio" width="40"></vxe-column>
          <vxe-column field="productCode" title="产品编码" width="200"></vxe-column>
        <vxe-column field="productName" title="产品名称"></vxe-column>
        <vxe-column field="productCategoryId_dictText" title="产品类型" width="200"></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>
      </template>
  
      <template #footer>
        <el-button type="primary" @click="confirmModal">确认</el-button>
      </template>
    </vxe-modal>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, onMounted, reactive, watch, unref } from 'vue'
  import { getProductList } from '@/api/product'
  import type { VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'
import { queryParamsFilter } from '@/utils/query'
  
  export default defineComponent({
    name: 'ProductModal',
    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({
        productName: '',
        productCode: '',
        currentPage: 1,
        pageSize: 10,
        total: 0
      })
  
      watch(() => props.visible, (val) => {
        showEdit.value = val
      })
  
      const resetForm = () => {
        Object.assign(formState, {
          productName: '',
          productCode: ''
        })
      }
      const queryCustomer = async () => {
        loading.value = true
        try {
          const params = queryParamsFilter(unref(formState))
          const { data } = await getProductList(params)
          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(() => {
        queryCustomer()
      })
      return {
        showEdit,
        xTable,
        formState,
        loading,
        tableData,
        resetForm,
        onHide,
        confirmModal,
        queryCustomer
      }
    }
  })
  </script>
  <style lang="scss" scoped></style>
  