<template>
  <div class="app-container">
    <el-form id="input" v-loading="loading" inline>
      <div class="form">
        <el-form-item label="箱码" label-width="100px">
          <el-input
            ref="BoxNumber"
            v-model="dto.BoxNumber"
            placeholder="填写箱码"
            style="width:300px"
            @keydown.enter.native="keyupenter( !IsSame ?'BillLenght': 'OpLength')"
          />
        </el-form-item>
        <el-form-item label="计费方式">
          <el-select v-model="dto.Mode">
            <!-- <el-option label="客户体积与实收体积最大值" value="1" /> -->
            <el-option label="分别录入计费重，收货重" value="2" />
          </el-select>
        </el-form-item>
      </div>
      <div v-if="dto.Mode == '2'" class="form">
        <el-form-item label="确认长度(cm)" label-width="100px">
          <el-input
            ref="BillLenght"
            v-model="dto.BillLenght"
            :readonly="IsSame"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="填写箱子长度(cm)"
            @keydown.enter.native="keyupenter('BillWidth')"
          />
        </el-form-item>
        <el-form-item label="确认宽度(cm)" label-width="100px">
          <el-input
            ref="BillWidth"
            v-model="dto.BillWidth"
            :readonly="IsSame"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="填写箱子宽度(cm)"
            @keydown.enter.native="keyupenter('BillHeight')"
          />
        </el-form-item>
        <el-form-item label="确认高度(cm)" label-width="100px">
          <el-input
            ref="BillHeight"
            v-model="dto.BillHeight"
            :readonly="IsSame"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="填写箱子高度(cm)"
            @keydown.enter.native="keyupenter('OpLength')"
          />
        </el-form-item>
        <el-form-item label="确认重量(kg)" label-width="100px">
          <el-input
            ref="BillWeight"
            v-model="dto.BillWeight"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="填写与客户确认后的重量(kg)"
            @keydown.enter.native="keyupenter('BoxNumber')"
          />
        </el-form-item>
      </div>
      <div class="form">
        <el-form-item label="实收长度(cm)" label-width="100px">
          <el-input
            ref="OpLength"
            v-model="dto.OpLength" 
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="填写箱子长度(cm)"
            @keydown.enter.native="keyupenter('OpWidth');OpLengthInput();"
          />
        </el-form-item>
        <el-form-item label="实收宽度(cm)" label-width="100px">
          <el-input
            ref="OpWidth"
            v-model="dto.OpWidth" 
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="填写箱子宽度(cm)"
            @keydown.enter.native="keyupenter('OpHeight');OpWidthInput();"
          />
        </el-form-item>
        <el-form-item label="实收高度(cm)" label-width="100px">
          <el-input
            ref="OpHeight"
            v-model="dto.OpHeight" 
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="填写箱子高度(cm)"
            @keydown.enter.native="keyupenter('OpInputWeight');OpHeightInput();"
          />
        </el-form-item>
        <el-form-item label="实收重量(kg)" label-width="100px">
          <el-input
            ref="OpInputWeight"
            v-model="dto.OpInputWeight"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="实收重量(kg)"
            @keydown.enter.native="keyupenter('BillWeight')"
          />
        </el-form-item>
      </div>
      <div class="form">
        <el-checkbox v-model="IsSame" @change="changeData()">确认与实收相同</el-checkbox>
      </div>
    </el-form>
    <div class="control-bar">
      <div class="text-center">
        <el-button
          :loading="saveLoading"
          type="success"
          @click="submit"
        >确认收货</el-button>
      </div>
    </div>
    <div>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="BoxNumber" label="客户箱号" width="180" />
        <el-table-column prop="BoxServiceNumber" label="系统箱号" width="180" />
        <el-table-column label="客户" align="center">
          <el-table-column prop="Length" label="客户长度(cm)" />
          <el-table-column prop="Width" label="客户宽度(cm)" />
          <el-table-column prop="Height" label="客户高度(cm)" />
          <el-table-column prop="Weight" label="客户重量(kg)" />
        </el-table-column>
        <el-table-column label="收货" align="center">
          <el-table-column prop="OpLength" label="收货长度(cm)" />
          <el-table-column prop="OpWidth" label="收货宽度(cm)" />
          <el-table-column prop="OpHeight" label="收货高度(cm)" />
          <el-table-column prop="OpInputWeight" label="收货重量(kg)" />
        </el-table-column>
        <el-table-column label="计费" align="center">
          <el-table-column prop="BillLenght" label="计费长度(cm)" />
          <el-table-column prop="BillWidth" label="计费宽度(cm)" />
          <el-table-column prop="BillHeight" label="计费高度(cm)" />
          <el-table-column prop="OpWeight" label="收货重量(kg)" />
        </el-table-column> 
        <el-table-column label="确认" align="center">
          <el-table-column prop="BillLenght" label="确认长度(cm)" />
          <el-table-column prop="BillWidth" label="确认宽度(cm)" />
          <el-table-column prop="BillHeight" label="确认高度(cm)" />
           <el-table-column prop="BillWeight" label="确认重量(kg)" />
           <el-table-column  label="最终计费重量(kg)">
             <template slot-scope="r">
             <span v-if="r.row.BillLenght*r.row.BillWidth*r.row.BillHeight/6000>BillWeight">{{r.row.BillLenght*r.row.BillWidth*r.row.BillHeight/6000}}</span>
             <span v-else>{{BillWeight}}</span>
            </template>
           </el-table-column>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-printer"
              type="primary"
              plain
              @click="printSKULabel(scope.row)"
              >打印标签</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div />
  </div>
</template>
<script>
import { ConfirmCustomerOrderReceipt } from '@/api/order/orderManagement'
export default {
  name: 'CustomerOrderReceipt',
  data() {
    return {
      saveLoading: false,
      loading: false,
      textRows: 2,
      dto: {Mode:'2',BillHeight:"",BillLenght:"",BillWeight:"",BillWidth:'',OpWidth:'',OpLength:'',OpHeight:'',OpInputWeight:''},
      list: [],
      Mode: '',
      IsSame:false
    }
  },
  methods: {
    keyupenter(ref) {
      this.$refs[ref].focus()
    },
    changeData(){
      if(this.IsSame){
        this.dto.BillLenght=this.dto.OpLength;
        this.dto.BillWidth=this.dto.OpWidth;
        this.dto.BillHeight=this.dto.OpHeight;
      }
      else{
        this.dto.BillLenght='';
        this.dto.BillWidth='';
        this.dto.BillHeight='';
      }
    },
    OpLengthInput(){
      if(this.IsSame){this.dto.BillLenght=this.dto.OpLength;}
    },
     OpWidthInput(){
      if(this.IsSame){this.dto.BillWidth=this.dto.OpWidth;}
    },
     OpHeightInput(){
      debugger
      if(this.IsSame){this.dto.BillHeight=this.dto.OpHeight;}
    },
    submit() {
      this.saveLoading = true
      this.loading = true
      ConfirmCustomerOrderReceipt(this.dto)
        .then((res) => {
          this.list.unshift(res)
          this.$message({ message: '收货成功', type: 'success' })
        })
        .finally((res) => {
          this.saveLoading = false
          this.loading = false
        })
    }
  }
}
</script>
