<template>
  <vxe-modal
    v-model="showEdit"
    @hide="onHide"
    title="品牌选择"
    width="800"
    destroy-on-close
    esc-closable
    mask-closable
    show-footer
  >
    <template #default>
      <el-form :model="formState" size="small" inline>
        <el-form-item label="品牌名称">
          <el-input v-model="formState.brandName" placeholder="品牌名称" clearable />
        </el-form-item>
        <el-form-item label="品牌编码">
          <el-input v-model="formState.brandCode" placeholder="品牌编码" clearable />
        </el-form-item>
        <el-form-item label="品牌描述">
          <el-input v-model="formState.brandRemark" placeholder="品牌描述" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="queryBrand">查询</el-button>
        </el-form-item>
      </el-form>

      <vxe-table ref="xTable" border :data="tableData" :loading="loading" size="small" height="400">
        <vxe-column type="checkbox" width="40"></vxe-column>
        <vxe-column field="brandId" title="id" width="200"></vxe-column>
        <vxe-column field="brandName" title="品牌名称" width="150"></vxe-column>
        <vxe-column field="brandCode" title="品牌编码" width="120"></vxe-column>
        <vxe-column field="brandRemark" title="品牌描述" show-overflow></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="queryBrand"
        :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 { getBrandsList } from '@/api/configure/brand'
import type { VxeTableInstance } from 'vxe-table'

export default defineComponent({
  name: 'BrandModal',
  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({
      brandName: '',
      brandCode: '',
      brandRemark: '',
      currentPage: 1,
      pageSize: 10,
      total: 0
    })

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

    const resetForm = () => {
      Object.assign(formState, {
        brandName: '',
        brandCode: '',
        brandRemark: ''
      })
    }
    const queryBrand = async () => {
      loading.value = true
      try {
        const { data } = await getBrandsList(formState)
        tableData.value = data.result.records
        formState.total = +data.result.total
      } catch {}
      loading.value = false
    }

    const confirmModal = () => {
      const list = xTable.value?.getCheckboxRecords()
      emit('confirm', list)
      emit('update:visible', false)
    }

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

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