<template>
  <JPopup ref="popup">
    <JMainCard pd="0" wrapPd="30rpx">
      <ScreenTitle bgColor="#7737FE" :list="timeList" bdR="20rpx 20rpx 0 0" :index="timeIndex.i" @search="search" />
      <view class="screen-wrapper">
        <view class="src-main bgF">
          <view class="title">提现状态</view>
          <view class="order-wrapper">
            <block v-for="(v, i) in stateList" :key="i">
              <view
                class="order-item"
                :class="{ 'selected-state': stateIndex.includes(i), 'selected-none': !v }"
                @tap="stateChange(i)"
                >{{ v }}</view
              >
            </block>
          </view>
        </view>
      </view>
    </JMainCard>
    <view class="scr-footer">
      <view @tap="reset">重置</view>
      <view class="confirm" @tap="confirm">确认筛选</view>
    </view>
  </JPopup>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue"
import JPopup from "@/components/newComponents/JPopup/JPopup"
import ScreenTitle from "@/components/newComponents/ScreenTitle/ScreenTitle"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"

const emits = defineEmits(["confirm"])
const timeList = reactive([
  { value: "", text: "全部" },
  { value: "today", text: "今天" },
  { value: "yesterday", text: "昨天" },
  { value: "near2now_7", text: "近七天" },
  { value: "near2now_30", text: "近30天" },
  { value: "customer", text: "自定义" },
])

const stateList = reactive(["审核中", "审核失败", "结算中", "结算成功", "结算失败", ""])
// 获取组件身上的方法
const popup = ref(null)
const stateIndex = ref([])
const timeIndex = ref({ val: { text: "全部", value: "" }, i: 0 })
const open = () => {
  stateIndex.value = stateIndex.value.length == 0 ? [0, 1, 2, 3, 4] : stateIndex.value
  popup.value.open()
}
const search = (val) => {
  console.log("val", val)
  if (val.val.text == "自定义" && val.val.time) {
    val.val.value = val.val.time
  }
  timeIndex.value = val
}
const stateChange = (i) => {
  if (i == 5) return
  if (stateIndex.value.includes(i)) {
    if (stateIndex.value.length == 1) return uni.showToast({ title: "最少保留一个筛选条件", icon: "none" })
    stateIndex.value.splice(
      stateIndex.value.findIndex((v) => v == i),
      1
    )
  } else {
    stateIndex.value.push(i)
  }
}
const confirm = () => {
  const stateType = stateIndex.value.map((v) => (v = v + 1)).join(",")
  emits("confirm", { time: timeIndex.value.val.value, stateType })
  popup.value.close()
}
const reset = () => {
  timeIndex.value = { val: { text: "全部", value: "" }, i: 0 }
  stateIndex.value = [0, 1, 2, 3, 4]
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.screen-wrapper {
  min-height: 500rpx;
  overflow-y: scroll;
}
.selected {
  padding: 20rpx;
  border-radius: 7rpx;
  color: $primaryColor;
  background-color: #fff;
}
.src-main {
  padding: 30rpx;
  .select-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    .select-mch {
      margin: 20rpx;
      image {
        vertical-align: bottom;
      }
    }
    .mch-info {
      display: flex;
      image {
        width: 93rpx;
        height: 93rpx;
        margin-right: 10rpx;
      }
      view {
        display: flex;
        flex-direction: column;
        font-size: 33rpx;
        font-weight: 700;
        text {
          margin-top: 15rpx;
          color: #8c8c8c;
          font-size: 25rpx;
          font-weight: 500;
        }
      }
    }
    image {
      width: 40rpx;
      height: 40rpx;
    }
    .img-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      width: 93rpx;
      height: 93rpx;
      margin-right: 20rpx;
      image {
        width: 60rpx;
        height: 66rpx;
      }
    }
  }
  .select-agent {
    margin-top: 30rpx;
  }
  .title {
    margin: 35rpx 0 20rpx 0;
    font-size: 30rpx;
    font-weight: 700;
  }
  .order-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    view {
      flex: 0 0 32%;
      padding: 20rpx 0;
      margin-bottom: 15rpx;
      box-sizing: border-box;
      background-color: #f2f2f2;
      border-radius: 10rpx;
      text-align: center;
      font-size: 28rpx;
      color: #666;
    }
    .selected-state {
      border: 2rpx solid $primaryColor;
      color: $primaryColor;
    }
    .selected-none {
      background-color: transparent;
    }
  }
}
.scr-footer {
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx 75rpx 30rpx;
  font-size: 33rpx;
  view {
    flex: 1;
    text-align: center;
    padding: 31rpx;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20rpx;
  }
  .confirm {
    margin-left: 20rpx;
    color: $primaryColor;
  }
}
</style>
