<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"
        :row-config="{ keyField: 'productCode' }"
        :checkbox-config="{ reserve: true }"
        :loading="loading"
        size="mini"
        height="400"
      >
        <vxe-column type="checkbox" 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">
// const dataSource = [
//   {
//     productCode: '123456',
//     productName: '测试产品1',
//     productCategoryId_dictText: '类型1'
//   },
//   {
//     productCode: '789012',
//     productName: '测试产品2',
//     productCategoryId_dictText: '类型2'
//   },
//   {
//     productCode: '789013',
//     productName: '测试产品3',
//     productCategoryId_dictText: '类型3'
//   },
//   {
//     productCode: '789014',
//     productName: '测试产品4',
//     productCategoryId_dictText: '类型4'
//   },
//   {
//     productCode: '789015',
//     productName: '测试产品5',
//     productCategoryId_dictText: '类型5'
//   },
//   {
//     productCode: '789016',
//     productName: '测试产品6',
//     productCategoryId_dictText: '类型6'
//   },
//   {
//     productCode: '789017',
//     productName: '测试产品7',
//     productCategoryId_dictText: '类型7'
//   },
//   {
//     productCode: '789018',
//     productName: '测试产品8',
//     productCategoryId_dictText: '类型8'
//   },
//   {
//     productCode: '789019',
//     productName: '测试产品9',
//     productCategoryId_dictText: '类型9'
//   },
//   {
//     productCode: '7890141',
//     productName: '测试产品41',
//     productCategoryId_dictText: '类型41'
//   },
//   {
//     productCode: '7890142',
//     productName: '测试产品42',
//     productCategoryId_dictText: '类型42'
//   },
//   {
//     productCode: '7890143',
//     productName: '测试产品43',
//     productCategoryId_dictText: '类型43'
//   }
// ]
import { defineComponent, ref, onMounted, reactive, watch, unref, nextTick } 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
    },
    selectProd: {
      type: Array,
      default: () => []
    }
  },
  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: 5,
      total: 12
    })

    watch(
      () => props.visible,
      (val) => {
        showEdit.value = val
        val &&
          nextTick(() => {
            xTable.value?.setCheckboxRow(props.selectProd, true)
          })
      }
    )

    const resetForm = () => {
      Object.assign(formState, {
        productName: '',
        productCode: ''
      })
    }
    const queryCustomer = async () => {
      loading.value = true
      try {
        // tableData.value = dataSource.slice(
        //   (formState.currentPage - 1) * 5,
        //   formState.pageSize * formState.currentPage
        // )
        // formState.total = +dataSource.length
        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?.getCheckboxRecords() || []
      const reserveList = xTable.value?.getCheckboxReserveRecords() || []
      const res = [...list, ...reserveList]

      if (!res?.length) {
        return ElMessage.warning('请选择一条数据！')
      }

      emit('confirm', res)
      emit('update:visible', false)
    }

    const onHide = () => {
      xTable.value?.clearCheckboxReserve()
      xTable.value?.clearCheckboxRow()
      emit('update:visible', false)
    }

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