<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view
    class="Mall4j component-select-popup"
    @touchmove.stop.prevent="moveHandle"
  >
    <view
      class="mask"
      @tap="cancal"
    />
    <view class="content-box">
      <view class="title">
        <text>{{ $t('xuanZeZhanShiShiJian') }}</text>
        <view
          class="close"
          @tap="cancal"
        />
      </view>
      <view>
        <view
          v-for="item in selectList"
          :key="item.value"
          class="item"
        >
          <view>
            <text class="item-title">
              {{ item.label }}
            </text>
            <text
              v-if="item.value === 1 || item.value === 2"
              class="item-date"
            >
              （{{ time(item.dateRange[0]) }} - {{ time(item.dateRange[1]) }}）
            </text>
            <text
              v-if="item.value === 3 || item.value === 4"
              class="item-date"
            >
              （{{ time(item.dateRange[0]) }}）
            </text>
          </view>
          <view
            class="check"
            :class="{ select: selectTst === item.value }"
            @tap="handleSelect(item)"
          />
        </view>
      </view>
      <view class="footer">
        <view
          class="btn"
          @tap="submitData"
        >
          {{ $t('queDing') }}
        </view>
      </view>
    </view>
    <date-popup
      v-if="showDatePopup"
      :type="datePopupType"
      :vaule="datePopupVal"
      :check-past="true"
      @handle-date="handleDate"
      @cancal="closeDatePopup"
    />
  </view>
</template>

<script setup>
import { reactive } from 'vue'
import dayjs from 'dayjs'

const emit = defineEmits(['cancal', 'submitData', 'handleSelectDate'])

const props = defineProps({
  /**
   * 数据格式 { name: 显示的按钮, value:唯一标识符 }
   */
  data: {
    type: Array,
    default () {
      return []
    }
  },
  /**
   * 回显的数据
   */
  value: {
    type: Object,
    default () {
      return {}
    }
  },
  /**
   * 自然日选择的判断显示
   */
  natureDayShow: {
    type: Boolean,
    default: false
  }
})
// eslint-disable-next-line vue/no-setup-props-destructure
const selectTst = ref(props.value.value)
const selectList = reactive([
  {
    label: $t('jin_7Tian'),
    value: 1,
    dateRange: ['', '']
  },
  {
    label: $t('jin_30Tian'),
    value: 2,
    dateRange: ['', '']
  },
  {
    label: $t('ziRanRi'),
    value: 3,
    dateRange: ['']
  },
  {
    label: $t('ziRanYue'),
    value: 4,
    dateRange: ['']
  }
])
// 选择时间弹框
const showDatePopup = ref(false)
const datePopupType = ref('day') // day：自然日，month： 自然月
const datePopupVal = ref('')

onMounted(() => {
  initData()
})

const time = (value) => {
  if (value.length > 11) {
    return value.substring(0, 10)
  }
  return value
}
const initData = () => {
  if (props.natureDayShow) {
    selectList.splice(2, 1)
  }
  selectList.forEach((item) => {
    let startDay = null
    let endDay = null
    let month = null
    let day = null
    if (item.value === 1) {
      startDay = -7
      endDay = -1
    } else if (item.value === 2) {
      startDay = -30
      endDay = -1
    } else if (item.value === 4) {
      month = dayjs().startOf('month').format('YYYY-MM')
    } else if (item.value === 3 && props.value.value !== 3) {
      day = dayjs(new Date().getTime())
        .startOf('days')
        .format('YYYY.MM.DD HH:mm:ss')
      item.dateRange = [day]
    } else {
      return
    }
    if (item.value === 1 || item.value === 2) {
      // 开始时间
      const startTime = dayjs()
        .add(startDay, 'days')
        .startOf('days')
        .format('YYYY.MM.DD HH:mm:ss')
      // 结束时间
      const endTime = dayjs()
        .add(endDay, 'days')
        .endOf('days')
        .format('YYYY.MM.DD HH:mm:ss')

      item.dateRange = [startTime, endTime]
    }
    if (item.value === 4) {
      item.dateRange = [month]
    }
  })

  // 回显传过来的数据
  selectList.forEach(item => {
    if (item.value === props.value.value) {
      item.dateRange = JSON.parse(JSON.stringify(props.value.dateRange))
    }
  })
}
// 禁止滚动
const moveHandle = () => {

}
// 1:近七天 2：近30天
const handleSelect = (item) => {
  if (item.value === 4) {
    datePopupType.value = 'month'
    showDatePopup.value = true
    datePopupVal.value = item.dateRange[0]
  } else if (item.value === 3) {
    datePopupType.value = 'day'
    showDatePopup.value = true
    datePopupVal.value = item.dateRange[0]
  } else {
    selectTst.value = item.value
  }
}
// 取消弹框
const cancal = () => {
  emit('cancal')
}
const closeDatePopup = () => {
  showDatePopup.value = false
}
// 接收自然月-日的数据
const handleDate = (data) => {
  // console.log('handleDate', data)
  if (data.type === 'day') {
    const selectListItem = selectList.find(item => item.value === 3)
    selectListItem.dateRange = [data.data]
    selectTst.value = 3
  }
  if (data.type === 'month') {
    const selectListItem = selectList.find(item => item.value === 4)
    selectListItem.dateRange = [data.data]
    selectTst.value = 4
  }
  closeDatePopup()
}
const submitData = () => {
  const data = selectList.find(item => item.value === selectTst.value)
  emit('handleSelectDate', data)
}

</script>

<style lang="scss" scoped>
@import './select-date.scss';
</style>
