<template>
  <el-dialog
    v-dialogDrag
    title="入库方案"
    :visible.sync="open"
    width="1200px"
    append-to-body
  >

    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="40px"
    >
      <SearchBar :show-more="false" :show-span="18">
        <template #header>
          <el-col :span="8">
            <el-form-item label="仓库" prop="stockCode">
              <StockSelect
                :ref="`stock1`"
                v-model="queryParams.stockCode"
                filterable
                @change="($event) => { stockChange($event) }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="区域" prop="areaCode">
              <AreaSelect
                :ref="`area1`"
                v-model="queryParams.areaCode"
                filterable
                @change="($event) => { areaChange($event) }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="货位" prop="locationCode">
              <LocationSelect :ref="`location1`" v-model="queryParams.locationCode" filterable />
            </el-form-item>
          </el-col>
        </template>
      </SearchBar>
    </el-form>

    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      border
    >
      <el-table-column label="产品条码" align="center" prop="productBarcode" />
      <el-table-column
        label="报废单号"
        align="center"
        prop="scrapNo"
      />
      <el-table-column
        label="物料名称"
        align="center"
        prop="productName"
      />
      <!-- <el-table-column
        label="选择仓库"
        align="center"
        width="200"
        prop="stockCode"
      >
        <template slot-scope="scope">
          <StockSelect
            :ref="`stock-${scope.$index}`"
            v-model="scope.row.stockCode"
            filterable
            @change="($event) => { stockChange($event, scope.$index) }"
          />
        </template>
      </el-table-column>
      <el-table-column label="选择区域" align="center" prop="areaCode">
        <template slot-scope="scope">
          <AreaSelect
            :ref="`area-${scope.$index}`"
            v-model="scope.row.areaCode"
            filterable
            @change="($event) => { areaChange($event, scope.$index) }"
          />
        </template>
      </el-table-column>
      <el-table-column label="选择货位" align="center" prop="locationCode">
        <template slot-scope="scope">
          <LocationSelect :ref="`location-${scope.$index}`" v-model="scope.row.locationCode" filterable />
        </template>
      </el-table-column> -->

    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button
        v-hasPermi="['wms:incoming-scrap-detail:create']"
        type="primary"
        :loading="ensureLoading"
        @click="handleSure"
      > 确认入库</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createBatchIncomingScrapStock } from '@/api/wms/incoming/scrap'
import StockSelect from '../../wareHousing/components/StockSelect.vue'
import AreaSelect from '../../wareHousing/components/AreaSelect.vue'
import LocationSelect from '../../wareHousing/components/LocationSelect.vue'

export default {
  name: 'ScrapStockPlan',
  components: {
    StockSelect,
    AreaSelect,
    LocationSelect
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      ensureLoading: false,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      showSearch: true,
      // list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        rejectNo: null,
        supplierCode: null,
        materialNo: null,
        receiveOrderNo: null,
        sendOrderNo: null,
        sendQty: null,
        rejectOrderNo: null,
        erpStockId: null,
        wmsStoreAreaId: null,
        wmsStoreId: null,
        inQty: null,
        scrapNo: null,
        scrapNos: null,
        createTime: []
      }
    }
  },
  methods: {
    // 完成入库
    handleSure() {
      if (this.list.length <= 0) {
        this.$modal.msgWarning('暂无入库数据，无法入库')
        return
      }
      const { stockCode, areaCode, locationCode } = this.queryParams
      if (stockCode === undefined || areaCode === undefined || locationCode === undefined) {
        this.$modal.msgWarning('仓库/区域/货位，不能为空,请先选择!')
        return
      }
      this.ensureLoading = true
      const finishList = this.list.map(item => {
        const { masterId, mesDetailId, productBarcode, scrapNo, workOrderId } = item
        return {
          masterId,
          mesDetailId,
          productBarcode,
          scrapNo,
          workOrderId
        }
      })
      const params = {
        list: finishList,
        stockCode: this.queryParams.stockCode,
        areaCode: this.queryParams.areaCode,
        locationCode: this.queryParams.locationCode
      }
      createBatchIncomingScrapStock(params).then(res => {
        this.$modal.msgSuccess('入库成功')
        this.open = false
        this.ensureLoading = false
        this.$emit('complete')
      }).finally(() => {
        this.ensureLoading = false
      })
    },
    // 仓库
    stockChange(item) {
      if (item) {
        const { id } = item
        this.$refs[`area1`].options = []
        this.$refs[`area1`].fetchAreaList(id)
      }
    },
    // 区域
    areaChange(item) {
      if (item) {
        const { id } = item
        this.$refs[`location1`].options = []
        this.$refs[`location1`].fetchLocationList(id)
      }
    }
  }
}
</script>

    <style>

    </style>

