<template>
  <div class="shipping-tally">
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="22">
        <el-card>
          <el-descriptions :column="4" border>
            <el-descriptions-item label="自编号">
              {{shipmentObj.selfNo}}
            </el-descriptions-item>
            <el-descriptions-item label="运输方式">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
            </el-descriptions-item>
            <el-descriptions-item label="始发地">
              {{getCityName(shipmentObj.startWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item label="目的地">
              {{getCityName(shipmentObj.destWarehouseId)}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-row style="margin-top: 15px">
          <el-row>
            <el-button size="small" type="primary" @click="()=>tallyClick('batch')">批量理货</el-button>
            <el-button size="small" type="primary" @click="()=>removeClick('batch')">批量移出</el-button>
          </el-row>
          <el-row style="margin-top: 5px">
            <el-table border :data="tallyList" @select="checkboxSelect" @select-all="checkboxSelect" max-height="600px">
              <el-table-column type="selection" align="center" width="55" fixed="left" />
              <el-table-column type="index" align="center" label="序号" width="50" />
              <el-table-column label="订单号" align="center" prop="orderNo">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.orderNo}}
                  </div>
                  <div style="color:blue;fontWeight:bold;">
                    {{ scope.row.isExternalWarehouse === 1 ? '(外部仓)' : ''}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品信息" width="250px" align="center" prop="prodTitleZh">
              </el-table-column>
              <el-table-column label="备案" align="center" prop="productRecord">
                <template v-slot="{row}">
                  <dict-tag :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" :value="row.productRecord" />
                </template>
              </el-table-column>
              <el-table-column label="箱数" align="center" prop="num" />
              <el-table-column label="纸箱尺寸" align="center" prop="boxGauge">
              </el-table-column>
              <el-table-column label="体积" align="center" prop="volume">
              </el-table-column>
              <el-table-column label="重量" align="center" prop="weight">
              </el-table-column>
              <el-table-column label="数量（个）" align="center" prop="quantity"></el-table-column>
              <el-table-column label="储位" align="center" prop="positionNo" width="250px"></el-table-column>
              <el-table-column label="状态" align="center" prop="tallyStatus">
                <template slot-scope="scope">
                  {{scope.row.tallyStatus === 1 ? '已理货' : '未理货'}}
                </template>
              </el-table-column>
              <el-table-column label="理货时间" align="center" prop="tallyTime">
                <template slot-scope="scope">
                  {{formatDate(scope.row.tallyTime,'YYYY-MM-DD HH:mm:ss')}}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="tallyClick('single',scope.row)">理货</el-button>
                  <el-button type="text" size="small" @click="removeClick('single',scope.row)">移出</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-row>

        <el-row style="margin-top: 15px" class="operate-button">
          <el-button size="small" type="primary" @click="tallyFinish">完成理货</el-button>
          <el-button size="small" @click="cancel">取消</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 对话框 -->
    <el-dialog custom-class="shipping-dialog" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :fullscreen="dialogConfig.fullscreen" :width="dialogConfig.width" :modal-append-to-body=false append-to-body>
      <batchTally v-if="dialogConfig.dialogVisible" v-bind="$attrs" @closeDialog="closeDialog" :type="dialogConfig.type" :tallyRows="tallyRows" :shipmentObj="shipmentObj" />
    </el-dialog>
  </div>
</template>

<script>
import batchTally from "./batchTally.vue";
import { getTallyList, tallyRemove, tallyCommit } from "@/api/ecw/boxSea";
import { formatDate, serviceMsg } from "../../utils";

export default {
  name: "tally",
  inheritAttrs: false,
  components: {
    batchTally,
  },
  props: {
    shipmentObj: Object,
  },
  data() {
    return {
      tallyList: [],
      // 理货数据
      tallyRows: [],
      // 勾选行
      selectedRows: [],
      // 弹窗配置
      dialogConfig: {
        title: "",
        dialogVisible: false,
        width: "30%",
        type: "",
        fullscreen: false,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 格式化日期
    formatDate,
    // 查询理货列表
    getList() {
      getTallyList({ shipmentId: this.shipmentObj.id }).then((res) => {
        let list = [];
        res.data.forEach((item) => {
          item.orderItemList.forEach((oItem) => {
            list.push({
              ...oItem,
              positionNo: item.positionNo,
              tallyStatus: item.tallyStatus,
              tallyTime: item.tallyTime,
            });
          });
        });
        this.tallyList = list;
      });
    },
    // 选中
    checkboxSelect(selection) {
      this.selectedRows = selection;
    },
    // 理货点击
    tallyClick(type, data) {
      if (type === "batch") {
        if (this.selectedRows.length === 0) {
          this.$message.error("请选择需要理货的订单");
          return;
        }
        this.tallyRows = this.selectedRows;
        this.showDialog("batchTally");
      } else {
        this.tallyRows = [data];
        this.showDialog("singleTally");
      }
    },
    // 移出点击
    removeClick(type, data) {
      let orderNos = [],
        orderIds = [];
      if (type === "batch") {
        if (this.selectedRows.length === 0) {
          this.$message.error("请选择需要移出的订单");
          return;
        }
        orderNos = this.selectedRows.map((item) => item.orderNo);
        orderIds = this.selectedRows.map((item) => item.orderId);
      } else {
        orderNos = [data.orderNo];
        orderIds = [data.orderId];
      }

      let msgTitle = `您确定要将 ${orderNos.join("，")} 移出 ${
        this.shipmentObj.selfNo
      } 吗？`;

      this.$confirm(msgTitle, "提示", {
        type: "warning",
      })
        .then((_) => {
          tallyRemove({
            orderIdLIst: orderIds,
            shipmentId: this.shipmentObj.id,
          }).then((res) => {
            serviceMsg(res, this).then(() => {
              this.getList();
            });
          });
        })
        .catch((_) => {});
    },
    // 关闭弹窗
    closeDialog(type) {
      this.$set(this.dialogConfig, "dialogVisible", false);
      if (type === "query") {
        this.getList();
      }
    },
    // 打开弹窗
    showDialog(type) {
      switch (type) {
        case "batchTally":
          this.$set(this.dialogConfig, "title", "批量理货");
          this.$set(this.dialogConfig, "width", "500px");
          break;
        case "singleTally":
          this.$set(this.dialogConfig, "title", "理货确认");
          this.$set(this.dialogConfig, "width", "500px");
          break;
      }
      this.$set(this.dialogConfig, "type", type);
      this.$set(this.dialogConfig, "dialogVisible", true);
    },
    /** 取消 */
    cancel(type) {
      this.$emit("closeDialog", type);
    },
    // 理货完成
    tallyFinish() {
      tallyCommit({ shipmentId: this.shipmentObj.id }).then((res) => {
        serviceMsg(res, this).then(() => {
          this.$emit("closeDialog", "submit");
        });
      });
    },
  },
  computed: {
    /* 获取仓库 */
    getCityName() {
      return (id) => {
        let arr = this.$attrs.warehouseList.filter((item) => item.id == id);
        return arr.length > 0 ? arr[0].titleZh : "无";
      };
    },
  },
};
</script>

<style lang="scss" scoped>
</style>