<template>
  <div class="app-container">
    <div class="filter-container">
      <el-divider content-position="left">订单人工入帐</el-divider>
      <div class="recharing-order-warp">
        <div class="itemGroup">
          <el-form :model="paramsDto" @submit.native.prevent>
            <el-form-item label="待计费单号：" label-width="100px">
              <div class="systemNo">
                <el-input type="text" placeholder="请输入待计费单号，回车查询" v-model="paramsDto.systemNo" clearable :disabled="searchLoading"
                  @keyup.enter.native="handleOrderEnter">
                  <el-button slot="suffix" type="text" :loading="searchLoading"></el-button>
                </el-input>
              </div>
            </el-form-item>
          </el-form>
          <div class="order-warp" v-show="entryForm.SystemNo">
            <el-form :model="entryForm" ref="ruleFormRef" label-width="90px">
              <el-row>
                <el-col class="border-bottom" :span="11">
                  <el-form-item label="客户单号:" style="font-size: 16px;">
                    {{ entryForm.SystemNo }}
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom border-left" :span="13">
                  <el-form-item label="运单号:">
                    {{ entryForm.TrackingNumber }}
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom" :span="11">
                  <el-form-item label="转单号:">
                    {{ entryForm.TransferNumber }}
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom border-left" :span="13">
                  <el-form-item label="系统单号:">
                    {{ entryForm.SystemNo }}
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom" :span="6">
                  <el-form-item label="实重:">
                    <el-input v-model="entryForm.ActualWeight" class="weight" placeholder="请输入实重">
                      <template slot="append">KG</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom border-left" :span="12">
                  <el-form-item label="尺寸:">
                    <div class="measure-warp">
                      <el-input v-model="entryForm.Length" class="measure" placeholder="长">
                        <template slot="append">(长)CM</template>
                      </el-input>
                      <el-input v-model="entryForm.Width" class="measure" placeholder="宽">
                        <template slot="append">(宽)CM</template>
                      </el-input>
                      <el-input v-model="entryForm.Height" class="measure" placeholder="高">
                        <template slot="append">(高)CM</template>
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom border-left" :span="6">
                  <el-form-item label="体积重:">
                    <el-input v-model="entryForm.VolWeight" class="weight" placeholder="体积重">
                      <template slot="append">KG</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom" :span="6">
                  <el-form-item label="计费重:">
                    <el-input v-model="entryForm.OPWeight" class="weight" placeholder="请输入计费重">
                      <template slot="append">KG</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom border-left" :span="12">
                  <el-form-item label="计费渠道:">
                    <el-select v-model="entryForm.CreateOrderChannelId" class="channelId" placeholder="请选择" filterable>
                      <el-option v-for="item in Channels" :key="item.Id" :label="item.Name" :value="item.Id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom border-left" :span="6">
                  <el-form-item label="当前状态:">
                    <el-tag type="success">{{ entryForm.StrOrderStatus }}</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <vxe-table border style="font-size: 16px;" show-overflow :data="propsSurchargeData"
                    :row-config="{ isHover: true }" :scroll-y="{ enabled: false }"
                    :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'cell', enabled: true }">
                    <vxe-column title="附加费金额" field="AttachFee" :width="478"
                      :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #edit="{ row }">
                        <vxe-input v-model="row.AttachFee" @blur="blurAttachFee(row)" placeholder="附加费标准" type="number" step="1" min="0"></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column title="附加费标准" field="AttachFeeRemark" :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #edit="{ row }">
                        <vxe-input v-model="row.AttachFeeRemark" type="text" placeholder="附加费标准" />
                      </template>
                    </vxe-column>
                    <vxe-column title="操作" width="90">
                      <template #default="scope">
                        <el-button type="text" size="small" @click.native.prevent="handleAddSurcharge">
                          新增
                        </el-button>
                        <el-button type="text" size="small" class="delete" @click.native.prevent="handleDeleteRow(scope.rowIndex, propsSurchargeData)
                          ">
                          移除
                        </el-button>
                      </template>
                    </vxe-column>
                    <template #empty>
                      <el-button v-show="propsSurchargeData.length === 0" type="text" icon="el-icon-plus" class="empty"
                        @click="handleAddSurcharge" />
                    </template>
                  </vxe-table>
                </el-col>
                <el-col class="unit-price border-bottom" :span="11">
                  <el-form-item label="单价：">
                    <el-input v-model="entryForm.AvgFee" class="weight" placeholder="请输入单价">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col class="border-left border-bottom" :span="13">
                  <el-form-item prop="SumFee" :rules="[{ required: true, message: '请输入总计', trigger: 'blur' }]" label="总计：">
                    <el-input v-model="entryForm.SumFee" class="weight" placeholder="请输入总计">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col class="border-bottom" :span="24">
                  <div class="submit-btns">
                    <el-button type="primary" :loading="confirmLoading" @click="onConfirmSetOrderFee">确定提交</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="empty-data" v-show="!entryForm.SystemNo">
            暂无数据！
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _getDeliverChannel } from '@/api/baseInfo'
import { _getLoadOrderInfo, _SetOrderFee } from '@/api/order'

export default {
  name: 'OrderBatchRecharging',
  data() {
    return {
      searchLoading: false,
      paramsDto: {
        systemNo: null,
      },
      confirmLoading: false,
      propsSurchargeData: [],
      entryForm: {
        CreateOrderChannelId: undefined,
        CustomerOrderNo: undefined,
        OPWeight: undefined,
        ActualWeight: undefined,
        VolWeight: undefined,
        Length: undefined,
        Width: undefined,
        Height: undefined,
        TrackingNumber: undefined,
        TransferNumber: undefined,
        SystemNo: undefined,
        SumFee: undefined,
        AvgFee: undefined,
        StrOrderStatus: undefined,
      },
      Channels: [],
      confirmLoading: false,
      validRules: {
        AttachFee: [
          { required: true, message: '请输入' },
        ],
        AttachFeeRemark: [
          { required: true, message: '请输入' },
        ]
      }
    }
  },
  created() {
    _getDeliverChannel().then(response => {
      this.Channels = response
    })
  },
  methods: {
    // 系统单号回车事件
    handleOrderEnter() {
      this.searchLoading = true
      _getLoadOrderInfo(this.paramsDto.systemNo).then((res) => {
        if (res.orderInfos && res.orderInfos.length > 0) {
          const orderInfos = res.orderInfos[0]
          Object.keys(this.entryForm).forEach((key) => {
            this.entryForm[key] = orderInfos[key]
          })
          this.entryForm.OPWeight = this.entryForm.OPWeight / 1000
          this.entryForm.ActualWeight = this.entryForm.ActualWeight / 1000
          this.entryForm.VolWeight = this.entryForm.VolWeight / 1000
          this.propsSurchargeData = this.initAttachFeeList(orderInfos.Details)
        }
      }).finally(() => {
        this.searchLoading = false
      })
    },
    initAttachFeeList(data) {
      const result = [];
      const maxIndex = 5;
      for (let i = 1; i <= maxIndex; i++) {
        const attachFeeKey = `AttachFee${i}`;
        const attachFeeRemarkKey = `AttachFeeRemark${i}`;
        if (data.hasOwnProperty(attachFeeKey) || data.hasOwnProperty(attachFeeRemarkKey)) {
          result.push({
            AttachFee: data[attachFeeKey],
            AttachFeeRemark: data[attachFeeRemarkKey]
          });
        }
      }
      return result
    },
    blurAttachFee(row) {
      if (row.AttachFee === '') row.AttachFee = 0
    },
    // 添加附加费
    handleAddSurcharge() {
      // 限制只能添加5条附加费
      if (this.propsSurchargeData.length === 5) {
        this.$message({
          message: '暂时只支持添加5条附加费！',
          type: 'warning'
        })
        return
      }
      this.propsSurchargeData.push({
        AttachFee: null,
        AttachFeeRemark: null,
      })
    },
    // 移除附加费
    handleDeleteRow(index, data) {
      this.propsSurchargeData.splice(index, 1)
    },
    // 确定提交
    async onConfirmSetOrderFee() {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          const attachFeeResult = this.propsSurchargeData.reduce((acc, item, index) => {
            acc[`AttachFee${index + 1}`] = item.AttachFee;
            acc[`AttachFeeRemark${index + 1}`] = item.AttachFeeRemark;
            return acc;
          }, {});
          const params = {
            SystemNo: this.entryForm.SystemNo,//必填
            SumFee: this.entryForm.SumFee,//必填
            AvgFee: this.entryForm.AvgFee,
            ActiveWeight: this.entryForm.ActualWeight,
            Width: this.entryForm.Width,
            Height: this.entryForm.Height,
            Length: this.entryForm.Length,
            VWeight: this.entryForm.VolWeight,
            PublicChannelId: this.entryForm.CreateOrderChannelId,
            ...attachFeeResult
          }
          this.confirmLoading = true
          _SetOrderFee(params).then((res) => {
            this.$message({ type: 'success', message: '添加成功' })
          }).finally(() => {
            this.confirmLoading = false
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.recharing-order-warp ::v-deep .el-form-item__content {
  font-size: 16px;
}
.recharing-order-warp ::v-deep .el-input__inner {
  font-size: 16px;
}

.recharing-order-warp .itemGroup {
  position: relative;
  width: 1080px;
  height: 82vh;
  overflow: auto;
  border: 1px solid #D3D4D6;
  padding: 10px 10px 0px 10px;
}

.recharing-order-warp .order-warp {
  border: 1px solid #D3D4D6;
  /* padding: 10px; */
}

.recharing-order-warp .empty-data {
  line-height: 6;
  text-align: center;
  font-size: 22px;
  color: #909399;
}

.recharing-order-warp .channelId,
.recharing-order-warp .weight {
  width: 96%;
}

.recharing-order-warp .measure-warp {
  display: flex;
  width: 96%;
}

.recharing-order-warp .border-bottom {
  border-bottom: 1px solid #D3D4D6;
}

.recharing-order-warp .border-left {
  border-left: 1px solid #D3D4D6;
}

.recharing-order-warp .unit-price {
  background-color: #ffff00;
}

.recharing-order-warp .empty {
  font-size: 36px;
}

.recharing-order-warp .delete {
  color: red;
}

.recharing-order-warp .submit-btns {
  padding: 5px 16px 5px 5px;
  text-align: right;
}

.recharing-order-warp .order-warp ::v-deep .el-row {
  display: flex;
  flex-wrap: wrap;
}

.recharing-order-warp .order-warp ::v-deep .el-input-group__append {
  padding: 0 4px;
}

.recharing-order-warp .order-warp ::v-deep .el-form-item {
  margin-top: 13px;
  margin-bottom: 13px;
}
@media screen and (max-width: 1080px) {
  .recharing-order-warp {
    width: 960px;
    overflow-x: auto;
  }
}
</style>
