<template>
  <div>
    <!-- 编码出库 -->
    <el-dialog title="编码出库" :visible.sync="openCode" width="1200px" append-to-body>
      <!-- <span style="margin-left: 32px">待出库数量：{{ outNum }}</span> -->

      <el-form :model="outQuery" ref="outQuery" size="small" :inline="true" label-width="100px">
        <el-form-item label="设备编码" prop="maCode">
          <el-input v-model="outQuery.maCode" maxlength="20" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleOutQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetOutQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" size="mini" @click="saveCodeOut">保存</el-button>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="outCodeList"
        height="500"
        @select="handleSelectionChange"
        @select-all="handleSelectAll"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
        <el-table-column label="物资名称" align="center" prop="materialName" :show-overflow-tooltip="true" />
        <el-table-column label="规格型号" align="center" prop="typeName" :show-overflow-tooltip="true" />
        <el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getDetailsByTypeId } from '@/api/materialsStation'

export default {
  data() {
    return {
      openCode: false,
      rowData: {},
      outNum: 0,
      parentIdTemp: undefined,
      outQuery: {
        // pageNum: 1,
        // pageSize: 10,
        maCode: '',
        typeId: '',
        // maStatus: 1,
        teamId: '',
        prodId: ''
      },
      outTotal: 0,
      outCodeList: [],
      selectedCodeList: []
    }
  },
  created() {},
  methods: {
    handleOpenCode(row) {
      console.log('🚀 ~ handleOpenCode ~ row:', row)
      this.rowData = row
      this.openCode = true
      this.parentIdTemp = row.parentId
      this.outNum = row.outNum
      this.outQuery.typeId = row.typeId
      this.outQuery.teamId = row.teamId
      this.outQuery.proId = row.proId
      this.outQuery.maCode = ''
      this.handleOutQuery()
    },
    handleSelectionChange(val) {
      console.log('🚀 ~ handleSelectionChange ~ val:', val)
      this.selectedCodeList = val
    },
    handleSelectAll(val) {
      console.log('🚀 ~ handleSelectAll ~ val:', val)
      this.selectedCodeList = val
    },
    handleOutQuery() {
      this.getCodeList()
    },

    resetOutQuery() {
      this.outQuery.maCode = ''
      this.handleOutQuery()
    },
    getCodeList() {
      getDetailsByTypeId(this.outQuery).then(res => {
        this.outCodeList = res.data
        if (this.rowData.maCodeList && this.rowData.maCodeList.length > 0) {
          this.$nextTick(() => {
            this.outCodeList.forEach(row => {
              const isSelected = this.rowData.maCodeList.some(item => item.maCode == row.maCode)
              console.log('🚀 ~ this.$nextTick ~ isSelected:', isSelected)
              if (isSelected) {
                this.$refs.multipleTable.toggleRowSelection(row, true)
              }
            })
          })
        }
      })
    },
    // saveCodeOut() {
    //   console.log('Selected codes:', this.outCodeList)
    //   this.$emit('selectOutCode', this.selectedCodeList)
    //   this.openCode = false
    // }
    saveCodeOut() {
      // 直接从 el-table 的引用中获取当前选中的行
      const selectedRows = this.$refs.multipleTable.selection;
      console.log('Selected codes:', selectedRows);

      // 发送选中的行列表
      this.$emit('selectOutCode', selectedRows);
      this.openCode = false;
    }
  }
}
</script>

<style lang="scss" scoped></style>
