<!-- 选择材料信息 -->
<template>
  <view class="selectBlank">
    <view class="search_input">
      <tui-input v-model="search.material_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>
    <infiniteScroll ref="infiniteScroll"
                    :fetchItems="fetchItems"
                    :hasMore="hasMore">
      <view class="card"
            :class="{ selected: isSelect(item) }"
            v-for="(item, index) in list"
            :key="index"
            @click="navigateTo(item)">
        <text>{{ item.material_name }}</text>
        <text>{{ item.material_model }}</text>
      </view>
    </infiniteScroll>
  </view>
</template>
<script>
import infiniteScroll from "@/components/infiniteScroll/infiniteScroll.vue";
export default {
  components: { infiniteScroll },
  data() {
    return {
      list: [],
      pageSize: 20,
      hasMore: true,
      fetchUrl: "",
      search: {
        material_name: "",
      },
      formData: {
        materials: [],
      },
      DispatchmaterialBool: false,
      hidden: [],
    };
  },
  created() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("acceptDataFromOpenerPage", (model) => {
      this.fetchUrl = model.url;
      console.log("获取到接受数据", model);
    });
  },
  methods: {
    isSelect(item) {
      if (!!item.order_id) {
        return this.formData.materials.some(
          (item2) => item2.material_info.order_id === item.order_id
        );
      } else {
        return this.formData.materials.some(
          (item2) => item2.material_info.material_code === item.material_code
        );
      }
    },
    findSelectMaterialFormData(item) {
      return this.formData.materials.find(
        (item2) => item2.material_info.material_code === item.material_code
      );
    },
    getFetchUrl() {
      let routes = getCurrentPages();
      this.DispatchmaterialBool =
        routes[routes.length - 1]?.options?.DispatchmaterialBool;
      return "common/Materials";
    },
    async fetchItems() {
      const { data } = await this.$request.get(this.getFetchUrl(), {
        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() {
      uni.navigateBack({
        success: () => {
          const eventChannel = this.getOpenerEventChannel();
          eventChannel.emit("back", {
            formData: this.formData,
          });
        },
      });
    },
    navigateTo(selectedMaterial) {
      let url;
      if (this.isSelect(selectedMaterial)) {
        url = "/pages/template/materialDispatcher/incomeAndSend/EditMaterial";
      } else {
        if (this.DispatchmaterialBool) {
          url = `/pages/template/materialDispatcher/incomeAndSend/RecordMaterial?DispatchmaterialBool=${true}`;
        } else {
          url = `/pages/template/materialDispatcher/incomeAndSend/RecordMaterial`;
        }
      }
      uni.navigateTo({
        url,
        events: {
          //得到返回的信息
          createMaterial: ({ formData, material }) => {
            this.formData.materials.push({
              material_info: material,
              ...formData,
            });
          },
          updateMaterial: ({ formData }) => {
            const materialFormData = this.findSelectMaterialFormData(
              formData.material_info
            );
            Object.assign(materialFormData, formData);
          },
          deleteMaterial: ({ materialInfo }) => {
            this.formData.materials = this.formData.materials.filter(
              (item) => item.material_info.id !== materialInfo.id
            );
          },
        },
        success: (e) => {
          e.eventChannel.emit("acceptDataFromOpenerPage", {
            material: selectedMaterial,
            materialFormData: this.findSelectMaterialFormData(selectedMaterial),
            hidden: this.hidden,
          });
        },
      });
    },
  },
  onReachBottom() {
    this.$refs.infiniteScroll.reachBottom();
  },
};
</script>
<style lang="scss" scoped>
.selectBlank {
  .info {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(81, 121, 239, 0.9);
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
  }

  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #fff;
    border-radius: 5px;
    align-items: center;
    padding: 15px;
    gap: 10px 0;

    .materialName {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    .unit {
      text-align: right;
    }
  }

  .search_input {
    box-sizing: border-box;
    // position: fixed;
    z-index: 2;
    // top: 0;
    width: 100%;
    padding: 15rpx;
    background-color: rgb(81, 121, 239);
  }

  .card {
    margin: 20rpx !important;
    position: relative;

    &.selected {
      box-shadow: 0 0 2px green;

      &::after {
        content: "✔️";
        display: block;
        position: absolute;
        right: 10rpx;
        top: 10rpx;
        font-size: 12px;
      }
    }
  }

  .footer {
    font-size: 16rpx;
    color: #999;
    padding: 22rpx;
  }
}
</style>
