<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      v-loading="formLoading"
    >
      <!-- 基础信息 -->
      <el-card class="mb-4">
        <template #header>
          <span>基础信息</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="采购单号">
              <el-input v-model="formData.purOrdNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单日期">
              <el-input v-model="formData.purDate" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据类型">
              <el-input :value="formData.billType === '1' ? '标准采购申请' : '设备采购申请'" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据状态">
              <el-tag v-if="formData.purStatus === '1'" type="info">已创建</el-tag>
              <el-tag v-else-if="formData.purStatus === '2'" type="warning">已确认</el-tag>
              <el-tag v-else-if="formData.purStatus === '3'" type="success">已审批</el-tag>
              <el-tag v-else-if="formData.purStatus === '4'" type="danger">已驳回</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mt-4">
          <el-col :span="6">
            <el-form-item label="供应商">
              <el-input v-model="formData.supplierName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="采购部门">
              <el-input v-model="formData.purDeptName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="采购人员">
              <el-input v-model="formData.purEmpName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="验收方式">
              <el-input :value="formData.acceptMeth === '1' ? '数量验收' : '金额验收'" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mt-4">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="formData.remark" type="textarea" :rows="2" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 采购物料信息 -->
      <el-card>
        <template #header>
          <span>采购物料信息</span>
        </template>
        <el-table :data="itemList" show-summary border :summary-method="getSummary">
          <el-table-column label="序号" type="index" width="60px" align="center" />
          <el-table-column label="物料编码" prop="materialCode" width="120px" align="center" />
          <el-table-column label="物料名称" prop="materialName" width="150px" align="center" />
          <el-table-column label="规格型号" prop="spec" width="100px" align="center" />
          <el-table-column label="单位" prop="unit" width="80px" align="center" />
          <el-table-column label="采购数量" prop="purQty" width="100px" align="center" />
          <el-table-column label="要求交货日期" prop="reqDeliveryDate" width="130px" align="center" />
          <el-table-column label="采购单价" prop="priceTax" width="100px" align="center">
            <template #default="scope">
              <span style="color: #409EFF;">{{ scope.row.priceTax }}</span>
            </template>
          </el-table-column>
          <el-table-column label="税率(%)" prop="taxRatio" width="80px" align="center">
            <template #default="scope">
              {{ scope.row.taxRatio }}%
            </template>
          </el-table-column>
          <el-table-column label="采购总价" prop="totalPrice" width="100px" align="center" />
          <el-table-column label="备注" prop="remark" width="100px" align="center" />
        </el-table>
      </el-card>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import * as PurOrderApi from '@/api/biz/purorder'
import * as PurOrderItemApi from '@/api/biz/purorderitem'

const message = useMessage()

const dialogVisible = ref(false)
const dialogTitle = ref('采购订单详情')
const formLoading = ref(false)

const formData = reactive({
  id: undefined,
  purOrdNo: undefined,
  purDate: undefined,
  billType: undefined,
  purStatus: undefined,
  supplierName: undefined,
  purDeptName: undefined,
  purEmpName: undefined,
  acceptMeth: undefined,
  remark: undefined,
})

const itemList = ref<any[]>([])

// 打开弹窗
const open = async (id: number) => {
  formLoading.value = true
  dialogVisible.value = true

  try {
    const data = await PurOrderApi.getPurOrder(id)
    Object.assign(formData, data)

    // 加载子表数据
    const itemData = await PurOrderItemApi.getPurOrderItemPage({
      pageNo: 1,
      pageSize: 100,
      purId: id
    })
    itemList.value = (itemData.list || []).map((item: any) => ({
      materialCode: item.materialCode,
      materialName: item.materialName,
      spec: item.spec,
      unit: item.unit,
      purQty: item.purQty,
      reqDeliveryDate: item.reqDeliveryDate,
      priceTax: item.priceTax,
      taxRatio: item.taxRatio,
      totalPrice: item.totalPrice,
      remark: item.remark,
    }))
  } catch (error) {
    message.error('获取详情失败')
  } finally {
    formLoading.value = false
  }
}

// 合计方法
const getSummary = (param: any) => {
  const { columns, data } = param
  const sums: any[] = []

  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }

    if (['purQty', 'totalPrice'].includes(column.property)) {
      const values = data.map((item: any) => Number(item[column.property]) || 0)
      sums[index] = values.reduce((prev: number, curr: number) => prev + curr, 0)
    } else {
      sums[index] = ''
    }
  })

  return sums
}

defineExpose({
  open,
})
</script>

<style scoped>
:deep(.el-table__footer-wrapper td) {
  text-align: center;
}
</style>
