<template>
  <div>
    <el-row style="margin-top: 25px">
      <el-row v-if="flag == 'edit'" class="table-title">
        <div>
          <el-button size="small" type="primary" @click="removeBatch">{{ $t('批量移出合包') }}</el-button>
          <el-button size="small" type="primary" @click="sealBox">{{ $t('封箱') }}</el-button>
        </div>
        <div>
          <template>
            <el-input v-model="qrCode" :placeholder="$t('请输入二维码/条码编号')" clearable></el-input>
            <el-button type="primary" @click="handlerBatchCreate()">{{$t('确定')}}</el-button>
            <el-button type="primary" @click="handlerClick('batchInput',$t('批量输入'))">{{$t('批量输入')}}</el-button>
            <el-button type="primary" @click="handlerClick('correction',$t('装箱纠错'))">{{$t('装箱纠错')}}</el-button>
            <el-button type="primary" @click="handlerClick('correctionOrder',$t('批量装箱纠错'))">{{$t('批量装箱纠错')}}</el-button>
          </template>
        </div>
      </el-row>
      <el-row style="margin-top: 5px">
        <el-table border :data="pagList" max-height="600px" @select="checkboxSelect" @select-all="checkboxSelect">
          <el-table-column type="selection" align="center" width="55" fixed="left" />
          <el-table-column align="center" :label="$t('序号')" width="50" type="index" />
          <el-table-column :label="$t('订单号')" align="center" prop="orderNo">
            <template slot-scope="scope">
              <router-link :to="{path: '/order/detail',query: {orderId: scope.row.orderId}}" class="link-type">
                      <span>{{ scope.row.orderNo }}</span>
                    </router-link>

            </template>
          </el-table-column>
          <el-table-column :label="$t('商品信息')" width="250px" align="center">
            <template slot-scope="{ row }">
              <div v-for="item in row.orderItemDOS" :key="item.orderItemId">
                {{ $l(item, 'prodTitle') }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备案')" align="center">
            <template slot-scope="{ row }">
              <dict-tag :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" :value="row.productRecord" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('计划/已装')" align="center" prop="sumNum">
            <template slot-scope="scope">
              <el-link type="primary" @click.native="orderClick(scope.row)">
             {{ scope.row.sumNum }}/{{ scope.row.installNum }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('纸箱尺寸')" align="center">
            <template slot-scope="{ row }">
              <div v-for="item in row.orderItemDOS" :key="item.orderItemId">
                {{ item.warehouseInInfoVO?item.warehouseInInfoVO.boxGauge:'' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('体积')" align="center" prop="sumVolume" />
          <el-table-column :label="$t('重量')" align="center" prop="sumWeight" />
          <el-table-column :label="$t('数量（个）')" align="center" prop="sumQuantity" />
          <el-table-column :label="$t('储位')" align="center" prop="positionNo" width="250px">
            <template slot-scope="{ row }">
              <div v-for="item in row.orderItemDOS" :key="item.orderItemId">
                {{ (item.warehouseInInfoVO&&item.warehouseInInfoVO.orderLocationMergeVOSet)?notset(getpositionNo(item.warehouseInInfoVO.orderLocationMergeVOSet)):'' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('理货时间')" align="center">
            <template slot-scope="scope">
              {{ formatDate(scope.row.tallyTime, 'YYYY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="removePkg(scope.row)">{{ $t('移出') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList" />
      </el-row>
      <!-- 封箱 -->
        <el-dialog :title="$t('封箱确认')" :visible.sync="sealBoxdialogVisible" width="800px" :modal-append-to-body="false" append-to-body>
          <el-form ref="sealBoxForm" :model="sealBoxForm" label-width="100px">
            <el-form-item :label="$t('箱号')" prop="pkgNum">
              {{ pkgData.pkgNum }}
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('长')" prop="pkgLength" :rules="[
                    { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('长度保留两位小数')}
                  ]">
                  <el-input v-model="sealBoxForm.pkgLength" style="width: 150px" @change="culSumVolume">
                    <template slot="append">
                      {{ $t('cm') }}
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('宽')" prop="pkgWidth" :rules="[
                    { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('宽度保留两位小数')}
                  ]">
                  <el-input v-model="sealBoxForm.pkgWidth" style="width: 150px" @change="culSumVolume">
                    <template slot="append">
                      {{ $t('cm') }}
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('高')" prop="pkgHight" :rules="[
                    { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('高度保留两位小数')}
                  ]">
                  <el-input v-model="sealBoxForm.pkgHight" style="width: 150px" @change="culSumVolume">
                    <template slot="append">
                      {{ $t('cm') }}
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item :label="$t('体积')" prop="sumVolume" :rules="[
              { required: true, message: $t('请填写体积')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('体积保留两位小数')}
            ]">
              <el-input v-model="sealBoxForm.sumVolume" style="width: 180px">
               <template slot="append">
                 {{ $t('m³') }}
                </template>
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('重量')" prop="sumWeight" :rules="[
              { required: true, message: $t('请填写重量')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('重量保留两位小数')}
            ]">
              <el-input v-model="sealBoxForm.sumWeight" style="width: 180px">
               <template slot="append">
                 {{ $t('kg') }}
                </template>
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('箱数')" prop="sumNum" :rules="[
              { required: true, message: $t('请填写数量')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('数量保留两位小数')}
            ]">
              <el-input v-model="sealBoxForm.sumNum" style="width: 180px">
               <template slot="append">
                 {{ $t('箱') }}
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button size="small" type="primary" @click="sealBoxSubmit">{{ $t('确定') }}</el-button>
            <el-button size="small" type="primary" @click="sealBoxdialogVisible = false">{{ $t('取消') }}</el-button>
          </div>
        </el-dialog>
        <!-- 打印标签 -->
        <el-dialog :title="$t('封箱标签')" :visible.sync="printdialogVisible" width="350px" :modal-append-to-body="false" append-to-body>
          <print-tag v-if="printdialogVisible" :tagData="tagData" />
        </el-dialog>
        <!-- 对话框 -->
    <el-dialog custom-class="shipping-dialog" :title="checkDialogConfig.title" :visible.sync="checkDialogConfig.dialogVisible" :fullscreen="checkDialogConfig.fullscreen" :width="checkDialogConfig.width" :modal-append-to-body=false append-to-body>
      <!-- 已装未装订单 -->
      <template v-if="checkDialogConfig.type === 'orderTable'">
        <el-table :data="orderList" height="500px" border>
          <el-table-column :label="$t('已装')" align="center" prop="loadTag" />
          <el-table-column :label="$t('未装')" align="center" prop="unloadTag" />
        </el-table>
      </template>
      <!-- 装柜纠错 -->
      <template v-if="checkDialogConfig.type === 'correction' && checkDialogConfig.dialogVisible">
        <el-form ref="correctionForm" :rules="rules" :model="correctionObj" label-position="top">
          <el-form-item :label="$t('装柜纠错（二维码/条形码编号）')" prop="qrCode">
            <el-input v-model="correctionObj.qrCode" :placeholder="$t('请输入二维码/条形码编号')" clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" @click="delCheck()">{{$t('提交')}}</el-button>
          <el-button @click="closeDialog2">{{$t('取消')}}</el-button>
        </el-row>
      </template>
      <!-- 批量装柜纠错（订单号） -->
      <template v-if="checkDialogConfig.type === 'correctionOrder' && checkDialogConfig.dialogVisible">
        <el-form ref="orderForm" :rules="rules" :model="orderObj" label-position="top">
          <el-form-item :label="$t('装柜纠错') +'（' + $t('订单号') + '）'" prop="orderNo">
            <el-input type="textarea" :rows="3" v-model="orderObj.orderNo" :placeholder="$t('请输入，多个以逗号分隔')" clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" @click="batchDelCheck()">{{$t('提交')}}</el-button>
          <el-button @click="closeDialog2">{{$t('取消')}}</el-button>
        </el-row>
      </template>
      <!-- 装柜批量输入 -->
      <template v-if="checkDialogConfig.type === 'batchInput' && checkDialogConfig.dialogVisible">
        <el-form ref="batchForm" :rules="rules" :model="batchObj">
          <el-form-item label="" prop="qrCode" class="two-element">
            <el-input v-model="batchObj.qrCode" :placeholder="$t('请输入订单号')" clearable />
            <el-button style="marginLeft:10px;" type="primary" @click="queryOrderInfo">{{$t('确定')}}</el-button>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('订单号')">
                {{boxOrderInfo.orderNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('箱数')">
                <el-input-number v-if="boxOrderInfo.isExternalWarehouse === 1" v-model="batchObj.boxNum" :min="0" :max="boxOrderInfo.num" />
                <template v-else>
                  {{boxOrderInfo.num}}
                </template>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('方数')">
                {{getTotlContent(boxOrderInfo, ['volume'])}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('重量')">
                {{getTotlContent(boxOrderInfo, ['weight'])}}
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" :disabled="boxOrderInfo.orderId ? false : true" @click="batchLoad">{{$t('提交')}}</el-button>
          <el-button @click="closeDialog2">{{$t('取消')}}</el-button>
        </el-row>
      </template>
    </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { getPkgPageByPkgId, deleteRelate, deleteBatchRelate, getMergePkgInfoById, updateMergePkg, getMergeTagById, checkInfoSingleCreate, checkInfoBatchCreate, getOrderTagList, checkInfoSingleDelete, checkInfoBatchDelete } from '@/api/ecw/boxAir'
import { formatDate, serviceMsg, getTotlContent } from '../../utils'
import { getOrderDetailByBoxNo } from "@/api/ecw/boxSea";
import printTag from './printTag.vue'
export default {
  props: {
    pkgData: Object,
    shipmentObj: Object,
    flag: {
      type: String,
      default: 'edit'
    }
  },
  components: {
    printTag
  },
  data() {
    return {
      pagList: [],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10
      },
      total: 0,
      // 勾选行
      selectedRows: [],
      sealBoxdialogVisible: false,
      sealBoxForm: {},
      printdialogVisible: false,
      tagData: {},
      // 二维码/条码编号
      qrCode: "",
      // 批量输入
      batchObj: {
        boxNum: 0,
      },
      // 批量纠错（订单号）
      orderObj: {},
      // 纠错
      correctionObj: {},
      // 弹窗配置
      checkDialogConfig: {
        title: "",
        dialogVisible: false,
        width: "30%",
        type: "",
        fullscreen: false,
      },
      // 订单信息
      boxOrderInfo: {},
      rules: {
        qrCode: [
          { required: true, message: this.$t("必填"), trigger: "change" },
        ],
        orderNo: [
          { required: true, message: this.$t("必填"), trigger: "change" },
        ],
      },
      // 已理/未理
      orderList: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let queryParams = {
        id: this.pkgData.id,
        shipmentId: this.shipmentObj.id,
        ...this.queryParams
      }
      getPkgPageByPkgId(queryParams).then((res) => {
        this.pagList = res.data.list
        this.total = res.data.total
        console.log(this.pagList,'222');
      })
    },
    // 格式化日期
    formatDate,
    getTotlContent,
    //去重
    notset(string) {
      if (!string) return string
      let arr = string.split(',')
      arr = arr.filter((item, index) => {
        return arr.indexOf(item) == index
      })
      return arr.toString()
    },
    //计算封箱体积
    culSumVolume() {
      let temp = this.sealBoxForm.pkgLength*this.sealBoxForm.pkgWidth*0.01*0.01
      let sumVolume = this.accMul(temp, this.sealBoxForm.pkgHight*0.01)
      if(sumVolume <= 0){
        sumVolume = 0.01
      }
      this.$set(this.sealBoxForm, 'sumVolume', sumVolume)
    },
    accMul(arg1,arg2)
    {
      var m=0,s1=arg1.toString(),s2=arg2.toString();
      try{m+=s1.split(".")[1].length}catch(e){}
      try{m+=s2.split(".")[1].length}catch(e){}
      let num = Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      return num.toFixed(2)
    },
    getpositionNo(arr){
      if(!arr) return arr
      let data = []
      arr.forEach(item=>{
        data.push(item.areaName+item.locationName)
      })
      return data.toString()
    },
    removePkg(row) {
      deleteRelate(this.pkgData.id, row.orderId).then(() => {
        this.$message.success(this.$t('移出成功'))
        this.getList()
        this.$emit('reload')
      })
    },
    // 选中
    checkboxSelect(selection) {
      this.selectedRows = selection
    },
    removeBatch() {
      if (this.selectedRows.length === 0) {
        this.$message.error(this.$t('请选择需要移出的订单'))
        return
      }
      let data = []
      this.selectedRows.forEach((item) => {
        let json = {
          pkgId: this.pkgData.id,
          orderId: item.orderId
        }
        data.push(json)
      })
      deleteBatchRelate(data).then(() => {
        this.$message.success(this.$t('移出成功'))
        this.getList()
      })
    },
    //封箱
    sealBox() {
      let flag = false
      let orderNo = ''
      this.pagList.forEach(item=>{
        if(item.installNum != item.sumNum){
          flag = true
          orderNo = orderNo + '《' + item.orderNo + '》'
        }
      })
      if(flag){
        this.$message.error(this.$t(`订单号${orderNo}未完成装箱,请完成全部订单装箱后重试`));
        return;
      }
      getMergePkgInfoById(this.pkgData.id).then(res=>{
        this.sealBoxForm = {
          pkgHight: res.data.pkgHight,
          pkgLength: res.data.pkgLength,
          pkgWidth: res.data.pkgWidth,
          sumNum: res.data.sumNum,
          sumVolume: res.data.sumVolume,
          sumWeight: res.data.sumWeight,
        }
        this.sealBoxdialogVisible = true
      })
    },
    sealBoxSubmit() {
      this.$refs['sealBoxForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.sealBoxForm.shipmentId = this.shipmentObj.id
        this.sealBoxForm.id = this.pkgData.id
        this.sealBoxForm.status = 3
        updateMergePkg(this.sealBoxForm).then(() => {
          this.sealBoxdialogVisible = false
          this.$confirm(this.$t('箱号:')+this.pkgData.pkgNum+this.$t('，请问是否打印封箱标签?'), this.$t("封箱成功"), {
                confirmButtonText: this.$t('立刻打印'),
                cancelButtonText: this.$t('稍后再试'),
              })
                .then((_) => {
                  getMergeTagById(this.pkgData.id).then(res=>{
                    this.tagData = res.data
                    this.printdialogVisible = true
                  })
                })
                .catch((_) => {
                  this.$emit('closeDialog');
                });
        })
      })
    },
    /** 表格订单号点击 */
    orderClick(row) {
      getOrderTagList({ orderId: row.orderId, type: 1 }).then((res) => {
        const { data = {} } = res;
        this.orderList = [];
        // 取最长的list
        let dataLength = data.loadList.length;
        if (data.unLoadList.length > dataLength) {
          dataLength = data.unLoadList.length;
        }

        // 组装数据，用一个table组件渲染
        for (let index = 0; index < dataLength; index++) {
          this.orderList.push({
            loadTag: data.loadList[index],
            unloadTag: data.unLoadList[index],
          });
        }
      });
      this.shwoDialog({
        type: "orderTable",
        title: row.selfNo,
      });
    },
    /** 点击事件统一入口 */
    handlerClick(type, title) {
      this.shwoDialog({ type, title });
    },
    /** 弹窗事件 */
    shwoDialog(config) {
      this.$set(this.checkDialogConfig, "title", config.title);
      this.$set(this.checkDialogConfig, "type", config.type);
      switch (config.type) {
        case "orderTable":
          this.$set(this.checkDialogConfig, "fullscreen", false);
          break;
        case "batchInput":
          this.$set(this.checkDialogConfig, "fullscreen", false);
          this.batchObj = { boxNum: 0 };
          this.boxOrderInfo = {};
          break;
        case "correction":
          this.$set(this.checkDialogConfig, "fullscreen", false);
          this.correctionObj = {};
          break;
        case "correctionOrder":
          this.$set(this.checkDialogConfig, "fullscreen", false);
          this.orderObj = {};
          break;
      }
      this.$set(this.checkDialogConfig, "dialogVisible", true);
    },
    /** 关闭弹窗 */
    closeDialog2() {
      this.$set(this.checkDialogConfig, "dialogVisible", false);
    },
    /* 创建装柜标签 */
    handlerBatchCreate() {
      if (!this.qrCode) {
        this.$message.error(this.$t("请输入二维码/条码编号"));
        return;
      }
      let params = {
        shipmentId: this.shipmentObj.id,
        pkgId: this.pkgData.id,
        type: 1,
      };
      params.orderNumCode = this.qrCode;
      checkInfoSingleCreate(params).then((res) => {
        serviceMsg(res, this).then(() => {
          this.qrCode = "";
          this.getList();
        });
      });
    },
    queryOrderInfo() {
      this.$refs["batchForm"].validate((valid) => {
        if (valid) {
          getOrderDetailByBoxNo({
            orderNumCode: this.batchObj.qrCode,
            shipmentId: this.shipmentObj.id,
          }).then((res) => {
            const { data } = res;
            this.boxOrderInfo = data;
            this.batchObj.boxNum = Number(data.num);
          });
        }
      });
    },
    /**批量创建装柜标签 */
    batchLoad() {
      if (!this.boxOrderInfo.orderId) {
        this.$message.error(this.$t("请输入订单号"));
        return;
      }
      if (this.batchObj.boxNum === 0) {
        this.$message.error(this.$t("箱数不能为0"));
        return;
      }

      let params = {
        orderId: this.boxOrderInfo.orderId,
        orderNo: this.boxOrderInfo.orderNo,
        shipmentId: this.shipmentObj.id,
        pkgId: this.pkgData.id,
        type: 1
      };
      checkInfoBatchCreate(params).then((res) => {
        serviceMsg(res, this).then(() => {
          this.closeDialog2();
          this.boxOrderInfo = {};
          this.getList();
        });
      });
    },
    /**装柜纠错 */
    delCheck() {
      if (!this.correctionObj.qrCode) {
        this.$message.error(this.$t("请输入二维码/条码编号"));
        return;
      }
      let params = {
        shipmentId: this.shipmentObj.id,
        type: 1,
        pkgId: this.pkgData.id,
        orderNumCode: this.correctionObj.qrCode
      };
      checkInfoSingleDelete(params).then((res) => {
        serviceMsg(res, this).then(() => {
          this.closeDialog2();
          this.getList();
        });
      });
    },
    /**批量装柜纠错 */
    batchDelCheck() {
      if (!this.orderObj.orderNo) {
        this.$message.error(this.$t("请输入订单号"));
        return;
      }
      let params = {
        shipmentId: this.shipmentObj.id,
        pkgId: this.pkgData.id,
        type: 1,
        orderNo: this.orderObj.orderNo
      };
      checkInfoBatchDelete(params).then((res) => {
        serviceMsg(res, this).then(() => {
          this.closeDialog2();
          this.getList();
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.table-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  > div:first-child {
    flex: 1;
    font-size: 16px;
  }
  > div:last-child {
    display: flex;
    > .el-input {
      margin-right: 10px;
    }
  }
}
</style>
