<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top" :model="searchData">
      <el-form-item label="Customer">
        <el-input v-model="searchData.customer" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="Buyer">
        <el-input v-model="searchData.buyer" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="PO No">
        <el-input v-model="searchData.poNo" clearable style="width: 140px"></el-input>
      </el-form-item>
      <el-form-item label="SKU">
        <el-input v-model="searchData.sku" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="Status">
         <el-select v-model="searchData.status" placeholder="请选择" style="width:100px" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option label="已下达" value="已下达"></el-option>
              <el-option label="已取消" value="已取消"></el-option>
            
        </el-select>
      </el-form-item>

    </el-form>
    <el-form :inline="true" label-position="top" style="margin-top:10px ">
      <el-form-item>
      <el-button type="primary" @click="getDataList()" v-if="!editMode">查询</el-button>
      <el-button type="primary" style="margin-left: 2px" @click="toggleEditMode">
        {{ editMode ? '确定' : '编辑' }}
      </el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="poTable"
      :height="height"
      :data="masterRows"
      border
      highlight-current-row
      style="width: 100%;"
      @current-change="onTableCurrentChange">
      <el-table-column
        v-for="(item, index) in visibleColumns"
        :key="item.serialNumber || index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip && (!editMode || !item.editAble)"
        :align="item.align"
        :fixed="item.fixed === '' ? false : item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
         <template v-if="editMode && item.editAble && item.columnProp==='supplierName'">
            <el-select
              v-model="rowSupplierNo[scope.row.id]" 
              size="mini"
              style="width: 100%"
              clearable
              filterable
              placeholder="请选择供应商"
              @change="(val) => handleSupplierChange(scope.row, val)">
              <el-option
                v-for="opt in supplierOptions"
                :key="String(opt.value)"
                :label="opt.label"
                :value="opt.value">
              </el-option>
            </el-select>
          </template>
          <template v-else-if="editMode && item.editAble && item.columnProp==='partNo'">
             <el-select
              v-model="rowPartNo[scope.row.id]"
              size="mini"
              style="width: 100%"
              clearable
              filterable
              placeholder="请选择物料"
              @change="(val) => handlePartNoChange(scope.row, val)"> 
              <el-option
                v-for="opt in poPartNoOptions"
                :key="String(opt.value)"
                :label="opt.label"
                :value="opt.value">
              </el-option>
            </el-select>
          </template>
          <template v-else-if="editMode && item.editAble">
             <!-- 下拉框 -->
            <el-select
              v-if="item.editType === 'select'"
              v-model="scope.row[item.columnProp]"
              size="mini"
              style="width: 100%"
              clearable
              @change="onCellChange(scope.row)">
              <el-option
                v-for="opt in getSelectOptionsForColumn(item)"
                :key="String(opt.value)"
                :label="opt.label"
                :value="opt.value">
              </el-option>
            </el-select>
            <!-- 数字输入框 -->
            <el-input
              v-else-if="item.editType === 'num'"
              v-model="scope.row[item.columnProp]"
              type="number"
              size="mini"
              @change="onCellChange(scope.row)">
            </el-input>
              <!-- 时间控件 -->  
              <el-date-picker
                v-else-if="item.editType === 'date'"
                v-model="scope.row[item.columnProp]"
                type="date"
                size="mini"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="onCellChange(scope.row)">
              </el-date-picker>  
              <el-date-picker
                v-else-if="item.editType === 'datetime'"
                v-model="scope.row[item.columnProp]"
                type="datetime"
                size="mini"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                @change="onCellChange(scope.row)">
              </el-date-picker>
             <!-- 普通文本输入框 -->
            <el-input
              v-else
              v-model="scope.row[item.columnProp]"
              size="mini"
              @change="onCellChange(scope.row)">
            </el-input>
     
          </template>
          <span v-else>{{ scope.row[item.columnProp] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200, 500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import { searchPoDetailPage, batchUpdatePoDetail } from '@/api/order/poOrder.js'
import { getPartList } from '@/api/part/partInfo.js'
import { checkSrmSupplierList } from '@/api/srm/srmSupplier.js'

export default {
  name: 'PoOrder',
  data () {
    return {
      masterRows: [],
      /**
       * 需要单独写编辑 UI 的 columnProp 填在这里，才会走模板里「自定义」分支；不在此数组的仍用默认 select/num/text - rqrq
       * 示例：['mPlanner', 'comments']
       */
      rowPartNo: {}, //存储每行选中的物料编号
      rowSupplierNo: {},  //存储每行选中的供应商编号
      poPartNoOptions: [],
      supplierOptions: [],
      customEditColumnProps: [],

      currentRow: null,
      // 各列下拉：select 列通过 selectOptionsKey 指向此处；也可在列定义里写 selectOptions 数组 - rqrq
      columnSelectOptions: {
        poStatusOptions: [
          { label: '已下达', value: '已下达' },
          { label: '已取消', value: '已取消' }
        ],
        poPartNoOptions: [],
        transportOptions: [
          { label: '海运 SEA', value: 'SEA' },
          { label: '空运 AIR', value: 'AIR' },
          { label: '陆运 ROAD', value: 'ROAD' }
        ],
        yesNoOptions: [
          { label: 'Y', value: 'Y' },
          { label: 'N', value: 'N' }
        ]
      },
      searchData: {
        site: this.$store.state.user.site,
        customer: '',
        buyer: '',
        poNo: '',
        sku: '',
        status: ''
      },
      height: 200,
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dataList: [],
      editMode: false,
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Customer',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'customer',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Customer',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: false,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Buyer',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'buyer',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Buyer',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: false,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1VendorName',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'supplierName',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Vendor Name',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'select',
          selectOptionsKey: 'supplierOptions', 
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1VShortOffice',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'shortOffice',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'V_Short_Office',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 110,
          showOverflowTooltip: true,
          editAble: false,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1VShortNpc',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'shortNpc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'V_Short_NPC',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: false,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1PoNo',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'poNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'PO_No',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Item',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'item',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Item',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 70,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
          {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1PartNo',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'partNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Part_No',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'select',
          selectOptionsKey: 'poPartNoOptions',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Category',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'category',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Category',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: false,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Sku',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'sku',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'SKU',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: false,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1UnitPrice',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'price',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Unit_Price',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'num',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1PQty',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'qty',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'P_Qty',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'num',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1PValue',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'value',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'P_Value',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1AQty',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'shipQty',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'A_Qty',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1AValue',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'sumPrice',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'A_Value',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1PDeparture',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'departure',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'P_Departure',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1PDestination',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'destination',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'P_Destination',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 110,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1SMethod',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'shipVia',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'S_Method',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'select',
          selectOptionsKey: 'transportOptions',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DIssue',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'orderDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_Issue',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DEnquiry',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'enquiry',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_Enquiry',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Status',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'status',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Status',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'select',
          selectOptionsKey: 'poStatusOptions',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DConfirmed',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'confirmed',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_Confirmed',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DNeed',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'wantReceiveDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_Need',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DNarrival',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'narrival',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_Narrival',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DCrd',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'crd',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_CRD',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DInspection',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'inspection',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_Inspection',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1ACrd',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'crd',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'A_CRD',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Eta',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'eta',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'ETA',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Flexid',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'flexid',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'FLEXID',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1AObd',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'obd',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'A_OBD',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DocSent',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'docSent',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Doc_Sent',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'select',
          selectOptionsKey: 'yesNoOptions',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1TelexRelease',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'telexRelease',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Telex_Release',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'select',
          selectOptionsKey: 'yesNoOptions',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1AdvancePayment',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'advancePayment',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Advance_Payment',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1AdvancePaid',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'advancePaid',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Advance_Paid',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'select',
          selectOptionsKey: 'yesNoOptions',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DCreate',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'createTime',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_Create',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1MPlanner',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'planner',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'M_Planner',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1DEdit',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'edit',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'D_Edit',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'date',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1EPlanner',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'endPlanner',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'E_Planner',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1RemarkDelay',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'remarkDelay',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Remark_Delay',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 110,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        },
        {
          userId: this.$store.state.user.name,
          functionId: 812003,
          serialNumber: '812003Table1Comments',
          tableId: '812003Table1',
          tableName: 'PO Order',
          columnProp: 'remark',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Comments',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
          showOverflowTooltip: true,
          editAble: true,
          editType: 'text',
          selectOptionsKey: '',
          selectOptions: null
        }
      ]
    }
  },
  computed: {
    visibleColumns () {
      return this.columnList.filter(c => !c.columnHidden)
    }
  },
  created () {
    this.getDataList()
   
    
  },
  mounted () {
    this.$nextTick(() => {
      this.height = window.innerHeight - 180
    })
  },
  methods: {
    /**
     * 表格当前行变化：将选中行深拷贝到 currentRow；取消选中时为 null - rqrq
     */
    onTableCurrentChange (row) {
      if (!row) {
        this.currentRow = null
        return
      }
        this.currentRow = row
    },

    /**
     * 解析列对应的下拉选项：优先列上 selectOptions，其次 columnSelectOptions[selectOptionsKey]
     */
    getSelectOptionsForColumn (item) {
      if (item.selectOptions && item.selectOptions.length) {
        return item.selectOptions
      }
      const key = item.selectOptionsKey
      if (key && this.columnSelectOptions[key]) {
        return this.columnSelectOptions[key]
      }
      return []
    },
   
    getDataList() {
      this.loading = true
      const params = {
        ...this.searchData,
        page: this.pageIndex,
        limit: this.pageSize
      }
      searchPoDetailPage(params).then(({ data }) => {
        if (data.code === 0) {
          this.dataList = data.page.list
          // 将 dataList 深拷贝到 masterRows，并为每行添加 changeFlag
            this.masterRows = this.dataList.map(row => ({
            ...row,
            changeFlag: 0  // 初始化变更标记
          }))
          this.initRowEditValues()
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount
        } else {
          this.$message.error((data && data.msg) || '获取列表失败')
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.$message.error('请求失败')
      })
    },
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    onCellChange (row) {
      this.$set(row, 'changeFlag', 1)
    },

    handleSupplierChange(row, supplierNo) {
      console.log('供应商变更:', supplierNo, '行ID:', row.id)
      
      const selectedOption = this.supplierOptions.find(opt => opt.value === supplierNo)
      
      if (selectedOption) {
        this.$set(row, 'supplierName', selectedOption.label)
        this.$set(row, 'supplierNo', selectedOption.value)
        this.$set(row, 'shortOffice', selectedOption.shortOffice || '')
        this.$set(row, 'shortNpc', selectedOption.shortNpc || '')
        this.$set(row, 'changeFlag', 1)
      } else if (!supplierNo) {
        this.$set(row, 'supplierName', '')
        this.$set(row, 'supplierNo', '')
        this.$set(row, 'shortOffice', '')
        this.$set(row, 'shortNpc', '')
        this.$set(row, 'changeFlag', 1)
        this.$set(this.rowSupplierNo, row.id, '')
      }
   },

   handlePartNoChange(row, partNo) {
      console.log('物料变更:', partNo, '行ID:', row.id)
      
      // 根据 partNo 找到对应的物料信息
      const selectedOption = this.poPartNoOptions.find(opt => opt.value === partNo)
  
      if (selectedOption) {
        // 更新物料相关信息
        this.$set(row, 'partNo', selectedOption.label)      
        //同时更新 category 和 sku
        this.$set(row, 'category', selectedOption.category || '')
        this.$set(row, 'sku', selectedOption.sku || '')        
        this.$set(row, 'changeFlag', 1)       
      } else if (!partNo) {
        // 清空选择
        this.$set(row, 'partNo', '')
        this.$set(row, 'category', '') 
        this.$set(row, 'sku', '')       
        this.$set(row, 'changeFlag', 1)    
        // 清除存储的物料编号
        this.$set(this.rowPartNo, row.id, '')
      }
    },
    
    toggleEditMode () {
      if (!this.editMode) {
        this.editMode = true
        this.initRowEditValues()
        this.getSupplierOptions()
        this.getPartNoOptions()
        return
      }
      const changed = this.masterRows.filter(r => r.changeFlag === 1)
    
      this.batchUpdatePoOrder(changed)
    
    },
    initRowEditValues () {
      this.rowSupplierNo = {}
      this.rowPartNo = {}
      this.masterRows.forEach(row => {
        if (row && row.id != null) {
          this.$set(this.rowSupplierNo, row.id, row.supplierNo || '')
          this.$set(this.rowPartNo, row.id, row.partNo || '')
        }
      })
    },
     getPartNoOptions() {
      console.log('获取分类选项')
        getPartList(
          {
            site: this.$store.state.user.site
          }
        ).then(({data}) => {
          if (data && data.code === 0) {
              console.log('接口返回的rows:', data.rows)  // 查看返回数据
            this.poPartNoOptions = (data.rows || []).map(item => ({
              label: item.partNo,
              value: item.partNo,
              partNo: item.partNo,
              category: item.category,  
              sku: item.sku  
            }))
       
          
          } else {
            this.$message.error(data.msg || '操作失败')
          }
        }).catch(error => {
          this.$message.error('操作失败: ' + error.message)
        })
     
    },
    getSupplierOptions(){
      console.log('获取供应商选项')
      checkSrmSupplierList(
        {
          site: this.$store.state.user.site
        }
      ).then(({data}) => {
        if (data && data.code === 0) {
           console.log('接口返回的rows:', data.rows)  // 查看返回数据
      
        this.supplierOptions = (data.rows || []).map(item => ({
          label: item.supplierName,
          value: item.supplierNo,
          supplierNo: item.supplierNo,
          supplierName: item.supplierName,
          shortOffice: item.cshortOffice,
          shortNpc: item.cshortNpc    
        }))
       
        } else {
          this.$message.error(data.msg || '操作失败')
        }
      }).catch(error => {
        this.$message.error('操作失败: ' + error.message)
      })
    },
      // 保存订单信息
    batchUpdatePoOrder(changed) {

      // 构建批量修改的数据
      const updateData = changed.map(row => ({
        id: row.id,
        ...row
      }))
      
      // 调用批量修改接口
      batchUpdatePoDetail(updateData)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: `已提交 ${updateData.length} 行变更`,
              type: 'success',
              duration: 2000
            })
            changed.forEach(r => {
              this.$set(r, 'changeFlag', 0)
            })
    
            this.editMode = false
            this.getDataList()
          } else {
             this.$message.error(data.msg || '操作失败')
          }
        })
        .catch(error => {
          this.$message.error('操作失败: ' + error.message)
        })
    }
  
  }
}
</script>

<style scoped lang="scss">
.el-table /deep/ .cell {
  height: auto;
  line-height: 1.5;
}
</style>
