<template>
  <div class="shipping-batchTally">
    <el-row v-if="$attrs.type === 'batchTally'">
      <el-button type="text" size="small" @click="()=>openStorage('all')">{{$t('批量修改储位')}}</el-button>
    </el-row>
    <el-scrollbar viewClass="tally-list">
      <el-row class="tally-detail" v-for="(item, index) in storageList" :key="item.id">
        <div class="status-number">{{++index}}</div>
        <div class="detail-info">
          <div>{{$t('入仓单号')}}：{{item.orderNo}}</div>
          <div>{{$t('入仓统计')}}：{{getTotlContent(item)}}</div>
          <div class="detail-modify">
            <el-tooltip effect="dark" :content="item.positionNo" placement="top">
              <div>{{$t('储位')}}：{{item.positionNo}}</div>
            </el-tooltip>
            <el-button type="text" size="small" @click="()=>openStorage('single', item)">{{$t('修改')}}</el-button>
          </div>
        </div>
      </el-row>
    </el-scrollbar>

    <el-row class="operate-button">
      <el-button size="small" type="primary" @click="tallyModify">{{$t('确定')}}</el-button>
      <el-button size="small" @click="$emit('closeDialog')">{{$t('关闭')}}</el-button>
    </el-row>

    <warehouse-area-dialog ref="area" :visible.sync="visible" v-model="storageSpaces" :order-id="orderId" :warehouseId="warehouseId" :modal-append-to-body=false append-to-body />
  </div>
</template>

<script>
import { getTotlContent, serviceMsg } from "../../utils";
import WarehouseAreaDialog from "@/components/WarehouseAreaDialog";
import { deepClone } from "@/utils";
import { tallyLocationUpdate } from "@/api/ecw/boxSea";

export default {
  name: "batchTally",
  inheritAttrs: false,
  components: { WarehouseAreaDialog },
  props: {
    tallyRows: Array,
  },
  data() {
    return {
      visible: false,
      // 储位
      storageSpaces: [],
      // 订单ID
      orderId: -1,
      // 仓位数据
      storageList: deepClone(this.tallyRows),
      // 仓库id
      warehouseId: this.$attrs.shipmentObj.startWarehouseId,
    };
  },
  mounted() {
    this.$refs.area.updateArea()
  },
  methods: {
    getTotlContent,
    // 打开储位
    openStorage(type, item) {
      if (type === "all") {
        this.orderId = -1;
      } else {
        this.orderId = item.orderId;
      }
      this.visible = true;
    },
    // 修改储位
    tallyModify() {
      // 查找数据中存在storageList的订单
      let orderLocationList = [];
      this.storageList.forEach((item) => {
        const { storageList } = item;
        if (storageList && storageList.length) {
          storageList.forEach((sItem) => {
            orderLocationList.push({
              ...sItem,
              orderId: item.orderId,
            });
          });
        }
      });

      if (orderLocationList.length === 0) {
        this.$message.error(this.$t("没有需要修改储位的订单"));
        return;
      }

      tallyLocationUpdate({
        shipmentId: this.$attrs.shipmentObj.id,
        orderLocationList,
      }).then((res) => {
        serviceMsg(res, this).then(() => {
          this.$emit("closeDialog", "query");
        });
      });
    },
  },
  watch: {
    storageSpaces(val) {
      let newList = [];
      const { selected = [] } = this.$refs.area;
      // 批量修改储位
      if (this.orderId === -1) {
        newList = this.storageList.map((item) => {
          item.positionNo = selected.join(",");
          item.storageList = val;
          return item;
        });
      } else {
        newList = this.storageList.map((item) => {
          if (item.orderId === this.orderId) {
            item.positionNo = selected.join(",");
            item.storageList = val;
          }
          return item;
        });
      }

      this.storageList = newList;
    },
  },
};
</script>

<style lang="scss">
.shipping-batchTally {
  .el-scrollbar__wrap {
    max-height: 500px;
    .tally-list {
      .tally-detail {
        display: flex;
        padding: 10px 0px;
        border-bottom: 1px solid rgb(223, 230, 236);

        .status-number {
          width: 26px;
          height: 26px;
          border: 1px solid #ccc;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
        }

        .detail-info {
          > div {
            height: 30px;
            line-height: 30px;
          }

          .detail-modify {
            display: flex;
            align-items: center;
            > :first-child {
              width: 150px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-right: 10px;
            }
          }
        }
      }

      > .tally-detail:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>