<template>
  <view class="selectBlank">
    <view class="search_input">
      <tui-input v-model="search.name"
                 placeholder="请输入材料名称检索"
                 clearable
                 isFillet
                 confirm-type="search"
                 @confirm="doSearch">
        <template #left>
          <tui-icon name="search"
                    :size="20"
                    margin="0 15px 0 0"></tui-icon>
        </template>
      </tui-input>
    </view>
    <!-- 无限滚动容器，实现滚动加载，12个地方复用 -->
    <infiniteScroll ref="infiniteScroll"
                    :fetchItems="fetchItems"
                    :hasMore="hasMore">
      <view class="card"
            v-for="(item, index) in list"
            :key="index"
            @click="doSelect(item)">
        <view>
          <text>材料名称： {{ item.material_info.material_name}}</text>
        </view>
        <!-- <text>{{ item.material_info.material_name}}</text> -->
        <!-- <text>{{ item.material_info.material_name.split(" ")[0] }}</text> -->
        <view class="item">
          <text>规格型号：{{ item.material_info.material_model }}</text>
          <text>单位：{{ item.material_info.material_unit }}</text>
        </view>

      </view>
    </infiniteScroll>
  </view>
</template>
<script>
import infiniteScroll from "../../../components/infiniteScroll/infiniteScroll.vue";
export default {
  components: { infiniteScroll },
  data() {
    return {
      list: [],
      pageSize: 20,
      hasMore: true,
      selections: [],

      fetchUrl: "concrete/materials",
      search: {
        name: "",
        parent_name: "",
      },
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    doSelect(item) {
      this.navigateBack(item);
    },
    async fetchItems() {
      const { data } = await this.$request.get(this.fetchUrl, {
        params: {
          ...this.search,
          page: Math.ceil(this.list.length / this.pageSize) + 1,
          limit: this.pageSize,
        },
      });
      this.list = [...this.list, ...data.data];
      if (data.data.length < this.pageSize) {
        this.hasMore = false;
      }
    },
    async reload() {
      this.hasMore = true;
      this.list = [];
      await this.fetchItems();
    },
    async doSearch() {
      this.reload();
    },
    navigateBack(item) {
      uni.navigateBack({
        success: () => {
          const eventChannel = this.getOpenerEventChannel();
          eventChannel.emit("back", item);
        },
      });
    },
  },
  // uniapp触底钩子函数
  onReachBottom() {
    // this.$refs.infiniteScroll.reachBottom();
    if (!this.hasMore) return;
    this.fetchItems();
  },
  // 向起始页通过事件传递数据
  onLoad: function () {
    const eventChannel = this.getOpenerEventChannel();
    // eventChannel.emit("acceptDataFromOpenedPage", { data: "data from test page" });
    // eventChannel.emit("someEvent", { data: "data from test page for someEvent" });
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on("acceptDataFromOpenerPage", (data) => {
      uni.setNavigationBarTitle({
        title: data.navigationBarTitleText,
      });
      this.inputProps = data.inputProps;
      this.cardProps = data.cardProps;
      this.fetchUrl = data.fetchUrl;
      this.onRowClick = data.onRowClick ?? (() => {});
    });
  },
};
</script>
<style lang="scss" scoped>
// .card {
//     display: grid;
//     grid-template-columns: 160rpx 2fr 160rpx 2fr;
//     background-color: #fff;
//     border-radius: 5px;
//     align-items: center;
//     padding: 15px;
//     gap: 10px 0;
// }

.card {
  width: 95vw;
  margin-bottom: 10rpx;
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
  .item {
    display: flex;
    margin-top: 25rpx;
    text {
      flex: 1;
    }
  }
}

.selections {
  background-color: #fff;
  padding: 10px;
  font-size: 12px;
  display: flex;
  .select_title {
    display: flex;
  }
  .divider {
    width: 4px;
    background-color: blue;
    margin: 0 10px;
    border-radius: 999px;
  }
  .pleaseChoose {
    color: red;
    padding-bottom: 1px;
    border-bottom: 2px solid red;
  }
}
.selectBlank {
  .search_input {
    padding: 15rpx;
    background-color: rgb(81, 121, 239);
  }
  .card {
    margin: 20rpx !important;
  }
  .footer {
    font-size: 16rpx;
    color: #999;
    padding: 22rpx;
  }
}
</style>
