<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%;"
      size="small"
      stripe
      border>
      <!-- <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column> -->
      <el-table-column
        prop="itemname"
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="itemno"
        label="产品编号">
      </el-table-column>
      <el-table-column
        label="型号">
        <template slot-scope="scope">
          <p><span>{{scope.row.model}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
          label="规格">
        <template slot-scope="scope">
          <p><span>{{scope.row.spec}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
        label="数量">
        <template slot-scope="scope">
          <!-- <el-input-number :controls="true" controls-position='right' :step-strictly="true" v-if="type === 'edit'" size="mini" v-model="scope.row.qty" :min="1" :step="scope.row.orderaddqty" label="输入数量" @change="qtyChange(scope.row,scope.$index)"></el-input-number> -->
          <span>{{scope.row.qty}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="unit"
        label="计量单位"
        width="90">
        <template slot-scope="scope">
          <el-tag size="mini" type="info" effect="plain">{{scope.row.unitname}}</el-tag>
          
        </template>
      </el-table-column>
      <el-table-column v-if="type === 'edit'" width="90" fixed="right">
        <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>
  </div>
</template>

<script>
export default {
  props:['type'],
  data () {
    return {
      tableData:[],
      param:{
        "id": 20221115104703,
        "content": {
          "sa_orderid": 0,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
              "condition": ""
          }
        },
      },
      total:0,
      currentPage:0,
      time: null
    }
  },
  methods:{
    async listData (id) {
      this.param.content.sa_dispatchid = id
      const res = await this.$api.requested(this.param)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData(this.param.content.sa_dispatchid)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData(this.param.content.sa_dispatchid)
    },
    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)
    }
  },
  mounted () {
  }
}

</script>
<style>
</style>