<!-- 筛选系统用户弹窗 -->
<script name="FilterCustomer" lang="ts" setup>
import type { ICustomerFilter } from './common-interface'
import type { ICustomerInfo } from '@/views/resource/customer/info/customer-info'
import { getCustomerInfoList } from '@/api/resource/customer'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const emit = defineEmits(['recordSelected'])

const showFilterDialog = ref(false)
const customerQuery = ref<ICustomerFilter>({
  customerName: '',
  approvalStatus: '0', // 查询委托方名录
  formId: 'zyglwtfml', // 表单Id
  offset: 1,
  limit: 10,
})
const total = ref<number>(0) // 数据总条数
const columns = ref <Array<TableColumn>>([
  { text: '委托方编号', value: 'customerNo', align: 'center' },
  { text: '委托方名称', value: 'customerName', align: 'center' },
  { text: '联系人', value: 'contacts', align: 'center' },
]) // 表头

const customerList = ref<Array<ICustomerInfo>>([])

// 查询委托方名录列表
const getCustomerList = () => {
  getCustomerInfoList(customerQuery.value).then((res) => {
    if (res.code === 200) {
      customerList.value = res.data.rows
      total.value = res.data.total
    }
    else {
      customerList.value = []
    }
  })
}

// 逻辑
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    customerQuery.value.limit = val.size
  }
  if (val && val.page) {
    customerQuery.value.offset = val.page
  }
  getCustomerList()
}

// 选中用户
const selectSingleUser = (row: Object) => {
  emit('recordSelected', row)
}

const showOrHideFilterDialog = (show: boolean) => {
  if (show === false) {
    customerQuery.value.customerName = ''
    customerQuery.value.offset = 1
    customerQuery.value.limit = 10
  }
  else {
    getCustomerList()
  }

  showFilterDialog.value = show
}

defineExpose({
  showOrHideFilterDialog,
})
</script>

<template>
  <el-dialog v-model="showFilterDialog" title="选择委托方" :append-to-body="true" :close-on-click-modal="false" top="10vh">
    <search-area :need-clear="false" @search="getCustomerList">
      <search-item>
        <el-input v-model="customerQuery.customerName" placeholder="委托方名称" clearable />
      </search-item>
    </search-area>

    <!-- 表格数据展示 -->
    <table-container :title-show="false">
      <!-- 表格区域 -->
      <normal-table
        :data="customerList" :total="total" :columns="columns"
        :query="{ limit: customerQuery.limit, offset: customerQuery.offset }"
        @change="changePage"
      >
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ (customerQuery.offset - 1) * customerQuery.limit + scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <template #columns>
          <el-table-column fixed="right" label="操作" align="center" width="130">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="selectSingleUser(row)">
                选定
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
  </el-dialog>
</template>
