<template>
  <div class="popup_box" :style="{ marginTop: p_top + 'px' }" v-if="showPopup" @click="onHide" @touchmove.prevent>
    <div class="detail_box">
      <div v-for="(item, index) in list" :key="index" class="other_type_box">
        <div class="other_type_title">{{ item.label }}</div>
        <van-field v-if="item.type == 'input'" v-model="queryForm[item.key]" label="" :placeholder="item.placeholder" input-align="left"/>
        <!-- showSolt 是否自定义插槽  SoltName:名字-->
        <template v-if="item.showSolt">
          <slot :name="item.SoltName"></slot>
        </template>
      </div>
      <div class="but_box">
        <van-button round block type="primary" size="small" @click.stop="onConfirm" style="margin: 0 3vw 0 0vw">确定</van-button>
        <van-button round block type="warning" size="small" @click.stop="onReset" style="margin: 0 0 0 3vw">重置 </van-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, defineEmits, watch } from "vue";
import { dateFormat } from "../utils/tools.js";
import store from "../store/index.js";
import { hintToast } from "../utils/tools.js";
const props = defineProps({
  showPopup: Boolean, //是否显示
  list: Array, //其余赛选条件
  p_top: Number, //距离顶部的内填充距离
});
const queryForm = ref({})
const emits = defineEmits(["update:close", 'reset', "update:onConfirm"]);

//关闭
function onHide() {
  emits("update:close", false);
}
//确认选中数据
function onConfirm() {
  const list = JSON.parse(JSON.stringify(props.list));
  let array = [];
  //筛选出按时间的筛选条件
  for (let i = 0; i < list.length; i++) {
    if (list[i].title != "按时间") {
      array.push(list[i]);
    }
  }
  emits("update:onConfirm", queryForm.value);
  emits("update:close", false);
}
//重置选项
function onReset() {
  queryForm.value = {}
  emits('reset')
}
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";

.popup_box {
  @include font_size($font_medium_s);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

.detail_box {
  background: #fff;
  padding: 4vw 0;
}

.other_type_box,
.time_box,
.but_box {
  padding: 0 3vw;
}

.but_box {
  display: flex;
  align-items: center;
  color: #fff;
  margin-top: 4vw;
}

.van-cell{
  background-color: #e8eeff;
  margin: 1vw 0;
  border-radius: 2vw;
  padding: 6px 16px;
}

// .time_box {
//   display: flex;
//   margin-bottom: 4vw;

//   .relevance {
//     position: relative;
//     bottom: 0;
//     line-height: 33.5px;
//     margin: 0 2.5vw;
//   }
// }

// .other_type_box {
//   margin-bottom: 2vw;

//   .tag_item {
//     padding: 1vw 3vw;
//     margin: 0 3vw 3vw 0;
//     border-radius: 5px;
//   }
// }

// .other_type_title {
//   margin-bottom: 2vw;
//   @include font_size($font_medium);
// }

// ::v-deep .van-cell {
//   padding: 0;
// }

// ::v-deep .van-field__body {
//   border: 1px solid #507ce9;
//   border-radius: 5px;
//   padding: 1vw;
//   //   margin: 0 2vw;
// }

// .isChecked {
//   border: 1px solid #507ce9;
// }
</style>
