<template>
  <view style="background: #fff; min-height: calc(100vh - 44px)">
    <view class="search-header flex">
      <scanlistener
        class="wrap"
      v-if="showScanlistener"
      suffixIcon="scan"
      v-model="keyword"
      :placeholder="$t('请扫描条形码')"
      @iconClick="scanCode"
      @confirm="searchCode"
      @submit="keyword=$event;searchCode()"
      ></scanlistener>
      <navigator class="goto-query" url="/pages/packTogetherSearch/packTogetherSearch">{{$t('合包查询')}}</navigator>
    </view>

    <view class="scroll">
      <!--<view class="list-header">
        <view class="title">{{$t('状态')}}</view>
      </view>-->

      <view>
        <uni-card v-for="(v, key) in listData" :key="key" @tap="toDetail(v)">
          <view class="content-item-wrap">
            <view :class="`item-header`">
              <view>{{$t('自编号')}} {{ v.selfNo }}</view>
            </view>
            <view class="item-content">
              <view>
                <view>{{$t('方数')}}（{{$t('计划')}}）：{{ v.boxStatistics.volume }}/{{ v.boxStatistics.loadVolume }}</view>
                <view>{{$t('运输方式')}}：
                  <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="v.transportType" />
                </view>
              </view>
              <view>
                <view>{{$t('重量')}}（{{$t('计划')}}）：{{ v.boxStatistics.weight }}/{{ v.boxStatistics.loadWeight }}</view>
                <view>{{$t('出货渠道')}}: {{ v.channelRespVO ? $l(v.channelRespVO, 'name') : '' }}</view>
              </view>
              <view>
                <view>{{$t('件数')}}（{{$t('计划')}}）：{{ v.boxStatistics.num }}/{{ v.boxStatistics.loadNum }}</view>
                <view>{{$t('目的地')}}：{{ v.destWarehouseResp.titleZh }}</view>
              </view>
              <view>{{$t('状态')}}: {{ v.shipmentStatusText }}</view>
            </view>
          </view>
        </uni-card>
        <uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
      </view>
    </view>
  </view>
</template>

<script>
import { uniLoadMore } from "@dcloudio/uni-ui";
import { tallyPage } from "./api";
import { defaultPageSize } from "../../util/config.js";
import { shipmentBoxPage } from "@/api/api";

export default {
  name: "tally-list",
  components: { uniLoadMore },
  data() {
    return {
      keyword: "",
      listData: [],
      page: 1,
      onHideFlag: false,
      status: "more",
      contentText: {
        contentdown: this.$t("上拉加载更多"),
        contentrefresh: this.$t("加载中"),
        contentnomore: this.$t("没有更多"),
      },
    };
  },
  methods: {
    scanCode() {
      uni.scanCode({
        success: (res) => {
          this.keyword = res.result;
          this.page = 1;
          this.getData();
        },
      });
    },
    searchCode() {
      this.page = 1;
      setTimeout(this.getData, 100)
    },
    getData() {
      let params = {
        page: this.page,
        rows: defaultPageSize,
        selfNo: this.keyword,
        shipmentStatusAir: 409 // 只显示完成理货，待出货的自编号
      };
      this.status = 'loading'
      shipmentBoxPage(params).then((data) => {
        // 第一页清空数据
        if (this.page == 1) {
          this.listData = [];
        }
        const { list, total } = data;

        if (list.length > 0) {
          this.listData = this.listData.concat(list);
          if (list.length < total) {
            this.status = "more";
          } else {
            this.status = "noMore";
          }
        } else {
          this.status = "noMore";
        }

        uni.stopPullDownRefresh();
      });
    },
    toDetail(row) {
      uni.navigateTo({
        url: `./detail?id=${row.id}&selfNo=${row.selfNo}`,
      });
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.getData();
  },
  onReachBottom() {
    if (this.status == "more") {
      this.status = "loading";
      this.page++;
      this.getData();
    }
  },
  onLoad: function (option) {
    uni.setNavigationBarTitle({
      title: this.$t("合包装箱"),
    });
    this.getData();
  },
  onBackPress(options) {
    uni.reLaunch({
      url: "../index/index",
    });
    return true;
  },
  onShow() {
    if (this.onHideFlag) {
      this.getData();
    }
  },
  onHide() {
    this.onHideFlag = true;
  },
};
</script>

<style lang="scss" scoped>
.search-header {
  ::v-deep .uni-easyinput__content {
    border-radius: 20px;
    padding-right: 10px;
    background: rgba($color: #fff, $alpha: 0.5) !important;
    border: none;
    // opacity: 0.5;
  }
  ::v-deep .uni-input-placeholder {
    padding-left: 8px;
    color: #b2c9f3;
  }
  ::v-deep .uni-input-input {
    padding-left: 8px;
  }
  .wrap{
    flex: 1;
  }
  .goto-query{
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    color: #fff;
  }
}
.scroll {
  margin-top: -8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 8px;
  background: #fff;
  .list-header {
    display: flex;
    .title {
      font-weight: bold;
      font-size: 18px;
    }
    .checkbox-wrap {
      width: 80px;
      justify-content: flex-end;
      margin-left: auto;
      margin-right: 10px;
      display: flex;
      align-items: center;
      > text {
        margin-right: 8px;
      }
      ::v-deep .uni-select {
        border: none;
      }
    }
  }
  ::v-deep .uni-card {
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }
  .content-item-wrap {
    .item-header {
      display: flex;
      align-items: center;
      border-bottom: 0.5px solid #eee;
      padding-bottom: 10px;

      &.red-header {
        color: red;
      }
    }
    .item-content {
      padding-top: 10px;
      > view {
        display: flex;
        padding: 4px 0;
        > :first-child {
          flex: 0 0 60%;
        }
        > :last-child {
          flex: 0 0 40%;
        }
        > view {
          word-break: break-all;
        }
      }
    }
  }
}
::v-deep .uni-popup__wrappe {
  border-radius: 8px;
}
</style>
