<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">
      <tui-list-view color="#777">
        <tui-list-cell v-for="(item,index) in list"
                       :key="index"
                       @click="doSelect(item)">
          <view class="list-item">
            材料名称:
            <span>{{item.material_name}}</span>
          </view>
          <view class="list-item">
            材料编码:
            <span>{{item.material_code}}</span>
          </view>
          <view class="list-item">
            材料名称:
            <span>{{item.material_num}}</span>
          </view>

        </tui-list-cell>
      </tui-list-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: "materialBasicdata/CommonMaterial/get",
      addPath: "/pages/template/materialBasicdata/commonMaterial/add",
      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 = [];
      this.$refs.infiniteScroll.loadMore();
    },
    async doSearch() {
      this.reload();
    },
    navigateBack(item) {
      // 跳转页面
      let _this = this;
      uni.navigateTo({
        url: _this.addPath,
        success: (res) => {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit("back", {
            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,
      });
      console.log("材料表:----data--", data);
      this.inputProps = data.inputProps;
      this.cardProps = data.cardProps;
      this.fetchUrl = data.fetchUrl;
      this.addPath = !!data?.addPath ? data.addPath : this.addPath;
      this.onRowClick = data.onRowClick ?? (() => {});
    });
  },
};
</script>
<style lang="scss" scoped>
.tui-list-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 20rpx auto;
  height: 200rpx;
  border-radius: 20rpx;
}

.list-item {
  font-size: $uni-font-size-sm;

  span {
    margin-left: 20rpx;
  }
}
.card {
  display: grid;
  grid-template-columns: 160rpx 2fr 160rpx 2fr;
  background-color: #fff;
  border-radius: 5px;
  align-items: center;
  padding: 15px;
  gap: 10px 0;
}
.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>
