<template>
  <view class="goodsPage">
    <view class="searchBox flex-between">
      <input type="text" class="input" placeholder="请输入商品名称搜索" />
      <view class="addBox">
        <u-icon name="add-o" style="margin-right: 10rpx"></u-icon>
        添加商品
      </view>
    </view>
    <view class="tabbox">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <view
      style="
        height: calc(100vh - 50px);
        width: calc(100vw);
        overflow: hidden;
        padding-bottom: 20px;
      "
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        :style="{ height: '100%' }"
      >
        <goodsItem />
      </scroll-view>
    </view>
    <tabbar></tabbar>
  </view>
</template>
<script>
import tabbar from "./components/tabbar.vue";
import goodsItem from "./components/goodsItem.vue";
export default {
  components: {
    goodsItem,
    tabbar,
  },
  data() {
    return {
      list: [
        {
          name: "出售中",
        },
        {
          name: "下架中",
          count: 5,
        },
      ],
      current: 0,
      msg: {
        pageIndex: 1,
        pageSize: 15,
        OrderId: 0,
        OrderType: 0,
        DeliveryMethod: 0,
        StartTime: "",
        EndTime: "",
        OrderStatus: 0,
        OrderNo: "",
      },
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.init();
      } else {
        this.status = "nomore";
      }
    },
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "商品管理",
    });
  },
};
</script>
<style lang="scss" scoped>
.goodsPage {
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding-bottom: 100rpx;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.searchBox {
  width: 100%;
  height: 80rpx;
  padding: 0 40rpx;
  .input {
    width: 420rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #fff;
    padding: 0 20rpx;
    font-size: 26rpx;
  }
  .addBox {
    width: 180rpx;
    height: 58rpx;
    border-radius: 29rpx;
    background-color: #fff;
    border: 2rpx solid #446dfc;
    color: #446dfc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
  }
}
.tabbox {
  margin-bottom: 10rpx;
}
</style>