<template>
  <view style="background: #fff; min-height: calc(100vh - 44px)">
    <view class="search-header">
      <scanlistener
	  v-if="showScanlistener"
	  suffixIcon="scan"
	  ref="scanInput"
	  v-model="keyword"
	  :placeholder="$t('请扫描条形码')"
	  @iconClick="scanCode"
	  @confirm="searchCode"
	  @submit="keyword=$event;searchCode()"
	  ></scanlistener>
    </view>

    <view class="scroll">
      <view class="list-header">
        <view class="title">{{$t('状态')}}</view>
        <view class="checkbox-wrap">
          <picker @change="change" :value="selectStatus" :range="selectStatusRange" range-key="text">
            <view class="picker">{{ selectStatusRange[selectStatus] ? selectStatusRange[selectStatus].text : $t("请选择") }}</view>
          </picker>
        </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 ${cabinetIds.includes(v.id) ? 'red-header' : ''}`">
              <view>{{$t('自编号')}} {{ v.selfNo }}</view>
            </view>
            <view class="item-content">
              <view>
                <view>{{$t('方数')}}（{{$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('计划')}}/{{$t('实装')}}）：{{ v.boxStatistics.weight }}/{{ v.boxStatistics.loadWeight }}</view>
                <view>{{$t('目的地')}}：{{ v.destWarehouseResp.titleZh }}</view>
              </view>
              <view>
                <view>{{$t('计划数')}}/{{$t('实装数')}}：{{ v.boxStatistics.num }}/{{ v.boxStatistics.loadNum }}</view>
                <view>{{$t('状态')}}: {{ getLdStatusLabel(v.ldStatus) }}</view>
              </view>
            </view>
          </view>
        </uni-card>
        <uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
      </view>
    </view>
  </view>
</template>

<script>
import * as types from "../../store/mutations-types.js";
import { uniLoadMore } from "@dcloudio/uni-ui";
import { getLoadingList } from "./api";
import { defaultPageSize } from "../../util/config.js";

export default {
  name: "loading-list",
  components: { uniLoadMore },
  data() {
    return {
      keyword: "",
      selectStatus: 0,
      selectStatusRange: [
        { value: 0, text: this.$t("全部") },
        { value: 1, text: this.$t("待装柜") },
        { value: 3, text: this.$t("装柜中") },
        { value: 5, text: this.$t("封柜审批中") },
        { value: 7, text: this.$t("封柜审批通过") },
      ],
      listData: [],
      page: 1,
      status: "more",
      contentText: {
        contentdown: this.$t("上拉加载更多"),
        contentrefresh: this.$t("加载中"),
        contentnomore: this.$t("没有更多"),
      },
      // 封柜ids
      cabinetIds: [],
    };
  },
  methods: {
    change(e) {
      this.selectStatus = e.detail.value;
      this.page = 1;
      this.getData();
    },
    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, //this.$refs.scanInput && this.$refs.scanInput.$el.getElementsByTagName('input')[0].value, //
        status:
          this.selectStatus === 0
            ? ""
            : this.selectStatusRange[this.selectStatus].value,
      };
      getLoadingList(params).then((data) => {
        // 第一页清空数据
        if (this.page == 1) {
          this.listData = [];
          this.cabinetIds = [];
        }
        const { list } = data;

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

        uni.stopPullDownRefresh();
        // 封柜审核成功
        let ids = [];
        list.forEach(function (val, index, arr) {
          // 46、封柜审核成功
          if (val.ldStatus == 46) {
            ids.push(val.id);
          }
        });
        if (ids.length) {
          this.$store.dispatch(types.SHOW_ALERT, {
            msg: this.$t("有柜子已通过封柜审批，请及时跟进处理"),
          });
        }
        this.cabinetIds = this.cabinetIds.concat(ids);
      });
    },
    toDetail(row) {
      uni.navigateTo({
        url: "./detail?id=" + row.id,
      });
    },
    getLdStatusLabel(ldStatus) {
      // 41、未装柜；42、装柜中；43、已装柜、待封柜；44、封柜审核中；45、封柜审核失败；46、封柜审核成功
      switch (ldStatus) {
        case 41:
          return this.$t("待装柜");
        case 42:
        case 43:
          return this.$t("装柜中");
        case 44:
          return this.$t("封柜审核中");
        case 45:
          return this.$t("封柜审核失败");
        case 46:
          return this.$t("封柜审核成功");
        default:
          return "/";
      }
    },
  },
  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;
  },
};
</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;
  }
}
.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>
