<template>
  <view class="s-wrapper" :style="{ borderRadius: props.bdR, backgroundColor: bgColor }">
    <view class="s-screening">
      <block v-for="(v, i) in list" :key="v.value">
        <view class="s-scr-item" :class="{ selected: i == index }" @tap="onSelect(v, i)"> {{ v.text }} </view>
      </block>
    </view>
    <view class="theCustom" :class="{ customer: index === props.list.findIndex((v) => v.value == 'customer') }">
      <view class="time-picker">
        <xp-picker
          ref="star"
          @confirm="confirm"
          @cancel="emits('close')"
          @tap="isShow"
          mode="ymdhi"
          :startTime="time.startDate"
          >{{ time.startDate }}</xp-picker
        >
        <text></text>
        <xp-picker
          ref="end"
          @confirm="confirmEnd"
          @cancel="emits('close')"
          mode="ymdhi"
          @tap="isShow"
          :startTime="time.endDate"
          >{{ time.endDate }}</xp-picker
        >
      </view>
    </view>
  </view>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue"
import { getDay } from "@/util/timeInterval.js"
const time = ref({
  startDate: `${getDay(0, "-")} 00:00`,
  endDate: `${getDay(0, "-")} 23:59`,
})

const emits = defineEmits(["search", "open", "close"])
const props = defineProps({
  bdR: {
    type: String,
    default: "20rpx",
  },
  bgColor: { type: String },
  list: {
    type: Array,
    default: [
      // { value: 'all', text: '全部' },
      { value: "today", text: "今天" },
      { value: "yesterday", text: "昨天" },
      { value: "currMonth", text: "本月" },
      { value: "prevMonth", text: "上月" },
      { value: "customer", text: "自定义" },
    ],
  },
  index: {
    type: Number,
    default: 0,
  },
})
const star = ref(null)
const end = ref(null)
const scrInfo = ref(0)

const isOpen = ref(false)
const onSelect = (val, i) => {
  if (val.value != "customer") {
    emits("search", { val, i })
  } else {
    emits("search", {
      val: {
        text: "自定义",
        value: "customer",
        time: `customDate_${time.value.startDate}:00_${time.value.endDate}:00`,
      },
      i,
    })
    props.index = props.list.findIndex((v) => v.value == "customer")
    isOpen.value = true
  }
}

//时间选择器确定
const confirm = (e) => {
  time.value.startDate = e.value
  confirmEnd({ value: time.value.endDate })
  emits("close")
}
const confirmEnd = (e) => {
  time.value.endDate = e.value
  let i = props.list.findIndex((v) => v.value == "customer")
  emits("search", {
    val: {
      text: "自定义",
      value: `customDate_${time.value.startDate}:00_${time.value.endDate}:00`,
    },
    i,
  })

  emits("close")
}
const isShow = (e) => {
  if (star.value.pickerVisible || end.value.pickerVisible) {
    emits("open")
  } else {
    emits("close")
  }
}
// const endIsShow = () => {
//   if (end.value.pickerVisible) {
//     emits("open")
//   } else {
//     emits("close")
//   }
// }
</script>

<style lang="scss" scoped>
.s-wrapper {
  background: rgba(0, 0, 0, 0.1);
  padding: 20rpx 20rpx 20rpx 20rpx;
  .s-screening {
    display: flex;
    justify-content: space-between;
    .s-scr-item {
      padding: 20rpx;
      text-align: center;
      font-size: 28rpx;
      white-space: nowrap;
      border-radius: 7rpx;
      color: rgba(255, 255, 255, 0.7);
    }
    .selected {
      background-color: #fff;
      color: #7737fe;
    }
  }
  .theCustom {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in;
    .time-picker {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      padding: 0 30rpx;
      margin-top: 10rpx;
      background: #fff;
      font-size: 28rpx;
      border-radius: 7rpx;
      color: $primaryColor;

      text {
        width: 40rpx;
        height: 2rpx;
        background-color: $primaryColor;
      }
    }
  }
  .customer {
    height: 100rpx;
    transition: height 0.3s ease-in;
  }
}
</style>
