<template>
  <el-dialog
    append-to-body
    :visible.sync="dialogVisible"
    destroy-on-close
    :show-close="false"
    fullscreen
    @close="close"
    @open="open"
  >
    <span slot="title" class="dialog-footer">
      <div class="crud-opts2">
        <span class="el-dialog__title2">出库手工分配</span>
        <span class="crud-opts-right2">
          <!--左侧插槽-->
          <slot name="left" />
          <el-button slot="left" type="info" @click="dialogVisible = false">关闭</el-button>
          <el-button slot="left" type="primary" @click="submit">保存</el-button>
        </span>
      </div>
    </span>
    <div class="crud-opts2">
      <span class="role-span">可分配库存</span>
      <div class="crud-opts-form">
        <el-form ref="form2" :inline="true" :model="queryrow" size="mini">
          <el-form-item label="待分配" prop="unassign_qty">
            <el-input-number
              v-model="queryrow.unassign_qty"
              :controls="false"
              :precision="3"
              :min="0"
              disabled
            />
          </el-form-item>
          <el-form-item label="已分配" prop="assign_qty">
            <el-input-number
              v-model="queryrow.assign_qty"
              :controls="false"
              :precision="3"
              :min="0"
              disabled
            />
          </el-form-item>
          <el-form-item label="库区" prop="sect_id">
            <el-cascader
              placeholder="请选择"
              :options="sects"
              :props="{ checkStrictly: true }"
              clearable
              @change="sectQueryChange"
            />
          </el-form-item>
          <el-form-item label="关键字" prop="remark">
            <el-input
              v-model="queryrow.remark"
              clearable
              style="width: 220px"
              size="mini"
              placeholder="货位编码"
              prefix-icon="el-icon-search"
              class="filter-item"
            />
          </el-form-item>
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="queryStruct">搜索</el-button>
        </el-form>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      :data="tableDtl"
      style="width: 100%;"
      max-height="400"
      border
      :highlight-current-row="true"
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column show-overflow-tooltip prop="sect_name" label="库区" align="center" />
      <el-table-column show-overflow-tooltip prop="struct_code" label="仓位" align="center" />
      <el-table-column show-overflow-tooltip prop="storagevehicle_code" label="箱号" align="center" />
      <el-table-column show-overflow-tooltip prop="material_name" label="物料名称" align="center" />
      <el-table-column show-overflow-tooltip prop="pcsn" label="子卷批次号" align="center" />
      <el-table-column show-overflow-tooltip prop="canuse_qty" label="可出重量" :formatter="crud.formatNum3" align="center" />
      <el-table-column show-overflow-tooltip prop="plan_qty" label="重量" :formatter="crud.formatNum3" width="160" align="center">
        <template scope="scope">
          <el-input-number v-show="!scope.row.edit" v-model="scope.row.plan_qty" :precision="3" :max="100000000" />
          <span v-show="scope.row.edit">{{ scope.row.plan_qty }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="qty_unit_name" label="单位" align="center" />
      <el-table-column align="center" label="操作" width="160" fixed="right">
        <template scope="scope">
          <el-button v-show="!scope.row.edit" type="primary" class="filter-item" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button v-show="scope.row.edit" type="success" class="filter-item" size="mini" icon="el-icon-check" @click="handleEdit(scope.$index, scope.row)">完成</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>

import CRUD, { header } from '@crud/crud'
import crudSectattr from '@/views/wms/basedata/st/sect/sectattr'
import checkoutbill from '@/views/wms/st/outbill/checkoutbill'
import crudUserStor from '@/views/wms/basedata/st/userStor/userStor'

export default {
  name: 'StructIvt',
  components: { },
  mixins: [header()],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    rowmst: {
      type: Object
    },
    openArray: {
      type: Array,
      default: () => { return [] }
    },
    storId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      queryrow: {},
      sects: [],
      tableDtl: []
    }
  },
  watch: {
    dialogShow: {
      handler(newValue, oldValue) {
        this.dialogVisible = newValue
      }
    },
    openArray: {
      handler(newValue, oldValue) {
        this.tableDtl = newValue
      }
    },
    rowmst: {
      handler(newValue, oldValue) {
        this.queryrow = newValue
      }
    }
  },
  methods: {
    open() {
      crudUserStor.getSect({ 'stor_id': this.storId }).then(res => {
        this.sects = res.content
      })
      this.query.source_bill_code = this.queryrow.source_bill_code
      this.query.material_id = this.queryrow.material_id
    },
    queryStruct() {
      this.queryrow.unassign_qty = parseFloat(this.queryrow.unassign_qty) + parseFloat(this.queryrow.assign_qty)
      this.queryrow.assign_qty = 0
      checkoutbill.getStructIvt(this.queryrow).then(res => {
        this.tableDtl = res
      })
    },
    sectQueryChange(val) {
      if (val.length === 1) {
        this.queryrow.stor_id = val[0]
        this.queryrow.sect_id = ''
      }
      if (val.length === 0) {
        this.queryrow.sect_id = ''
        this.queryrow.stor_id = ''
      }
      if (val.length === 2) {
        this.queryrow.stor_id = val[0]
        this.queryrow.sect_id = val[1]
      }
    },
    handleEdit(index, row) {
      // 判断是否可以关闭编辑状态
      if (row.edit === undefined) {
        this.$set(row, 'edit', false)
      }
      if (!row.edit) {
   /*     if (row.plan_qty > this.queryrow.unassign_qty) {
          this.crud.notify('出库重量不能超过未分配数', CRUD.NOTIFICATION_TYPE.INFO)
          return false
        }*/
        if (row.plan_qty > row.canuse_qty) {
          this.crud.notify('出库重量不能超过库存可出重量', CRUD.NOTIFICATION_TYPE.INFO)
          return false
        }
        if (row.plan_qty === 0) {
          this.crud.notify('出库重量为0不能保存', CRUD.NOTIFICATION_TYPE.INFO)
          return false
        }
      }
      row.edit = !row.edit
      if (row.edit) {
        this.queryrow.unassign_qty = parseFloat(this.queryrow.unassign_qty) - row.plan_qty
        this.queryrow.assign_qty = parseFloat(this.queryrow.assign_qty) + row.plan_qty
      } else {
        this.queryrow.unassign_qty = parseFloat(this.queryrow.unassign_qty) + row.plan_qty
        this.queryrow.assign_qty = parseFloat(this.queryrow.assign_qty) - row.plan_qty
      }
      this.tableDtl.splice(index, 1, row) // 通过splice 替换数据 触发视图更新
    },
    close() {
      this.$emit('update:dialogShow', false)
      this.$emit('StructIvtClosed')
    },
    submit() {
      if (parseFloat(this.queryrow.assign_qty) === 0) {
        this.crud.notify('请分配后再提交', CRUD.NOTIFICATION_TYPE.INFO)
        return false
      }
      if (parseFloat(this.queryrow.unassign_qty) === 0) {
        const rows = []
        this.tableDtl.forEach((item) => {
          if (item.edit) {
            rows.push(item)
          }
        })
        checkoutbill.manualDiv({ 'row': this.queryrow, 'rows': rows }).then(res => {
          this.$emit('update:dialogShow', false)
          this.$emit('StructIvtClosed')
        })
      } else {
        this.$confirm('未分配重量不为0,是否继续提交？')
          .then(_ => {
            const rows = []
            this.tableDtl.forEach((item) => {
              if (item.edit) {
                rows.push(item)
              }
            })
            checkoutbill.manualDiv({ 'row': this.queryrow, 'rows': rows }).then(res => {
              this.$emit('update:dialogShow', false)
              this.$emit('StructIvtClosed')
            })
          })
          .catch(_ => {

          })
      }
    }
  }
}
</script>
