<template>
  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择采购订单" width="70%">
    <ContentWrap>
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        class="-mb-15px"
        label-width="100px"
      >
        <el-form-item label="订单单号" prop="no">
          <el-input
            v-model="queryParams.no"
            class="!w-200px"
            clearable
            placeholder="请输入订单单号"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="供应商" prop="supplierId">
          <el-select
            v-model="queryParams.supplierId"
            class="!w-200px"
            clearable
            filterable
            placeholder="请选择供应商"
          >
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单时间" prop="orderTime">
          <el-date-picker
            v-model="queryParams.orderTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
        <!-- 单选模式 -->
        <el-table-column label="#" width="55">
          <template #default="{ row }">
            <el-radio :value="row.id" v-model="selectedId" @change="handleSingleSelected(row)">
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column label="订单单号" align="center" prop="no" min-width="140" />
        <el-table-column label="供应商" align="center" prop="supplierName" min-width="120" />
        <el-table-column
          label="订单时间"
          align="center"
          prop="orderTime"
          :formatter="dateFormatter2"
          width="160px"
        />
        <el-table-column
          label="合计数量"
          align="center"
          prop="totalCount"
          width="120"
          :formatter="erpCountTableColumnFormatter"
        />
        <el-table-column
          label="合计金额"
          align="center"
          prop="totalPrice"
          width="140"
          :formatter="erpPriceTableColumnFormatter"
        />
      </el-table>
      <!-- 分页 -->
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </ContentWrap>
  </Dialog>
</template>

<script lang="ts" setup>
import { dateFormatter2 } from '@/utils/formatTime'
import { erpCountTableColumnFormatter, erpPriceTableColumnFormatter } from '@/utils'
import { PurchaseOrderApi, PurchaseOrderVO } from '@/api/erp/purchase/order'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { CHANGE_EVENT } from 'element-plus'

defineOptions({ name: 'PurchaseOrderTableSelect' })

// 列表的总页数
const total = ref(0)
// 列表的数据
type PurchaseOrderRow = PurchaseOrderVO & { supplierName?: string }
const list = ref<PurchaseOrderRow[]>([])
// 列表的加载中
const loading = ref(false)
// 弹窗的是否展示
const dialogVisible = ref(false)
// 查询参数
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  no: '',
  supplierId: undefined,
  orderTime: []
})
const queryFormRef = ref()
const supplierList = ref<SupplierVO[]>([]) // 供应商列表

// 选中的订单 ID
const selectedId = ref()

/** 打开弹窗 */
const open = async (currentNo?: string) => {
  dialogVisible.value = true
  selectedId.value = undefined
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    no: currentNo || '',
    supplierId: undefined,
    orderTime: []
  }
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  getList()
}
// 提供 open 方法，用于打开弹窗
defineExpose({ open })

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await PurchaseOrderApi.getPurchaseOrderPage(queryParams.value)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    no: '',
    supplierId: undefined,
    orderTime: []
  }
  getList()
}

/** 单选中时触发 */
const handleSingleSelected = (row: PurchaseOrderRow) => {
  emits(CHANGE_EVENT, row)
  // 关闭弹窗
  dialogVisible.value = false
  // 记住上次选择的ID
  selectedId.value = row.id
}

/** 确认选择时的触发事件 */
const emits = defineEmits<{
  change: [order: PurchaseOrderRow]
}>()
</script>
