<template>
  <van-popup v-model:show="showPopup" position="bottom" round
    :style="{ maxHeight: '70%', width: '98%', marginLeft: '1%' }">
    <div class="popup-container">
      <div class="popup-header" v-if="props.title && props.type == 'list'">
        <div class="popup-title">{{ props.title }}</div>
      </div>
      <!-- 列表选择 -->
      <div class="popup-list" v-if="props.type == 'list'">
        <van-empty v-if="!listData.length" :description="emptyText"  />
        <template v-else>
          <van-cell v-for="(item, index) in listData" :key="index" :title="item[titleKey]"
            @click="handleItemClick(item)" clickable>
            <template #right-icon>
              <van-checkbox v-if="multiple" :checked="isSelected(item)" />
            </template>
          </van-cell>
        </template>
      </div>

      <div class="popup-footer" v-if="props.type == 'list'">
        <span class="btn" @click="showPopup = false">取消</span>
        <span class="gapline" v-if="multiple"></span>
        <span class="btn" v-if="multiple" @click="handleConfirm">确认 {{ selectedItems.length }}</span>
      </div>

      <!-- 时间选择 -->
      <van-datetime-picker v-if="props.type === 'datetime'" v-model="currentDate" type="datetime" title="选择日期"
        :min-date="minDate" :max-date="maxDate" :formatter="formatter" @confirm="handleDateConfirm"
        @cancel="showPopup = false" />
      <!-- 选择时间 -->
      <van-datetime-picker v-if="props.type === 'time'" v-model="currentTime" type="time" title="选择时间"
        @confirm="handleDateConfirm" @cancel="showPopup = false" />

      <!-- 日期选择 -->
      <van-datetime-picker v-if="props.type === 'date'" v-model="currentDate" type="date" @confirm="handleDateConfirm"
        @cancel="showPopup = false" :min-date="minDate" />

    </div>
  </van-popup>
</template>

<script setup>
import { timeValidate } from "@/utils/tools.js";
import { ref, computed, onMounted } from "vue";
const props = defineProps({
  // 弹窗展示
  show: {
    type: Boolean,
    default: false,
  },
  // 接受的数据
  listData: {
    type: Array,
    default: () => [],
  },
  // 数据渲染字段
  titleKey: {
    type: String,
    default: "text",
  },
  // 标题
  title: {
    type: String,
    default: "",
  },
  // 是否多选
  multiple: {
    type: Boolean,
    default: false,
  },
  // 接受数据的类型 list 列表 date 日期 datetime 时间
  type: {
    type: String,
    default: "list",
  },
  // 空数据提示
  emptyText: {
    type: String,
    default: "暂无数据",
  },
});

const currentTime = ref();
const currentDate = ref(new Date());
const minDate = ref(new Date(2020, 0, 1));
const maxDate = ref(new Date(new Date().getFullYear() + 10, 11, 31));
const emit = defineEmits(["update:show", "select"]);

const formatter = (type, val) => {
  switch (type) {
    case "year":
      return `${val}年`;
    case "month":
      return `${val}月`;
    case "day":
      return `${val}日`;
    case "hour":
      return `${val}时`;
    case "minute":
      return `${val}分`;
    default:
      return val;
  }
};

const selectedItems = ref([]);

const showPopup = computed({
  get: () => props.show,
  set: (val) => emit("update:show", val),
});

const handleItemClick = (item) => {
  if (props.multiple) {
    const index = selectedItems.value.findIndex(
      (i) => i[props.titleKey] === item[props.titleKey]
    );
    if (index > -1) {
      selectedItems.value.splice(index, 1);
    } else {
      selectedItems.value.push(item);
    }
  } else {
    emit("select", item);
    showPopup.value = false;
  }
};

const isSelected = (item) => {
  return selectedItems.value.some(
    (i) => i[props.titleKey] === item[props.titleKey]
  );
};

const handleConfirm = () => {
  emit("select", selectedItems.value);
  showPopup.value = false;
  selectedItems.value = [];
};


// 时间选择
const handleDateConfirm = (value) => {
  if (props.type === "date") {
    emit("select", { value: timeValidate(value, "ymd") });
  } else if (props.type === "datetime") {
    emit("select", { value:  timeValidate(value) });
  } else {
    emit("select", { value: value });
  }
  showPopup.value = false;
};



//选择器字段
onMounted(() => {
});
</script>

<style scoped lang="scss">
.popup-container {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.popup-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.popup-title {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.popup-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  background: rgba(0, 0, 0, 0.5);
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}

.popup-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(183, 288, 231, 0.1);

  .btn {
    flex: 1;
    text-align: center;
    font-size: 14px;
  }

  .gapline {
    width: 2px;
    height: 30px;
    background: #eee;
    margin: 0 10px;
  }
}

.van-cell {
  text-align: center;
}

::v-deep .van-cascader {
  height: 370px;
  overflow: hidden;
}

::v-deep .van-tabs__track {
  height: 320px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
