<template>
  <div class="repair-container">
    <!-- 顶部搜索区 -->
    <el-card class="search-card" shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="维修单号">
          <el-input v-model="searchForm.repair_no" placeholder="请输入维修单号" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="SN序列号">
          <el-input v-model="searchForm.serial_number" placeholder="请输入序列号" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="searchForm.material_name" placeholder="请输入物料名称" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="维修状态">
          <el-select v-model="searchForm.repair_status" placeholder="请选择状态" clearable style="width: 150px">
            <el-option label="待检测" value="待检测" />
            <el-option label="维修中" value="维修中" />
            <el-option label="等待配件" value="等待配件" />
            <el-option label="已修复" value="已修复" />
            <el-option label="报废转出" value="报废转出" />
            <el-option label="已出库" value="已出库" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区 + 快捷状态过滤 -->
    <div class="action-bar">
      <el-button v-if="userStore.hasPermission('inbound_repair:add')" type="primary" :icon="Plus" @click="handleCreate">新增维修</el-button>
      <el-radio-group v-model="searchForm.repair_status" @change="handleSearch" class="status-filter-group">
        <el-radio-button value="未出库">未出库</el-radio-button>
        <el-radio-button value="全部">全部</el-radio-button>
        <el-radio-button value="待检测">待检测</el-radio-button>
        <el-radio-button value="维修中">维修中</el-radio-button>
        <el-radio-button value="等待配件">等待配件</el-radio-button>
        <el-radio-button value="已修复">已修复</el-radio-button>
        <el-radio-button value="报废转出">报废转出</el-radio-button>
        <el-radio-button value="已出库">已出库</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" v-loading="loading" border stripe style="width: 100%">
      <el-table-column prop="repair_no" label="维修单号" width="180" />
      <el-table-column prop="sku" label="全局SKU(系统条码)" width="140" />
      <el-table-column prop="material_name" label="物料名称" width="150" />
      <el-table-column prop="serial_number" label="序列号(SN)" width="150" />
      <el-table-column prop="customer_name" label="客户名称" width="120" />
      <el-table-column prop="customer_location" label="所在地" width="150" show-overflow-tooltip />
      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.repair_status)">{{ row.repair_status || '待检测' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="arrival_date" label="接收时间" width="120" />
      <el-table-column prop="fault_description" label="故障描述" min-width="150" show-overflow-tooltip />
      <el-table-column label="操作" width="280" fixed="right" align="center">
        <template #default="{ row }">
          <el-button v-if="userStore.hasPermission('inbound_repair:edit')" type="warning" link size="small" @click="handlePrint(row)">
            <el-icon><Printer /></el-icon> 打印
          </el-button>
          <el-button v-if="userStore.hasPermission('inbound_repair:edit')" type="primary" link size="small" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button v-if="userStore.hasPermission('inbound_repair:edit') && row.repair_status !== '已出库'" type="success" link size="small" @click="handleUpdateStatus(row)">
            更新状态
          </el-button>
          <el-button v-if="userStore.hasPermission('inbound_repair:delete')" type="danger" link size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 底部分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[20, 50, 100, 200]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="fetchData"
        @current-change="fetchData"
      />
    </div>

    <!-- 新增/编辑维修单弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="650px" destroy-on-close :close-on-click-modal="false">
      <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物料名称" prop="material_name">
              <el-input v-model="form.material_name" placeholder="请输入物料名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源类型" prop="source_table">
              <el-select v-model="form.source_table" placeholder="请选择来源类型" style="width: 100%">
                <el-option label="采购入库" value="stock_buy" />
                <el-option label="成品入库" value="stock_product" />
                <el-option label="半成品入库" value="stock_semi" />
                <el-option label="独立录入" value="independent" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="序列号SN" prop="serial_number">
              <el-input v-model="form.serial_number" placeholder="请输入或扫描序列号">
                <template #append>
                  <el-button :icon="Camera" @click="openScanner" title="智能扫码" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收时间" prop="arrival_date">
              <el-date-picker
                v-model="form.arrival_date"
                type="date"
                placeholder="选择接收时间"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customer_name">
              <el-input v-model="form.customer_name" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在地" prop="customer_location">
              <el-input v-model="form.customer_location" placeholder="请输入客户所在地" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="故障描述" prop="fault_description">
          <el-input v-model="form.fault_description" type="textarea" :rows="3" placeholder="请输入客户反馈的故障描述" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维修人" prop="repair_manager">
              <el-input v-model="form.repair_manager" placeholder="请输入维修人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本价" prop="cost_price">
              <el-input-number v-model="form.cost_price" :precision="2" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售价" prop="sale_price">
              <el-input-number v-model="form.sale_price" :precision="2" :min="0" :controls="false" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 更新维修状态弹窗 -->
    <el-dialog v-model="statusDialogVisible" title="更新维修状态" width="500px" destroy-on-close :close-on-click-modal="false">
      <el-form ref="statusFormRef" :model="statusForm" :rules="statusFormRules" label-width="100px">
        <el-form-item label="维修单号">
          <el-input :value="statusForm.repair_no" disabled />
        </el-form-item>
        <el-form-item label="当前状态">
          <el-tag :type="getStatusType(statusForm.repair_status)">{{ statusForm.repair_status }}</el-tag>
        </el-form-item>
        <el-form-item label="新状态" prop="status">
          <el-select v-model="statusForm.status" placeholder="请选择新状态" style="width: 100%">
            <el-option label="待检测" value="待检测" />
            <el-option label="维修中" value="维修中" />
            <el-option label="等待配件" value="等待配件" />
            <el-option label="已修复" value="已修复" />
          </el-select>
        </el-form-item>
        <el-form-item label="追加日志" prop="repair_log">
          <el-input v-model="statusForm.repair_log" type="textarea" :rows="4" placeholder="请输入维修日志或备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="statusDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="statusSubmitLoading" @click="handleStatusSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 智能扫码弹窗 -->
    <SmartScannerDialog v-model="scannerDialogVisible" @confirm="handleScannerConfirm" />

    <!-- 打印预览弹窗 -->
    <el-dialog v-model="printVisible" title="标签打印预览" width="400px" destroy-on-close append-to-body>
      <div v-loading="printLoading" class="preview-box">
        <img v-if="previewUrl" :src="previewUrl" alt="打印预览" style="width: 100%" />
      </div>
      <p>打印机 IP: 192.168.9.205</p>
      <div style="margin: 15px 0;">
        <span style="font-weight: bold; color: #303133;">打印份数:</span>
        <el-input-number v-model="printCopies" :min="1" :max="100" size="default" style="width: 120px; margin-left: 10px;" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="printVisible = false">取消</el-button>
          <el-button type="primary" :loading="printing" @click="confirmPrint">
            <el-icon><Printer /></el-icon>确认打印
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import dayjs from 'dayjs'
import { Plus, Search, Refresh, Printer, Camera, Edit } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { getRepairList, createRepair, updateRepair, updateRepairStatus, deleteRepair } from '@/api/inbound/repair'
import { getLabelPreview, executePrint } from '@/api/common/print'
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'

const userStore = useUserStore()

// 搜索表单
const searchForm = reactive({
  repair_no: '',
  serial_number: '',
  material_name: '',
  repair_status: '未出库'
})

// 表格数据
const tableData = ref<any[]>([])
const loading = ref(false)
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 弹窗标题
const dialogTitle = computed(() => form.id ? '编辑维修单' : '新增维修单')

// 新增/编辑弹窗
const dialogVisible = ref(false)
const submitLoading = ref(false)
const formRef = ref()
const form = reactive({
  id: undefined as number | undefined,
  material_name: '',
  serial_number: '',
  source_table: 'independent',
  arrival_date: '',
  fault_description: '',
  customer_name: '',
  customer_location: '',
  repair_manager: '',
  cost_price: undefined as number | undefined,
  sale_price: undefined as number | undefined
})

// 表单校验规则
const formRules = reactive({
  material_name: [{ required: true, message: '请输入物料名称', trigger: 'blur' }],
  serial_number: [{ required: true, message: '请输入序列号', trigger: 'blur' }],
  customer_name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
})

// 状态更新弹窗
const statusDialogVisible = ref(false)
const statusSubmitLoading = ref(false)
const statusFormRef = ref()
const statusForm = reactive({
  id: 0,
  repair_no: '',
  repair_status: '',
  status: '',
  repair_log: ''
})

const statusFormRules: ElFormRules = [
  { required: true, message: '请选择新状态', trigger: 'change', field: 'status' }
]

// 智能扫码
const scannerDialogVisible = ref(false)

const openScanner = () => {
  scannerDialogVisible.value = true
}

const handleScannerConfirm = (result: string) => {
  form.serial_number = result
  scannerDialogVisible.value = false
}

// 打印相关
const printVisible = ref(false)
const printLoading = ref(false)
const printing = ref(false)
const previewUrl = ref('')
const printCopies = ref(1)
const currentPrintData = ref<any>({})

// 状态颜色映射
const getStatusType = (status: string) => {
  const map: Record<string, string> = {
    '待检测': 'info',
    '维修中': 'warning',
    '等待配件': 'warning',
    '已修复': 'success',
    '报废转出': 'danger',
    '已出库': 'success'
  }
  return map[status] || 'info'
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      page_size: pagination.pageSize,
      ...searchForm
    }
    const res = await getRepairList(params)
    if (res.code === 200) {
      tableData.value = res.data.list || []
      pagination.total = res.data.total || 0
    }
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  fetchData()
}

// 重置
const handleReset = () => {
  searchForm.repair_no = ''
  searchForm.serial_number = ''
  searchForm.material_name = ''
  searchForm.repair_status = ''
  handleSearch()
}

// 获取默认时间
const getDefaultDate = () => {
  return dayjs().format('YYYY-MM-DD')
}

// 新增 - 打开弹窗
const handleCreate = () => {
  // 重置表单
  form.id = undefined
  form.material_name = ''
  form.serial_number = ''
  form.source_table = 'independent'
  form.arrival_date = getDefaultDate()
  form.fault_description = ''
  form.customer_name = ''
  form.customer_location = ''
  form.repair_manager = ''
  form.cost_price = undefined
  form.sale_price = undefined
  dialogVisible.value = true
}

// 编辑 - 打开弹窗
const handleEdit = (row: any) => {
  form.id = row.id
  form.material_name = row.material_name || ''
  form.serial_number = row.serial_number || ''
  form.source_table = row.source_table || 'independent'
  form.arrival_date = row.arrival_date || getDefaultDate()
  form.fault_description = row.fault_description || ''
  form.customer_name = row.customer_name || ''
  form.customer_location = row.customer_location || ''
  form.repair_manager = row.repair_manager || ''
  form.cost_price = row.cost_price ?? undefined
  form.sale_price = row.sale_price ?? undefined
  dialogVisible.value = true
}

// 提交新增/编辑
const handleSubmit = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
  } catch (error) {
    return // 校验不通过，直接阻断提交
  }

  submitLoading.value = true
  try {
    if (form.id) {
      // 编辑
      const res = await updateRepair(form.id, form)
      if (res.code === 200) {
        ElMessage.success('编辑成功')
        dialogVisible.value = false
        fetchData()
      } else {
        ElMessage.error(res.msg || '编辑失败')
      }
    } else {
      // 新增
      const res = await createRepair(form)
      if (res.code === 200) {
        ElMessage.success('新增成功')
        dialogVisible.value = false
        fetchData()
      } else {
        ElMessage.error(res.msg || '新增失败')
      }
    }
  } finally {
    submitLoading.value = false
  }
}

// 更新状态
const handleUpdateStatus = (row: any) => {
  statusForm.id = row.id
  statusForm.repair_no = row.repair_no
  statusForm.repair_status = row.repair_status || '待检测'
  statusForm.status = ''
  statusForm.repair_log = ''
  statusDialogVisible.value = true
}

// 提交状态更新
const handleStatusSubmit = async () => {
  if (!statusFormRef.value) return
  await statusFormRef.value.validate()
  
  statusSubmitLoading.value = true
  try {
    const res = await updateRepairStatus({
      id: statusForm.id,
      status: statusForm.status,
      repair_log: statusForm.repair_log
    })
    if (res.code === 200) {
      ElMessage.success('状态更新成功')
      statusDialogVisible.value = false
      fetchData()
    } else {
      ElMessage.error(res.msg || '更新失败')
    }
  } finally {
    statusSubmitLoading.value = false
  }
}

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm(`确定要删除维修单 ${row.repair_no} 吗？`, '警告', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    const res = await deleteRepair(row.id)
    if (res.code === 200) {
      ElMessage.success('删除成功')
      fetchData()
    } else {
      ElMessage.error(res.msg || '删除失败')
    }
  }).catch(() => {})
}

// 打印标签
const handlePrint = async (row: any) => {
  printVisible.value = true
  printLoading.value = true
  printCopies.value = 1
  
  currentPrintData.value = {
    sku: row.sku,
    material_name: row.material_name,
    serial_number: row.serial_number,
    repair_no: row.repair_no
  }
  
  try {
    const res: any = await getLabelPreview(currentPrintData.value)
    previewUrl.value = res.data
  } catch (e) {
    ElMessage.error('预览失败')
  } finally {
    printLoading.value = false
  }
}

// 确认打印
const confirmPrint = async () => {
  printing.value = true
  try {
    await executePrint({ ...currentPrintData.value, copies: printCopies.value })
    ElMessage.success(`打印指令已发送 (x${printCopies.value})`)
    printVisible.value = false
  } catch (e: any) {
    ElMessage.error(e.msg || '打印失败')
  } finally {
    printing.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.repair-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 16px;
}

.search-form {
  margin-bottom: 0;
}

.action-bar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-filter-group {
  margin-left: auto;
}

.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.preview-box {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  margin-bottom: 15px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>