<template>
  <JPopup ref="popup" @onOpen="emits('onOpen')" @onClose="emits('onClose')">
    <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="select-wrapper bgF2" @tap="sAgent.open(agentInfo)">
            <view class="select-mch" v-if="agentInfo.text == '' || agentInfo.text == 'onlyOne'">
              <image src="/static/navImg/disable-dailishang.svg" mode="scaleToFill" /> {{ agentInfo.name }}
            </view>
            <view class="mch-info" v-else>
              <image src="/static/navImg/nav-dailishang.svg" mode="scaleToFill" />
              <view
                >{{ agentInfo.name }} <text>{{ agentInfo.text }}代理商</text>
              </view>
            </view>
            <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
          </view>
          <view class="select-wrapper select-agent bgF2" v-if="agentInfo.text == 'onlyOne'" @tap="sMch.open()">
            <view class="select-mch" v-if="!mchInfo.text">
              <image src="/static/iconImg/icon-selected-mch.svg" mode="scaleToFill" /> 全部子商户
            </view>
            <view class="mch-info" v-else>
              <image src="/static/equipmentImg/mch-list.svg" mode="scaleToFill" />
              <view
                >{{ mchInfo.name }} <text>{{ mchInfo.text }}</text>
              </view>
            </view>
            <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
          </view>
          <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) }" @tap="stateChange(v, i)">{{
                v
              }}</view>
            </block>
          </view>
          <view class="title">支付方式</view>
          <view class="order-wrapper">
            <block v-for="(v, i) in payList" :key="i">
              <view
                class="order-item"
                @tap="selectedPay(v.value, i)"
                :class="{
                  'selected-state': payIndex.includes(v.value) && v.value,
                  'selected-none': payList.length - 1 == i,
                }"
                >{{ v.text }}</view
              >
            </block>
          </view>
        </view>
      </view>
    </JMainCard>
    <view class="scr-footer">
      <view @tap="reset">重置</view>
      <view class="confirm" @tap="confirm">确认筛选</view>
    </view>
  </JPopup>
  <selectMch ref="sMch" @confirm="mchConfirm" />
  <selectAgent ref="sAgent" @selected="agentSelected" @oneAgent="onAgent" />
  <AgentList ref="AList" @confirm="agentListC" />
</template>

<script setup>
import { onMounted, reactive, ref, watch, watchEffect } from "vue"
import JPopup from "@/components/newComponents/JPopup/JPopup"
import ScreenTitle from "@/components/newComponents/ScreenTitle/ScreenTitle"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import selectMch from "./selectMch.vue"
import selectAgent from "./selectAgent.vue"
import AgentList from "./AgentList.vue"
const emits = defineEmits(["confirm", "onOpen", "onClose"])

const timeList = reactive([
  { value: "", text: "全部" },
  { value: "today", text: "今天" },
  { value: "yesterday", text: "昨天" },
  { value: "currMonth", text: "本月" },
  { value: "prevMonth", text: "上月" },
  { value: "customer", text: "自定义" },
])
const payList = reactive([
  { value: "WECHAT", text: "微信支付" },
  { value: "ALIPAY", text: "支付宝" },
  { value: "YSFPAY", text: "云闪付" },
  { value: "UNIONPAY", text: "银联" },
  { value: "OTHER", text: "其他" },
  { value: "", text: "" },
])
const stateList = reactive(["订单生成", "支付中", "支付成功", "支付失败", "已撤销", "已退款", "订单关闭"])
// 获取组件身上的方法
const popup = ref(null)
const sMch = ref(null)
const sAgent = ref(null)
const AList = ref(null)
const index = ref("all")
const stateIndex = ref([5, 2])
const timeIndex = ref({ val: { text: "全部", value: "" }, i: 0 })
const payIndex = ref([])
// 商户详情
const mchInfo = ref({})
// 代理商详情
const agentInfo = ref({ name: "我与全部子代理商", text: "" })

const search = (val) => {
  if (val.val.text == "自定义" && val.val.time) {
    val.val.value = val.val.time
  }
  timeIndex.value = val
}
const stateChange = (v, i) => {
  if (stateIndex.value.findIndex((val) => val == i) != -1) {
    stateIndex.value.splice(
      stateIndex.value.findIndex((val) => val == i),
      1
    )
  } else {
    stateIndex.value.push(i)
  }
}
const selectedPay = (v, i) => {
  if (payIndex.value.findIndex((val) => val == v) != -1) {
    payIndex.value.splice(
      payIndex.value.findIndex((val) => val == v),
      1
    )
  } else {
    if (v == "none") return
    payIndex.value.push(v)
  }
}
const open = (val) => {
  stateIndex.value = []
  payIndex.value = []
  val.forEach((v) => {
    switch (v.type) {
      case 0:
        stateIndex.value.push(v.value)
        break
      case 2:
        payIndex.value.push(v.value)
        break
    }
  })
  payIndex.value = val.find((v) => v.type == 2) ? payIndex.value : payList.map((v) => v.value)
  if (payIndex.value.findIndex((v) => !v) != -1) {
    payIndex.value.splice(
      payIndex.value.findIndex((v) => !v),
      1
    )
  }
  timeIndex.value = val.find((v) => v.type == 1)?.value ? timeIndex.value : { val: { text: "全部", value: "" }, i: 0 }
  stateIndex.value = stateIndex.value.length == 0 ? (stateIndex.value = [2, 5]) : stateIndex.value
  popup.value.open()
}
// 选择商户回调
const mchConfirm = (val) => {
  mchInfo.value = val
  confirm()
}
// 选择代理商回调
const agentSelected = (val) => {
  agentInfo.value = val
  confirm()
}
// 列表选择回调
const agentListC = (val) => {
  agentInfo.value = val
  confirm()
}
const confirm = () => {
  const list = []
  stateIndex.value.forEach((v) => {
    list.push({
      text: stateList[v],
      value: v,
      type: 0,
    })
  })
  list.push({
    text:
      timeIndex.value.val.text == "自定义"
        ? timeIndex.value.val.value.split("_")[1] + "/" + timeIndex.value.val.value.split("_")[2]
        : timeIndex.value.val.text,
    value: timeIndex.value.val.value,
    type: 1,
  })

  payIndex.value.forEach((v) => {
    list.push({
      text: payList.find((val) => val.value === v).text,
      value: v,
      type: 2,
    })
  })
  emits("confirm", { data: list, mch: mchInfo.value.text, agent: agentInfo.value.text })
  popup.value.close()
  sAgent.value.close()
}
// 重置 数据
const reset = () => {
  timeIndex.value = { val: { text: "全部", value: "" }, i: 0 }
  stateIndex.value = [5, 2]
  payIndex.value = payList.map((v) => v.value)
  payIndex.value.splice(payIndex.value.length - 1, 1)
  agentInfo.value = { text: "", name: "我与全部子代理商" }
  mchInfo.value = { text: "", name: "全部商户" }
}
const onAgent = (val) => {
  AList.value.open(val)
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.screen-wrapper {
  height: calc(100vh - 700rpx);
  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>
