<template>
  <view>
    <JHeaderTitle :title="vdata.title" bgColor="#f2f2f2" />

    <JSearchInput :place="vdata.text" @search="search" @resetSearch="resetSearch" ref="JSearchRef" />

    <view v-for="(item, index) in vdata.dataList" :key="index" @click.stop="select(item)">
      <JPreview
        :img="vdata.icon"
        :title="item[vdata.renderName]"
        :qrcId="item[vdata.renderId]"
        :isLast="index === vdata.dataList.length - 1"
      >
        <view class="check" v-if="isCheck(item[vdata.renderId])">
          <image src="/static/equipmentImg/check.svg" />
        </view>
      </JPreview>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onBackPress, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
import { ref, reactive, toRaw } from "vue"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" // 导航栏
import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue" // 卡片
import JInput from "@/components/newComponents/JInput/JInput.vue"
import JLine from "@/components/newComponents/JLine/JLine.vue"
import JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput.vue"
import JPreview from "@/components/newComponents/JPreview/JPreview.vue"
import useStore from "@/hooks/useStore.js"
import { $getMerList, $getMchStoreList, $getMchAppList, $getTeams } from "@/http/apiManager.js"

const { getStore, setStore } = useStore()

const vdata = reactive({
  title: "", // 导航栏标题
  searchHandle: "", // 搜索函数
  tag: "", // 搜索内容 商户or门店or应用orPOS机
  icon: "", // 左侧渲染的图标
  iconClose: "", // pos 会有未启用状态
  renderName: "", // 用于列表渲染的字段 （上）
  renderId: "", // 用于列表渲染的字段 （下）
  dataList: [], // 用于保存请求后的列表
  isLoad: false, // 是否为上拉加载
  titlePage: "", // 总页数
  listTipText: "加载更多", // 提示文字
})

const mchInfo = {
  title: "选择商户",
  searchHandle: $getMerList,
  tag: "mch",
  text: "搜索商户",
  renderName: "mchName", // 用于列表渲染的字段 （上）
  renderId: "mchNo", // 用于列表渲染的字段 （下）
  icon: "/static/equipmentImg/mch-list.svg", // 左侧渲染的图标
}
const storeInfo = {
  title: "选择门店",
  searchHandle: $getMchStoreList,
  tag: "store",
  text: "搜索门店",
  renderName: "storeName", // 用于列表渲染的字段 （上）
  renderId: "storeId", // 用于列表渲染的字段 （下）
  icon: "/static/equipmentImg/store-list.svg", // 左侧渲染的图标
}
const appInfo = {
  title: "选择应用",
  searchHandle: $getMchAppList,
  tag: "app",
  text: "搜索应用名称",
  renderName: "appName", // 用于列表渲染的字段 （上）
  renderId: "appId", // 用于列表渲染的字段 （下）
  icon: "/static/equipmentImg/app-list.svg", // 左侧渲染的图标
}

const posInfo = {
  title: "选择扫码POS",
  searchHandle: $getMchStoreList,
  tag: "pos",
  text: "搜索设备名称",
  renderName: "deviceName", // 用于列表渲染的字段 （上）
  renderId: "deviceNo", // 用于列表渲染的字段 （下）
  iconOn: "/static/equipmentImg/opse-open.svg", // 左侧渲染的图标
  iconClose: "/static/equipmentImg/opse-close.svg", // 左侧渲染的图标
}
const teamInfo = {
  title: "选择团队",
  searchHandle: $getTeams,
  tag: "team",
  text: "搜索团队名称",
  renderName: "teamName", // 用于列表渲染的字段 （上）
  renderId: "teamId", // 用于列表渲染的字段 （下）
  iconOn: "/static/iconImg/expand-fill.svg", // 左侧渲染的图标
  iconClose: "/static/iconImg/expand-team-close.svg", // 左侧渲染的图标
}
// 判断右侧 勾选标志是否展示, 只要ID一致就显示，否则都是false
const isCheck = (id) => {
  if ([getStore("mchInfo").mchNo, getStore("storeInfo").storeId, getStore("appInfo").appId].includes(id)) {
    return true
  }
  return false
}

onLoad((option) => {
  switch (option.name) {
    case "mch":
      Object.assign(vdata, mchInfo)
      break
    case "store":
      Object.assign(vdata, storeInfo)
      break
    case "app":
      Object.assign(vdata, appInfo)
      break
    case "team":
      Object.assign(vdata, teamInfo)
      break
    default:
      null
  }
  // 请求列表
  getList()
})

// 选择函数，选择后返回，同时将值赋值给对应的对象中
const select = (item) => {
  setStore(`${vdata.tag}Info`, toRaw(item))
  uni.navigateBack({})
}

const store = reactive({
  mchInfo: {}, // 商户信息
  storeInfo: {}, // 门店信息
  application: {}, // 应用信息
  bindMch: {}, // 商户绑定信息
})

// 请求列表默认参数
const params = reactive({
  pageNumber: 1, // 默认是1
  pageSize: 10, // 默认10条，可传参修改
})

// 请求列表函数
const getList = (searchText) => {
  // 根据不同的搜索内容 增加不同的搜索条件
  switch (vdata.tag) {
    case "mch":
      searchText ? (params.mchName = searchText) : (params.mchName = "")
      break
    case "store":
      params.mchNo = getStore("mchInfo").mchNo
      searchText ? (params.storeName = searchText) : (params.storeName = "")
      break
    case "app":
      params.mchNo = getStore("mchInfo").mchNo
      searchText ? (params.appName = searchText) : (params.appName = "")
      break
    case "pos":
      params.deviceType = 3
      params.mchNo = getStore("mchInfo").mchNo
      params.storeId = getStore("storeInfo").storeId
      params.appId = getStore("appInfo").appId
      searchText ? (params.appSearchData = searchText) : (params.appSearchData = "")
      break
    case "team":
      params.teamName = ""
      break
    default:
      null
  }

  vdata.listTipText = "加载中..."
  uni.showLoading({ title: "加载中..." })

  vdata.searchHandle(toRaw(params)).then(({ bizData }) => {
    uni.hideLoading()
    uni.stopPullDownRefresh() // 请求成功停止下拉刷新
    vdata.titlePage = Math.ceil(bizData.total / params.pageSize)

    if (vdata.titlePage == params.pageNumber || bizData.records.length == 0) {
      vdata.listTipText = "暂无更多"
    }

    let data = bizData.records ? bizData.records : bizData

    if (vdata.isLoad) {
      vdata.dataList.push(...data)
    } else {
      vdata.dataList = data
    }
  })
}

// 搜索
const search = (e) => {
  vdata.isLoad = false // 搜索时，不是上拉加载，此时应将状态改为，请求后重置列表数据
  getList(e)
}
// 取消搜索 清空字段
const resetSearch = () => {
  getList()
}

// 下拉刷新
onPullDownRefresh(() => {
  params.pageNumber = 1
  vdata.isLoad = false
  getList()
})

// 上拉加载
onReachBottom(() => {
  params.pageNumber++
  if (params.pageNumber > vdata.titlePage) {
    params.pageNumber = params.pageNumber
    return (vdata.isLoad = false)
  }
  vdata.isLoad = true
  getList()
})

// 返回前清除搜索数据
const JSearchRef = ref(null)
onBackPress(() => {
  if (JSearchRef.value.searchText != "") {
    JSearchRef.value.searchText = ""
    getList()
    return true
  }
  return false
})
</script>
<style lang="scss">
page {
  background: #f2f2f2;
}
</style>
<style scoped lang="scss">
.check {
  width: 50rpx;
  height: 100%;
  display: flex;
  align-items: center;
  image {
    width: 50rpx;
    height: 50rpx;
  }
}
</style>
