<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="setcol">
        <div class="flex-align-center">
          <el-button style="margin:0 0 10px 10px" size="small" type="primary" :disabled="data.STATUS !== '新建'" v-if="type !== 'confirmdate'" @click="drawer = true">{{setcol === 24?'添 加':'取 消'}}</el-button>
        </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      height="500px"
      style="width: 100%;"
      size="small"
      stripe
      border>
      <!-- <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column> -->
      <el-table-column
        prop="rowno"
        label="发货单行号"
      fixed>
      </el-table-column>
      <el-table-column
        prop="orderRowno"
        width="100px"
        label="订单行号"
      fixed>
      </el-table-column>
      <el-table-column
        prop="itemno"
        fixed
        label="产品编码">
      </el-table-column>
       <el-table-column
        prop="erpitemno"
        label="erp编码">
      </el-table-column>
      <el-table-column
        prop="itemname"
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="erpitemno"
        label="品号">
      </el-table-column>
      <el-table-column
          prop="model"
          label="型号">
      </el-table-column>
      <el-table-column
          prop="spec"
          label="规格">
      </el-table-column>
      <el-table-column
        prop="unitname"
        label="单位">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价">
        <template slot-scope="scope">
          {{tool.formatAmount(scope.row.price,2)}}
        </template>
      </el-table-column>
<!--      <el-table-column
        prop="qty"
        label="发货数量">
      </el-table-column>-->
      <el-table-column
          prop="qty"
          label="数量"
          width="180">
        <template slot-scope="scope">
          <el-input-number :controls="true" controls-position='right' :step-strictly="true" v-if="data.STATUS === '新建'" size="mini" v-model="scope.row.qty" :min="1" :max="scope.row.undeliqty" label="输入数量" @change="rowChange(scope.row,scope.$index)"></el-input-number>
          <span v-else>{{scope.row.qty}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="amount"
        label="发货金额">
      </el-table-column>
      <el-table-column
        prop="undeliqty"
        label="未发货数量"
        width="100px">
      </el-table-column>
      <el-table-column
          label="备注"
          width="300"
          prop="remarks">
        <template slot-scope="scope">
          <el-input v-if="data.STATUS === '新建'" v-model="scope.row.remarks" placeholder="输入订单备注" size="mini" @change="rowChange(scope.row,scope.$index)"></el-input>
          <p v-else>{{scope.row.remarks}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="suminqty"
        width="120px"
        label="erp即时库存">
      </el-table-column>
      <el-table-column
        prop="deliedqty"
        width="120px"
        label="drp可发货数量">
      </el-table-column>
      <el-table-column label="操作"  width="90">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="deleteOrderProduct(scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:16px;text-align:right">
      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="param.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
      </el-col>
      <el-col :span="24 - setcol">
        <el-drawer
            title="添加商品"
            :visible.sync="drawer"
            append-to-body
            size="80%"
            direction="rtl">
          <div class="drawer__panel">
            <addProduct :drawer="drawer" :data="data" @onConfirm="onConfirm"></addProduct>
          </div>
        </el-drawer>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import addProduct from '@/template/invoiceCanUseProduct/index.vue'
export default {
  props:['type','data'],
  components:{addProduct},
  data () {
    return {
      tableData:[],
      drawer:false,
      setcol:24,
      param:{
        "id": 20221115104703,
        "content": {
          "sa_orderid": 0,
          "pageNumber": 1,
          "pageSize": 100,
          "where": {
              "condition": ""
          }
        },
      },
      total:0,
      currentPage:0,
      time: null
    }
  },
  methods:{
    async listData () {
      this.param.content.sa_dispatchid = this.$route.query.id
      const res = await this.$api.requested(this.param)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      console.log(res.data);
      
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
    async deleteOrderProduct (row) {
      const res = await this.$api.requested({
        "id": 20221115104803,
        "content": {
          "sa_dispatch_itemsids": [row.sa_dispatch_itemsid]
        },
      })
      this.tool.showMessage(res,()=>{
        this.listData()
        this.$emit('onSuccess')
      })
    },
    async updateOrderProduct (val) {
      const res  = await this.$api.requested({
        "id": 20221110145302,
        "content": val
      })
    },
    qtyChange (val,index) {
      let that = this
      this.$set(this.tableData,index,val)
      // console.log(val,this.tableData)
      // // 防抖
      if(this.time !== null){
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        that.updateOrderProduct({
          "sa_orderitemsid":val.sa_orderitemsid,
          "sa_orderid":this.$route.query.id,//订单ID
          "itemid":val.itemid,//商品ID
          "type":"数量",//调整类型，目前只支持数量
          "oldvalue":val.qty,//原值
          "newvalue":val.qty,//调整后值
          "remarks":val.remarks
        })
      },500)
    },
    // 订单添加商品
    async onConfirm (data) {
      console.log(data,'添加商品')
      const res = await this.$api.requested({
        "id": 20221115104603,
        "content": {
          "sa_dispatchid": this.$route.query.id, //订单ID
          "iteminfos":data.map(e=>{
            e.sa_dispatch_itemsid = 0
            e.qty=e.undeliqty
            e.remarks = e.remarks
            return e
          })
        },
      })
      this.tool.showMessage(res,()=>{
        this.drawer = false
        this.listData()
        this.$emit('onSuccess')
      })
    },
    rowChange(val,index){
      let that = this
      this.$set(this.tableData,index,val)
      // // 防抖
      if(this.time !== null){
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        that.updateOrder({
          "sa_dispatchid": this.$route.query.id, //订单ID
          "iteminfos": [{
            "sa_dispatch_itemsid": val.sa_dispatch_itemsid,//0表示新增
            "qty": val.qty, //数量
            "remarks":val.remarks
          }]
        },()=>{
          this.listData()
        })
      },500)
    },
    async updateOrder (val,fn) {
      const res  = await this.$api.requested({
        "id": 20221115104603,
        "content": val
      })
      this.$emit('onSuccess')
      res.code === 1?fn():""
      
    },
  },
  mounted () {
    this.listData()
  }
}

</script>
<style>
</style>