<!-- 部位选择 -->
<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>
    <view class="selections">
      <view v-for="(item, index) in selections"
            class="select_title"
            :key="index"
            @click="clickBackSelections(item, index)">
        <text>{{ item.name }}</text>
        <view v-if="index !== selections.length - 1"
              class="divider"></view>
      </view>
      <view class="divider"></view>
      <text class="pleaseChoose">请选择</text>
    </view>
    <!-- 无限滚动容器，实现滚动加载，12个地方复用 -->
    <infiniteScroll ref="infiniteScroll"
                    :fetchItems="fetchItems"
                    :hasMore="hasMore">
      <view class="card"
            v-for="(item, index) in list"
            :key="index"
            @click="doSelect(item)">
        <tui-tag v-if="item.is_leaf"
                 padding="8rpx"
                 size="24rpx">核</tui-tag>
        <text>{{ item.name }}</text>
      </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/usePart",
      search: {
        name: "",
        parent_name: "",
        usedpart_wbs: "",
      },
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    //点击路径返回相应的操作
    clickBackSelections(item, index) {
      console.log("路径返回!");
      if (this.selections.length == index + 1) return;
      // this.selections.push(item);
      this.selections = this.selections.slice(0, index + 1);
      this.search.parent_name = item.name;
      this.search.usedpart_wbs = item.usedpart_wbs;
      this.reload();
    },
    //部位的点击操作
    doSelect(item) {
      this.search.name = ""; //点击操作时清搜索内容
      // console.log("我在点击:", item.is_leaf);
      if (!item.is_leaf) {
        if (this.selections.length == 0 && item.full_name.indexOf("\\") >= 0) {
          let nodeArr = item.full_name.split("\\");
          nodeArr.forEach((element, index) => {
            nodeArr[index] = { name: element };
          });
          this.selections.push(...nodeArr);
        }
        this.selections.push(item);
        this.search.parent_name = item.name;
        this.search.usedpart_wbs = item.usedpart_wbs;
        this.reload();
      } else {
        this.navigateBack({ ...item, selections: [...this.selections, 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();
      this.hasMore = true;
      this.list = [];
      // console.log("this.search:", this.search);
      this.selections = []; //将选择情空
      this.search.parent_name = "";
      this.search.usedpart_wbs = "";
      if (!this.search.name) {
        this.reload();
        return;
      }
      //搜索和正常层级进入是两种接口
      const { data } = await this.$request.get("concrete/usePart/search", {
        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;
      }
    },
    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) => {
      console.log("向其起始页面 传递数据");
      console.log("传递数据为:", 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: flex;
  background-color: #fff;
  border-radius: 5px;
  align-items: center;
  padding: 7px 10px;
  gap: 10px;
}
.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>
