<!--
 * @Date: 2024-07-23 16:24:08
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-07-23 17:50:18
 * @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue
 * @Description: 选择物资组件
-->
<template>
  <div class="choose-material-page">
    <van-popup
      v-model:show="showBottom"
      position="bottom"
      closeable
      @close="onClose"
      :style="{ height: '100%' }"
    >
        <van-sticky  :offset-top="-33">
      <div style="margin-top: 2rem; background-color: white;">
          <div style="padding: 1rem;">
            <van-row gutter="10" justify="center" align="center">
              <van-col span="16">
                <div style="background-color: #FBF9F1; display: flex; border-radius: 5rem; padding: 0 1rem; align-items: center; justify-content: center;">
                  <van-icon name="search" /><van-field v-model="value" label="" placeholder="搜索物资" style="background-color: #FBF9F1;" />
                </div>
              </van-col>
              <van-col span="8">
                <div @click="showType" style="border-radius: 8px; border: 1px solid #DBDBDB; padding: 0.5rem 0 0.5rem 1rem; font-size: 0.9rem; color: #B4B4B4;">
                  物资分类&nbsp;&nbsp;
                  <van-icon name="arrow-down" color="#A67939" />
                </div>
              </van-col>
            </van-row>
          </div>
      </div>
        </van-sticky>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="item in list" :key="item" >
          <van-row justify="space-around" align="center" style="padding: 1rem; background-color: #F2F2F2;">
            <van-col span="8"><van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<span :style="{ color: styleColor.baseColor }">全选</span></van-col>
            <van-col span="8" style="text-align: center; font-size: 0.95rem; color: #666666; font-weight: bold;">物资分类1</van-col>
            <van-col span="8"></van-col>
          </van-row>
          <van-row align="center" justify="space-between" style="">
            <van-col span="24" style="display: flex; padding: 1rem; border-bottom: 1px solid #F5F5F5;">
              <van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">床垫 1.2m*2m</div>
            </van-col>
            <van-col span="24" style="display: flex; padding: 1rem; border-bottom: 1px solid #F5F5F5;">
              <van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">床垫 1.2m*2m</div>
            </van-col>
          </van-row>
        </div>
      </van-list>
      <div style="height: 6rem;"></div>
      <div class="control-bar">
        <van-button plain block type="primary" :color="styleColor.baseColor" @click="addMore">加入购物车</van-button>
        <div style="display: flex; align-items: center; margin-left: 1rem;">
          <van-badge :content="5">
            <van-icon name="shopping-cart-o" size="2.5rem" :color="styleColor.baseColor" @click="goShoppingCart" />
          </van-badge>
        </div>
      </div>
      <van-back-top class="custom" bottom="12vh"  z-index="9999">返回顶部</van-back-top>

      <van-dialog v-model:show="show_type" title="请选择筛选分类" @confirm="onConfirm" show-cancel-button :confirm-button-color="styleColor.baseColor">
        <div style="padding: 1rem;">
          <van-checkbox-group v-model="type_checked" shape="square" :checked-color="styleColor.baseColor">
            <van-checkbox name="a" style="margin-bottom: 0.5rem;">复选框 a</van-checkbox>
            <van-checkbox name="b" style="margin-bottom: 0.5rem;">复选框 b</van-checkbox>
          </van-checkbox-group>
        </div>
      </van-dialog>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { styleColor } from "@/constant.js";

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const props = defineProps({
  show: Boolean,
});
const emit = defineEmits(['close']);

const showBottom = ref(false);

onMounted(() => {
});

// 监听字段变化
watch(
  () => props.show,
  (v) => {
    showBottom.value = v;
  }
);

const onClose = () => {
  emit('close');
}

const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onClickTitle = (item) => { // 点击物资标题回调
  console.warn(item);
}

const show_type = ref(false);
const showType = () => {
  show_type.value = true;
}
const type_checked = ref([]);
const onConfirm = () => {
  console.warn(type_checked.value);
}
</script>

<style lang="less">
.choose-material-page {
  .control-bar {
    display: flex; position: fixed; padding: 1rem 1.5rem; left: 0; right: 0; bottom: 0; background-color: white; width: calc(100% - 3rem); justify-content: space-between; align-items: center; box-shadow: 0rem -0.33rem 0.33rem 0.08rem rgba(0,0,0,0.06);
  }
}

.custom {
  width: 80px;
  font-size: 14px;
  text-align: center;
  background-color: #A67939;
}
</style>