<template>
  <div>
    <el-button type="primary" size="small" @click="drawer = true">新建装箱信息</el-button>
    <el-drawer
      title="新建装箱信息"
      :visible.sync="drawer"
      :with-header="false"
      append-to-body
      size="90%">
      <div class="drawer__panel">
        <p class="normal-title mt-10">
          装箱信息
        </p>
        <el-form style="width:500px" label-position="right" label-width="80px" :model="form" size="small">
          <el-form-item label="箱码">
            <el-input v-model="form.boxnum" placeholder="输入箱码"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" :autosize="{minRows:5,maxRows:10}" v-model="form.remarks" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <p class="normal-title mt-10">
          装箱明细
          <el-button size="mini" type="text" @click="showSelect(setcol === 12 ? setcol = 24 : setcol = 12)">{{setcol === 24?'添加产品':'关闭添加'}}</el-button>
        </p>
        <el-row :gutter="10">
          <el-col :span="setcol">
            <!-- 产品编码、产品名称、品号、型号、规格尺寸、装箱数量 -->
            <el-table
              :data="tableData"
              size="small"
              border>
              <el-table-column
                prop="itemno"
                label="产品编码"
                width="180">
              </el-table-column>
              <el-table-column
                prop="itemname"
                label="产品名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="model"
                label="型号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="spec"
                label="规格尺寸"
                width="180">
              </el-table-column>
              <el-table-column
                prop="qty"
                label="装箱数量"
                width="200">
                <template slot-scope="scope">
                  <el-input v-model.number="scope.row.qty" type="number" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="备注"
                min-width="250">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remarks" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="90">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="deleteRow(scope.row)">删 除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24 - setcol">
            <logisticsCanUseProduct ref="logislist" :sa_logistics_boxid="0" @onConfirm="onConfirm"></logisticsCanUseProduct>
          </el-col>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">保存修改</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import logisticsCanUseProduct from '@/template/logisticsCanUseProduct/index.vue'
export default {
  data () {
    return {
      drawer:false,
      form:{},
      setcol:24,
      tableData:[]
    }
  },
  components:{
    logisticsCanUseProduct
  },
  methods:{
    async onSubmit (){
      const res = await this.$api.requested({
        "id": "20230109155104",
        "content": {
            "sa_logisticsid":this.$route.query.id,
            "sa_logistics_boxid": 0,
            "boxnum": this.form.boxnum,
            "remarks":this.form.remarks,
            "sa_logistics_boxmx": this.tableData.map(e=>{
              return {
                "sa_logistics_boxmxid": 0,
                "sa_dispatch_itemsid": e.sa_dispatch_itemsid,
                "qty": e.qty,
                "remarks": e.remarks
              }
            })
        }
      })
      this.tool.showMessage(res,()=>{
        this.form = {}
        this.tableData = []
        this.setcol = 24
        this.$emit('onSuccess')
        this.drawer = false
      })
    },
    showSelect () {
      this.$refs['logislist'].listData()
    },
    onConfirm (val) {
      this.tableData = [...val,...this.tableData]
      const res = new Map();
      this.tableData = this.tableData.filter((item) => !res.has(item['itemno']) && res.set(item['itemno'], 1));
    },
    deleteRow (row) {
      this.tableData = this.tableData.filter(e=>{
        if (e.itemno !== row.itemno)
        return e
      })
      
    }
  }
}

</script>
<style>
</style>