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

    <el-table
      v-loading="loading"
      :data="currentRows"
      border
      size="mini"
    >
      <el-table-column label="来料登记ID" align="center" prop="wmsIncomingReceiptId" />
      <el-table-column
        label="选择仓库"
        align="center"
        width="160"
        prop="wmsStockName"
      >
        <template slot-scope="scope">
          <StockSelect
            :ref="`stock-${scope.$index}`"
            v-model="scope.row.wmsStockName"
            filterable
            @change="($event) => { stockChange($event, scope.$index,scope.row) }"
          />
        </template>
      </el-table-column>
      <el-table-column label="选择区域" align="center" prop="wmsStoreAreaName">
        <template slot-scope="scope">
          <AreaSelect
            :ref="`area-${scope.$index}`"
            v-model="scope.row.wmsStoreAreaName"
            filterable
            @change="($event) => { areaChange($event, scope.$index,scope.row) }"
          />
        </template>
      </el-table-column>
      <el-table-column label="选择货位" align="center" prop="wmsStockLocationName">
        <template slot-scope="scope">
          <LocationSelect
            :ref="`location-${scope.$index}`"
            v-model="scope.row.wmsStockLocationName"
            filterable
            @change="locationChange($event,scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="物料名称"
        align="center"
        width="150"
        prop="materialName"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料批次"
        align="center"
        width="150"
        prop="materialLots"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料编码"
        align="center"
        width="120"
        prop="materialNo"
      />
      <el-table-column
        label="存储条件"
        align="center"
        prop="storageEnvironment"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column label="合格数量" align="center" prop="qualifiedQty" />
      <el-table-column
        label="入库数量"
        align="center"
        prop="qualifiedQty"
      />

    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        :loading="ensureLoading"
        @click="handleSure"
      > 确认入库</el-button>
    </div>
  </el-dialog>
</template>

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

export default {
  name: 'WareHousingPlan',
  components: {
    StockSelect,
    AreaSelect,
    LocationSelect
  },
  props: {
    currentRows: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      ensureLoading: false,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false
    }
  },
  methods: {
    // 完成入库
    handleSure() {
      const isEmpty = this.currentRows.every(item => (item.erpStockId === undefined && item.wmsStoreAreaId === undefined && item.wmsStoreId === undefined))
      if (isEmpty === true) {
        this.$modal.msgWarning('仓库/区域/货位不能为空')
        return
      }
      const params = this.currentRows.map(item => {
        console.log(item)
        const {
          qualifiedQty: inQty,
          wmsIncomingReceiptId,
          wmsStockLocationId: wmsStoreId,
          wmsStoreAreaId,
          wmsStockId: erpStockId,
          materialLots,
          materialNo
        } = item
        return {
          inQty,
          wmsIncomingReceiptId,
          wmsStoreId,
          wmsStoreAreaId,
          erpStockId,
          materialLots,
          materialNo
        }
      })
      this.ensureLoading = true
      createBatchIncomingStock(params).then(res => {
        this.$modal.msgSuccess('入库成功')
        this.open = false
        this.ensureLoading = false

        this.$parent.getList()
      }).finally(() => {
        this.ensureLoading = false
      })
    },
    stockChange(item, index, row) {
      if (item) {
        const { id } = item
        row.wmsStoreAreaName = undefined
        row.wmsStockLocationName = undefined
        row.wmsStockId = id
        this.$refs[`area-${index}`].options = []
        this.$refs[`area-${index}`].fetchAreaList(id)
      }
    },
    areaChange(item, index, row) {
      if (item) {
        const { id } = item
        row.wmsStoreAreaId = id
        row.wmsStockLocationName = undefined
        this.$refs[`location-${index}`].options = []
        this.$refs[`location-${index}`].fetchLocationList(id)
      }
    },
    locationChange(item, row) {
      row.wmsStockLocationId = item.id
    }

  }
}
</script>

<style>

</style>
