<template>
  <div>
    <el-button type="primary" size="small" :disabled="tableData.length === 0" @click="onShow">明细变更</el-button>
    <el-dialog title="明细变更" append-to-body :visible.sync="dialogVisible" width="900px">
      <el-table
        class="normal-margin"
        :data="listData"
        style="width: 100%"
        border
        size="small">
        <el-table-column
          prop="itemname"
          label="产品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="itemno"
          label="产品编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="erpitemno"
          label="erp编号"
          width="180">
        </el-table-column>
        <el-table-column
            prop="model"
          label="型号"
          width="150">
          <template slot-scope="scope">
            <p><span>{{scope.row.model}}</span></p>
          </template>
        </el-table-column>
        <el-table-column
            prop="spec"
            label="规格"
            width="150">
          <template slot-scope="scope">
            <p><span>{{scope.row.spec}}</span></p>
          </template>
         
        </el-table-column>
         <el-table-column
          prop="qty"
          label="原数量"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.qty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deliedqty"
          label="已发数量"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.deliedqty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="undeliqty"
          label="未发数量"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.undeliqty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="newvalue"
          label="变更数量"
          width="180"
          fixed="right">
          <template slot-scope="scope">
            <el-input size="mini" @input="onInput(scope.row,scope.$index)"  v-model="scope.row.newvalue"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-form :model="form" label-position="top" size="small">
        <el-form-item label="变更备注" :label-width="formLabelWidth">
          <el-input v-model="form.remarks" type="textarea" :autosize="{minRows:5}" placeholder="输入变更备注" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  props:['data','tableData'],
  data () {
    return {
      formLabelWidth:'80px',
      listData:[],
      dialogVisible:false,
      form:{
        qty:''
      }
    }
  },
  methods:{
    onShow () {
      this.listData = this.tableData.map(e=>{
        e.newvalue = 0
        return e
      })
      this.dialogVisible = true
      
    },
    onInput(row,index) {
      this.$set(this.listData,index,row)
    },
    checkRowData () {
      let valid = true
      let arr = this.listData.filter((row,index)=>{
        if (row.newvalue > row.qty) {
          this.$message({
            message:row.itemname+"变更数量不能大于原数量",
            type:"error",
            offset:index * 60
          })
          return row
        } else if (row.newvalue  < row.deliedqty) {
          this.$message({
            message:row.itemname+"变更数量不能小于已发货数量",
            type:"error",
            offset:index * 60
          })
          return row
        }
      })
      if (arr.length > 0) {
        return false
      } else {
        return true
      }
    },
    async submit () {
      if (this.checkRowData()) {
        const res = await this.$api.requested({
          "id": 20221110145302,
          "content": {
            "sa_orderid":this.data.sa_orderid,//订单ID
            "type":"数量",//调整类型，目前只支持数量
            "remarks":this.data.remarks,
            "itemifnos":this.listData.map(e=>{
              return {
                sa_orderitemsid:e.sa_orderitemsid,
                itemid:e.itemid,
                newvalue:e.newvalue
              }
            })
          }
        })
        this.tool.showMessage(res,()=>{
          this.dialogVisible = false
          this.$emit('onSuccess')
        })
      }
    }
  }
}

</script>
<style>
</style>