<template>
  <Dialog
    v-model="dialogVisible"
    width="min(1280px, calc(100vw - 32px))"
    class="customer-select-dialog">
    <template #title>
      <div class="dialog-title">
        <div class="dialog-title__icon"><Icon icon="ep:office-building" /></div>
        <div>
          <div class="dialog-title__text">选择客户</div>
          <div class="dialog-title__subtitle">查询并选择需要关联的客户信息</div>
        </div>
      </div>
    </template>

    <div class="customer-select-content">
      <el-form
        ref="queryFormRef"
        :model="queryParams"
        label-width="76px"
        size="default"
        class="customer-query-form">
        <div class="query-fields">
          <el-form-item label="客商名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入客商名称"
              clearable
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="客商编号" prop="code">
            <el-input
              v-model="queryParams.code"
              placeholder="请输入客商编号"
              clearable
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item class="query-actions">
            <el-button size="default" type="primary" @click="handleQuery">
              <Icon icon="ep:search" class="mr-5px" />搜索
            </el-button>
            <el-button size="default" @click="resetQuery">
              <Icon icon="ep:refresh" class="mr-5px" />重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>

      <section class="customer-table-section">
        <div class="section-header">
          <div class="section-title">客户列表</div>
          <span class="section-total">共 {{ total }} 条</span>
        </div>
        <div class="table-container">
          <ZmTable
            :loading="loading"
            :data="list"
            height="360px"
            show-border
            @row-click="handleRowClick">
            <ZmTableColumn width="70" label="选择" hide-in-column-settings>
              <template #default="{ row }">
                <el-radio
                  :model-value="selectedRow?.id"
                  :value="row.id"
                  class="no-label-radio"
                  @click.stop="selectRow(row)" />
              </template>
            </ZmTableColumn>
            <ZmTableColumn label="客商名称" prop="name" />
            <ZmTableColumn label="客商编号" prop="code" />
            <ZmTableColumn label="客商分类" prop="classification">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.SUPPLIER_TYPE" :value="scope.row.classification" />
              </template>
            </ZmTableColumn>
            <ZmTableColumn label="状态" prop="status">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.SUPPLIER_STATUS" :value="scope.row.status" />
              </template>
            </ZmTableColumn>
            <ZmTableColumn label="创建时间" prop="createTime" :formatter="dateFormatter" />
          </ZmTable>
        </div>
        <Pagination
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="getList" />
      </section>
    </div>

    <template #footer>
      <el-button size="default" @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { Api, SupplierVO } from '@/api/supplier/base'
import { useTableComponents } from '@/components/ZmTable/useTableComponents'

const { ZmTable, ZmTableColumn } = useTableComponents()
const emit = defineEmits(['choose']) // 定义 success 事件，用于操作成功后的回调
const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中
const queryFormRef = ref() // 搜索的表单
const list = ref<SupplierVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
// const props = defineProps({
//   type: propTypes.bool.def(), // 是否作为详情组件
// })
const selectedRow = ref<SupplierVO | null>(null)

// 处理单选逻辑
const selectRow = (row) => {
  selectedRow.value = selectedRow.value?.id === row.id ? null : row
  emit('choose', row)
  dialogVisible.value = false
}

// 点击整行选中
const handleRowClick = (row) => {
  selectRow(row)
}
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  customerNature: undefined,
  code: undefined,
  name: undefined,
  classification: undefined,
  type: undefined,
  nature: undefined,
  creditCode: undefined,
  tin: undefined,
  corporation: undefined,
  incorporationDate: [],
  address: undefined,
  bizScope: undefined,
  registeredCapital: undefined,
  annualTurnove: undefined,
  size: undefined,
  status: undefined,
  remark: undefined,
  createTime: [],
  customerNature: ''
})
const open = async () => {
  dialogVisible.value = true
  queryParams.name = undefined
  selectedRow.value = null
  await getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const getList = async () => {
  loading.value = true
  try {
    console.log(JSON.stringify(queryParams))
    const data = await Api.getPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
</script>
<style scoped>
.dialog-title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.dialog-title__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 12px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-7);
  border-radius: 6px;
}

.dialog-title__text {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--el-text-color-primary);
}

.dialog-title__subtitle {
  margin-top: 1px;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-secondary);
}

.customer-select-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.customer-query-form {
  padding: 14px 16px;
  background: var(--el-fill-color-extra-light);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
}

.query-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) auto;
  gap: 12px 24px;
  align-items: center;
}

.customer-query-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.query-actions {
  min-width: max-content;
}

.query-actions :deep(.el-form-item__content) {
  gap: 10px;
  flex-wrap: nowrap;
  margin-left: 0 !important;
}

.query-actions :deep(.el-button) {
  margin-left: 0;
}

.customer-table-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.section-title {
  position: relative;
  padding-left: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.section-title::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  background: var(--el-color-primary);
  border-radius: 2px;
  content: '';
}

.section-total {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.table-container {
  min-width: 0;
  padding: 12px 12px 0;
}

.customer-table-section :deep(.pagination-container) {
  padding: 12px;
}

.no-label-radio :deep(.el-radio__label) {
  display: none;
}

@media (width <= 768px) {
  .dialog-title__subtitle {
    display: none;
  }

  .query-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
</style>
