<template>
  <view style="background: #fff; min-height: calc(100vh - 44px)">
    <view class="search-header">
      <!-- <uni-search-bar class="uni-mt-10" @confirm="search" placeholder="请输入订单号" radius="100" v-model="keyword" cancelButton="none" clearButton="none" ></uni-search-bar> -->
      <scanlistener
          v-if="showScanlistener"
          suffixIcon="scan"
          v-model="keyword"
          :placeholder="$t('请扫描订单号')"
          @iconClick="scanCode"
          @confirm="search"
          @submit="keyword=$event;search()"
      ></scanlistener>
      <!-- <text class="cuIcon-scan" style="font-size: 21px;" @click="scanCode"></text> -->
    </view>

    <view class="scroll">
      <view class="list-row list-header">
        <view class="">{{ $t('快递单号') }}</view>
        <view class="">{{ $t('编号') }}</view>
        <view class="">{{ $t('客户编号') }}</view>
        <view class="">{{ $t('库位') }}</view>
        <view class="">{{ $t('状态') }}</view>
      </view>
      <view>
        <view v-for="(v, key) in listData" :class="{'list-row': true, 'row-bg' : key % 2 === 0}" :key="key"
              @tap="toDetail(v)">
          <view class="">
            {{ v.expressNo }}
            <view class="red-badge-wrap" v-if="!!v.advanceType">
              <template v-for="(item, i) in specialRendering(v.advanceType)">
                <text class="red-badge">S</text>
              </template>
            </view>
          </view>
          <view class="">{{ v.consNum }}</view>
          <view class="">{{ v.customerNumber }}</view>
          <view class="">
            <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="v.transportId"/>
          </view>
          <view class="">
            <dict-tag :type="DICT_TYPE.CONS_STATUS" :value="v.status"/>
          </view>
        </view>
        <uni-load-more :status="status" :icon-size="16" :content-text="contentText"/>
      </view>
    </view>

  </view>
</template>

<script>

import {consPage} from "@/api/cons";

export default {
  name: "cons-list",
  data() {
    return {
      page: 1,
      listData: [],
      status: 'more',
      keyword: '',
      contentText: {
        contentdown: this.$t('上拉加载更多'),
        contentrefresh: this.$t('加载中'),
        contentnomore: this.$t('没有更多')
      },
    };
  },
  created() {
    this.getData(this.keyword);
  },
  methods: {
    scanCode() {
      uni.scanCode({
        success: (res) => {
          this.keyword = res.result
        }
      })
    },
    getData(keyword) {
      let that = this
      const params = {
        page: this.page,
        rows: 20
      }
      consPage(params).then(res => {
        const data = res.list
        if (that.page == 1) this.listData = [];

        if (data.length > 0) {
          that.listData = that.listData.concat(data);
          that.status = 'more';
        }
        if (res.total === that.listData.length) that.status = 'noMore';
        uni.stopPullDownRefresh();
      });
    },
    search() {

      // this.page = 1
      // setTimeout(() => {
      //   this.getData(this.keyword)
      // }, 100)
    },
    onPullDownRefresh() {
      this.search()
    },
    onReachBottom() {
      if (this.status == 'more') {
        this.status = 'loading';
        this.page++;
        this.getData();
      }
    },
    toDetail() {
      uni.navigateTo({
        url: '/pages/cons/components/createCons?orderId=1'
      });
    }
  }
};
</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-row {
    display: flex;
    align-items: center;
    // line-height: 24px;
    padding: 8px 0;

    view {
      flex: 1;
      text-align: center;
    }
  }

  .list-header {
    font-weight: bold;
  }

  .row-bg {
    background: #ebebed;
  }

  // .red-badge-wrap{
  //   position: absolute;
  //   right: -34upx;
  //   top: -26upx;
  // }
  .red-badge {
    display: inline-block;
    // background-color: #dd514c;
    color: #d9001c;
    // font-size: 24upx;
    // width: 30upx;
    // height: 30upx;
    // line-height: 30upx;
    // vertical-align: middle;
    // border-radius: 30upx;
    // margin-left: 2upx;
    /* transform: scale(0.9); */
  }
}
</style>
