<template>
  <uni-drawer ref="drawer" mode="right" @change="change" :width="650">
    <view class="screen-wrapper">
      <JeepayCustomNavbar>
        <view class="screen-title">订单筛选</view>
      </JeepayCustomNavbar>
      <scroll-view scroll-y class="screen-main">
        <view class="time-wrapper">
          <view class="time-title" style="margin-top: 42rpx">时间</view>
          <view class="time-main">
            <block v-for="v in timeList" :key="v.value">
              <view class="time-item flex-center" :class="{ 'screen-active': v.value == vdata.selected }" @tap="vdata.selected = v.value">{{ v.text }}</view>
            </block>
          </view>
        </view>
        <view class="custom-wrapper" :class="{ 'custom-active': vdata.selected == 'custom' }">
          <view class="custom-time custom-top-time">
            <view class="custom-title">开始时间</view>
            <view class="custom-tips" :style="{ color: vdata.startTime ? '#000' : '' }" @tap="startTime.show()">{{ vdata.startTime?.slice(0, -3) || '请选择开始时间' }}</view>
            <image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
          </view>
          <view class="custom-time">
            <view class="custom-title">结束时间</view>
            <view class="custom-tips" :style="{ color: vdata.endTime ? '#000' : '' }" @tap="endTime.show()">{{ vdata.endTime?.slice(0, -3) || '请选择结束时间' }}</view>
            <image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
          </view>
        </view>
        <view class="screen-line" :class="{ 'custom-active-line': vdata.selected != 'custom' }"></view>
        <view class="state-wrapper">
          <view class="time-title">订单状态</view>
          <view class="state-main">
            <block v-for="(v, i) in stateList" :key="i">
              <view class="state-item flex-center" :class="{ 'screen-active': vdata.stateArray.includes(v.value) }" @tap="orderStateOrWayCode(v.value, 'stateArray')">{{
                v.text
              }}</view>
            </block>
          </view>
        </view>
        <view class="screen-line" style="margin-top: 30rpx"></view>
        <view class="pay-wrapper">
          <view class="time-title">支付方式</view>
          <view class="time-main">
            <block v-for="(v, i) in payList" :key="i">
              <view class="time-item flex-center" :class="{ 'screen-active': vdata.wayCodeArray.includes(v.value) }" @tap="orderStateOrWayCode(v.value, 'wayCodeArray')">{{
                v.text
              }}</view>
            </block>
          </view>
        </view>
      </scroll-view>

      <!-- 按钮部分 -->
      <view class="screen-button footer-button-style">
        <view class="button-rest" hover-class="touch-button" hover-stay-time="150" @tap="reset">重置</view>
        <view class="button-confirm" hover-class="touch-button" hover-stay-time="150" @tap="confirm">确认</view>
      </view>
    </view>
  </uni-drawer>
  <!-- 时间选择器 放在抽屉外面 否则选择器 大小受限 抽屉大小 -->
  <template v-if="vdata.flag">
    <xp-picker ref="endTime" mode="ymdhi" :history="true" @confirm="timeClick($event, 'endTime')"> <view></view></xp-picker>
    <xp-picker ref="startTime" mode="ymdhi" :history="true" @confirm="timeClick($event, 'startTime')"> <view></view> </xp-picker>
  </template>
</template>

<script setup>
import { reactive, ref, inject } from 'vue'
import { startAndEndTime } from '@/commons/utils/timeInspect'
import dayJs from 'dayjs'

// 搜索条件
let searchDataInject = inject('searchData')
let searchData = searchDataInject.value

let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc') 

// 搜索 函数
let refTableFunc = inject('refTableFunc')
// 选择开始时间
const startTime = ref(null)
// 选择结束时间
const endTime = ref(null)
const drawer = ref(null) //获取抽屉实例

const vdata = reactive({
  selected: 'today',
  stateArray: [2, 5],
  wayCodeArray: ['WECHAT', 'ALIPAY', 'YSFPAY', 'UNIONPAY', 'OTHER'],
  flag: false,
})
const timeList = reactive([
  { text: '全部', value: '' },
  { text: '今天', value: 'today' },
  { text: '昨天', value: 'yesterday' },
  { text: '近7天', value: 'near2now_7' },
  { text: '近30天', value: 'near2yesterday_30' },
  { text: '自定义', value: 'custom' },
])

const stateList = reactive([
  { text: '支付成功', value: 2 },
  { text: '已退款', value: 5 },
  { text: '支付失败', value: 3 },
  { text: '订单生成', value: 0 },
  { text: '支付中', value: 1 },
  { text: '已撤销', value: 4 },
  { text: '订单关闭', value: 6 },
])

const payList = reactive([
  { text: '微信支付', value: 'WECHAT' },
  { text: '支付宝', value: 'ALIPAY' },
  { text: '云闪付', value: 'YSFPAY' },
  { text: '银联', value: 'UNIONPAY' },
  { text: '其他', value: 'OTHER' },
])
const selected = reactive({
  time: 'custom',
})
const open = () => {
  drawer.value.open()
}
// e 抽屉打开为true 关闭为 false
const change = (e) => {
  if (changePageMetaOverflowFunc) {
    changePageMetaOverflowFunc(!e)
  }
  vdata.flag = true
  if (e) return uni.hideTabBar()
  uni.showTabBar()
  vdata.flag = false
}
// 时间选择器确认
const timeClick = (e, val) => {
  vdata[val] = dayJs(e.timestamp).format('YYYY-MM-DD HH:mm:ss')
}
// 数组通用处理 有则删除 否则添加
const orderStateOrWayCode = (value, key) => {
  // 如果存在值 删除
  if (vdata[key].includes(value))
    return vdata[key].splice(
      vdata[key].findIndex((v) => v == value),
      1
    )
  // 否则添加
  vdata[key].push(value)
}
// 重置
const reset = () => {
  vdata.selected = 'today'
  vdata.stateArray = [2, 5]
  vdata.wayCodeArray = payList.map((v) => v.value)
  vdata.endTime = ''
  vdata.startTime = ''
}

function confirm() {
  // 自定义 筛选时间校验
  if (vdata.selected == 'custom') {
    if (!startAndEndTime(vdata.startTime, vdata.endTime)) return
  }
  // 模拟修改搜索 条件。
  searchData.unionOrderState = vdata.stateArray.join(',')
  searchData.queryDateRange = vdata.selected == 'custom' ? `customDateTime_${vdata.startTime}_${vdata.endTime || ''}` : vdata.selected
  searchData.unionWayCodeType = vdata.wayCodeArray.join(',')
  // 刷新父页面
  refTableFunc()

  // 关闭 弹层
  drawer.value.close()
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.screen-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: $J-bg-ff;
  .screen-main {
    height: calc(100vh - 88rpx - 260rpx);
  }
}
.screen-title {
  margin-left: 15rpx;
  margin-right: 40rpx;
  white-space: nowrap;
  font-size: 33rpx;
  font-weight: 500;
}
.time-title {
  margin-left: 10rpx;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  font-weight: 500;
}
.time-wrapper {
  padding: 0 30rpx;
  margin-bottom: 10rpx;
}
.time-main {
  display: grid;
  grid-template-columns: repeat(3, 182rpx);
  grid-template-rows: repeat(2, 90rpx);
  grid-gap: 22rpx 22rpx;
  border: 3rpx solid transparent;
  .time-item {
    color: rgba(0, 0, 0, 0.75);
    font-size: 28rpx;
    background-color: $J-bg-f5;
    border-radius: $J-b-r10;
  }
}
.state-wrapper {
  padding: 0 30rpx;
  .state-main {
    display: grid;
    grid-template-columns: repeat(3, 182rpx);
    grid-template-rows: repeat(3, 90rpx);
    grid-gap: 22rpx 22rpx;
    border: 3rpx solid transparent;
    .state-item {
      height: 90rpx;
      color: rgba(0, 0, 0, 0.75);
      font-size: 28rpx;
      background-color: $J-bg-f5;
      border-radius: $J-b-r10;
    }
  }
}
.custom-wrapper {
  padding-left: 30rpx;
  height: 0;
  transition: 0.2s ease-in;
  overflow: hidden;
  .custom-time {
    display: flex;
    align-items: center;
    height: 110rpx;
    .custom-title {
      margin-right: 40rpx;
      color: rgba(0, 0, 0, 0.75);
      font-size: 28rpx;
    }
    .custom-tips {
      flex: 1;
      color: rgba(166, 166, 166, 1);
      font-size: 28rpx;
    }
    image {
      width: 110rpx;
      height: 110rpx;
    }
  }
  .custom-top-time {
    border-bottom: 1rpx solid #ededed;
  }
}
.custom-active {
  height: 220rpx;
  transition: 0.2s ease-in;
}
.pay-wrapper {
  padding: 0 30rpx;
  margin-bottom: 60rpx;
}
.screen-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  padding-bottom: 60rpx;
  height: 110rpx;
  view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110rpx;
    border-radius: 20rpx;
    font-size: 33rpx;
    font-weight: 500;
  }
  .button-rest {
    width: 260rpx;
    color: rgba(0, 0, 0, 0.5);
    background-color: #f7f7f7;
  }
  .button-confirm {
    flex: 1;
    margin: 0 60rpx 0 20rpx;
    color: #fff;
    background: $jeepay-bg-primary;
  }
}
.screen-active {
  color: $J-color-t29 !important;
  border: 3rpx solid #1a66ff !important;
  background: linear-gradient(270deg, rgba(35, 143, 252, 0.1) 0%, rgba(26, 102, 255, 0.1) 100%) !important;
}
.screen-line {
  height: 20rpx;
  margin-bottom: 30rpx;
  background-color: #f5f5f5;
}
.custom-active-line {
  margin-top: 20rpx;
}
.touch-button {
  opacity: 0.5;
}
</style>
