<template>
  <div v-loading="syncLoading">
    <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
      <el-form-item label="母件编码">
        <el-input v-model.trim="queryParams.invCode" placeholder="请输入物料编码" />
      </el-form-item>
      <el-form-item label="子件编码">
        <el-input v-model.trim="queryParams.subInvCode" placeholder="请输入物料名称" />
      </el-form-item>
      <el-form-item>
        <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
        <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具区域 -->
    <el-row :gutter="15" class="mb10">
      <el-col :span="1.5">
        <el-col :span="1.5">
          <el-button class="tool-box" color="#626aef" icon="Download" @click="handleImport"> 导入
          </el-button>
          <el-button class="tool-box" color="#00aa00" icon="Upload" @click="handleDownload"> 导出 </el-button>
          <el-button type="danger" icon="delete" @click="handleBatchDelete"
            :disabled="ids.length === 0">批量删除</el-button>
        </el-col>
      </el-col>
    </el-row>

    <vxe-table border="inner" ref="tableRef" :column-config="{ resizable: true }" :expand-config="{
      lazy: true,
      loadMethod: loadContentMethod,
      iconOpen: 'vxe-icon-square-minus-fill',
      iconClose: 'vxe-icon-square-plus-fill'
    }" :data="dataList" @checkbox-change="handleSelectionChange" @checkbox-all="handleSelectAll">
      <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column type="expand" width="80">
        <template #content="{ row }">
          <vxe-table border size="mini" stripe :data="row.children" @checkbox-change="handleSelectionChange2"
            @checkbox-all="handleSelectAll2">
            <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="subInvCode" title="子件编码"></vxe-column>
            <vxe-column field="subInvName" title="子件名称"></vxe-column>
            <vxe-column field="iusequantity" title="使用数量"></vxe-column>
            <vxe-column field="bomVersion" title="bom版本"></vxe-column>
            <vxe-column field="iusequantity" title="操作">
              <template #default="{ row }">
                <el-button type="success" size="small" icon="edit" title="编辑" @click="handleSubEdit(row)"></el-button>
                <el-button type="danger" @click="handleSubDelete(row)" size="small" icon="delete" title="删除" />
              </template>
            </vxe-column>
          </vxe-table>
        </template>
      </vxe-column>
      <vxe-column field="invCode" title="母件编码"></vxe-column>
      <vxe-column field="invName" title="母件名称"></vxe-column>
      <vxe-column field="bomVersion" title="bom版本"></vxe-column>
      <vxe-column field="iusequantity" title="操作">
        <template #default="{ row }">
          <el-button type="success" size="small" icon="edit" title="编辑" @click="handleEdit(row)"></el-button>
          <el-button type="danger" size="small" icon="delete" title="删除" @click="handleDelete(row)"></el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </div>

  <!-- 主件编辑弹窗 -->
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body draggable
    :close-on-click-modal="false">
    <el-form ref="editFormRef" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="母件编码" prop="invCode">
        <el-input v-model="formData.invCode" placeholder="请输入母件编码" />
      </el-form-item>
      <el-form-item label="母件名称" prop="invName">
        <el-input v-model="formData.invName" placeholder="请输入母件名称" />
      </el-form-item>
      <el-form-item label="BOM版本" prop="bomVersion">
        <el-input v-model="formData.bomVersion" placeholder="请输入BOM版本" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">{{ $t('btn.cancel') }}</el-button>
      <el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
    </template>
  </el-dialog>

  <!-- 子件编辑弹窗 -->
  <el-dialog :title="subDialog.title" v-model="subDialog.visible" width="600px" append-to-body draggable
    :close-on-click-modal="false">
    <el-form ref="subEditFormRef" :model="subFormData" :rules="subRules" label-width="120px">
      <el-form-item label="子件编码" prop="subInvCode">
        <el-input v-model="subFormData.subInvCode" placeholder="请输入子件编码" />
      </el-form-item>
      <el-form-item label="子件名称" prop="subInvName">
        <el-input v-model="subFormData.subInvName" placeholder="请输入子件名称" />
      </el-form-item>
      <el-form-item label="使用数量" prop="iusequantity">
        <el-input-number v-model="subFormData.iusequantity" :min="0" :precision="2" placeholder="请输入使用数量" />
      </el-form-item>
      <el-form-item label="BOM版本" prop="bomVersion">
        <el-input v-model="subFormData.bomVersion" placeholder="请输入BOM版本" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancelSub">{{ $t('btn.cancel') }}</el-button>
      <el-button type="primary" @click="submitSubForm">{{ $t('btn.submit') }}</el-button>
    </template>
  </el-dialog>

  <!-- 导入对话框 -->
  <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body draggable
    :close-on-click-modal="false">
    <span v-if="show">数据正在导入中请稍等……</span>
    <el-upload name="file" ref="uploadRef" :limit="1" accept=".xlsx,.xls" :headers="upload.headers"
      :action="`${upload.url}`" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess" :on-error="handleFileError" :auto-upload="false" drag>
      <el-icon class="el-icon--upload">
        <upload-filled />
      </el-icon>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip text-center">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate">下载模板</el-link>
        </div>
      </template>
    </el-upload>
    <template #footer>
      <el-button @click="upload.open = false">{{ $t('btn.cancel') }}</el-button>
      <el-button type="primary" @click="submitFileForm">{{ $t('btn.submit') }}</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="BaseMaterialBOM">
import { listBaseMaterialBom, GetMonterInvList, GetSonInvList, updateBaseMaterialBom } from '@/api/baseManagement/basematerialBOM.js'
import { addBaseMaterialBom, updateBaseMaterialBom as updateMainBom } from '@/api/baseManagement/basematerialBOM.js'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const userName = userStore.userName
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)

// 弹窗相关数据
const dialog = reactive({
  title: '',
  visible: false,
  isEdit: false
})

const subDialog = reactive({
  title: '',
  visible: false,
  isEdit: false
})

const formData = ref({})
const subFormData = ref({})

const editFormRef = ref()
const subEditFormRef = ref()

const queryParams = reactive({
  invCode: '',
  subInvCode: '',
  pageNum: 1,
  pageSize: 10,
  sort: 'createdTime',
  sortType: 'desc'
})

const total = ref(0)
const dataList = ref([])
const tableRef = ref() // 添加表格引用
const queryRef = ref()

// 主件表单验证规则
const rules = {
  invCode: [
    { required: true, message: '母件编码不能为空', trigger: 'blur' }
  ],
  invName: [
    { required: true, message: '母件名称不能为空', trigger: 'blur' }
  ],
  bomVersion: [
    { required: true, message: 'BOM版本不能为空', trigger: 'blur' }
  ]
}

// 子件表单验证规则
const subRules = {
  subInvCode: [
    { required: true, message: '子件编码不能为空', trigger: 'blur' }
  ],
  subInvName: [
    { required: true, message: '子件名称不能为空', trigger: 'blur' }
  ],
  iusequantity: [
    { required: true, message: '使用数量不能为空', trigger: 'blur' },
    { type: 'number', message: '使用数量必须为数字值', trigger: 'blur' }
  ],
  bomVersion: [
    { required: true, message: 'BOM版本不能为空', trigger: 'blur' }
  ]
}

// 初始化表单数据
function resetForm() {
  formData.value = {
    id: undefined,
    invCode: '',
    invName: '',
    bomVersion: '',
    createdBy: userName,
    updatedBy: userName
  }
  editFormRef.value?.clearValidate()
}

function resetSubForm() {
  subFormData.value = {
    id: undefined,
    subInvCode: '',
    subInvName: '',
    iusequantity: 0,
    bomVersion: ''
  }
  subEditFormRef.value?.clearValidate()
}

// 获取数据列表
function getList() {
  loading.value = true
  GetMonterInvList(queryParams).then((res) => {
    const { code, data } = res
    if (code == 200) {
      dataList.value = data.result
      total.value = data.totalNum
      loading.value = false
    }
  })
}

// 获取选中的行数据
function getSelectedRows() {
  if (tableRef.value) {
    const selectedRows = tableRef.value.getCheckboxRecords()
    console.log('选中的行数据:', selectedRows)
    return selectedRows
  }
  return []
}

// 处理单个复选框选中状态变化
function handleSelectionChange() {
  const selectedRows = tableRef.value.getCheckboxRecords()
  ids.value = selectedRows.map(row => row.id) // 假设有id字段
  console.log('当前选中项ID:', ids.value)
}

// 处理全选/取消全选
function handleSelectAll({ records }) {
  ids.value = records.map(row => row.id) // 假设有id字段
  console.log('全选/取消全选后ID:', ids.value)
}

// 编辑主件
function handleEdit(row) {
  resetForm()
  const { id, invCode, invName, bomVersion } = row
  formData.value = { id, invCode, invName, bomVersion }
  dialog.title = '修改主件信息'
  dialog.visible = true
  dialog.isEdit = true
}

// 编辑子件
function handleSubEdit(row) {
  resetSubForm()
  const { id, subInvCode, subInvName, iusequantity, bomVersion } = row
  subFormData.value = { id, subInvCode, subInvName, iusequantity, bomVersion }
  subDialog.title = '修改子件信息'
  subDialog.visible = true
  subDialog.isEdit = true
}

// 提交主件表单
function submitForm() {
  editFormRef.value.validate(valid => {
    if (valid) {
      if (dialog.isEdit) {
        // 更新现有记录
        updateBaseMaterialBom(formData.value).then(res => {
          if (res.code === 200) {
            proxy.$modal.msgSuccess('修改成功')
            dialog.visible = false
            resetForm()
            getList()
          }
        })
      } else {
        // 添加新记录
        addBaseMaterialBom(formData.value).then(res => {
          if (res.code === 200) {
            proxy.$modal.msgSuccess('新增成功')
            dialog.visible = false
            resetForm()
            getList()
          }
        })
      }
    }
  })
}

// 提交子件表单
function submitSubForm() {
  subEditFormRef.value.validate(valid => {
    if (valid) {
      if (subDialog.isEdit) {
        // 更新现有记录
        updateBaseMaterialBom(subFormData.value).then(res => {
          if (res.code === 200) {
            proxy.$modal.msgSuccess('修改成功')
            subDialog.visible = false
            resetSubForm()
            // 刷新父级数据
            getList()
          }
        })
      } else {
        // 添加新记录
        // 注意：这里可能需要不同的API接口，根据实际业务调整
        addBaseMaterialBom(subFormData.value).then(res => {
          if (res.code === 200) {
            proxy.$modal.msgSuccess('新增成功')
            subDialog.visible = false
            resetSubForm()
            getList()
          }
        })
      }
    }
  })
}

// 取消主件编辑
function cancel() {
  dialog.visible = false
  resetForm()
}

// 取消子件编辑
function cancelSub() {
  subDialog.visible = false
  resetSubForm()
}

// 删除子件
function handleSubDelete(row) {
  proxy.$modal.confirm('确认删除该子件数据?')
    .then(() => {
      // 实现删除逻辑
      console.log('删除子件数据:', row.id)
      // 示例API调用
      // return deleteById(row.id)
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
}



// 删除单行
function handleDelete(row) {
  proxy.$modal.confirm('确认删除该条数据?')
    .then(() => {
      // 实现删除逻辑
      console.log('删除行数据:', row.id)
      // 示例API调用
      // return deleteById(row.id)
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
}

// 子数据懒加载
function loadContentMethod({ row }) {
  return new Promise((resolve) => {
    GetSonInvList({ invCode: row.invCode }).then((res) => {
      if (res.code === 200) {
        row.children = res.data
        resolve()
      }
    })
  })
}

function getToken() {
  return localStorage.getItem('token') || '';
}

// 导入参数 
const upload = reactive({
  open: false,
  title: '',
  // isUploading: false,
  updateSupport: 0,
  uploadType: 1,
  headers: { Authorization: 'Bearer ' + getToken() },
  url: import.meta.env.VITE_APP_BASE_API + '/MasterDataManagement/Material/MaterialBom/importData'
})

function handleImport(type) {
  upload.title = '导入'
  upload.open = true
}

//导出
function handleDownload() {
  proxy
    .$confirm('是否确定要导出数据吗?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      await proxy.downFile('/MasterDataManagement/Material/MaterialBom/exportData', { ...queryParams })
    })
}

function submitFileForm() {
  proxy.$refs['uploadRef'].submit()
}

//下砸模版
function importTemplate() {
  proxy.download('/MasterDataManagement/Material/MaterialBom/importTemplate', '物料类别导入模板')
}

/** 文件上传异常处理 */
const handleFileError = (error, file, fileList) => {
  // 修复：使用正确的响应对象
  if (error) {
    proxy.$message.error('模板导入异常!')
    return
  }
}

const show = ref(false)
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true,
    show.value = true
}

const dialogVisibleActualAssembly = ref(false)

/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {

  const { code, msg, data } = response
  if (code === 500) {
    proxy.$message.error('模板存在异常!')
    upload.isUploading = false
    proxy.$refs['uploadRef'].clearFiles()
    return
  }
  if (data === -1) {
    proxy.$message.error('模板不匹配!')
    upload.isUploading = false
    proxy.$refs['uploadRef'].clearFiles()
    return
  }

  upload.open = false
  getList()
  show.value = false
  upload.isUploading = false
  proxy.$refs['uploadRef'].clearFiles()
  dialogVisibleActualAssembly.value = true
}

// 查询
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

// 重置查询操作
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

// 自定义排序
function sortChange(column) {
  var sort = undefined
  var sortType = undefined

  if (column.prop != null && column.order != null) {
    sort = column.prop
    sortType = column.order
  }
  queryParams.sort = sort
  queryParams.sortType = sortType
  handleQuery()
}

/// ======================= 数据同步 =============================
import { SynchERPBOM } from '@/api/erp/baseInteractERP.js'
const throttle = ref(false)
const syncLoading = ref(false)

function handleSync() {
  syncLoading.value = true
  throttle.value = true
  setTimeout(() => {
    throttle.value = false
  }, 1000 * 60)
  SynchERPBOM().then((res) => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('同步成功')
      handleQuery()
      syncLoading.value = false
    } else {
      proxy.$message.error('同步失败')
    }
  })
}
/// =================================================================

handleQuery()
</script>