<template>
  <view class="page-wrapper">
    <view class="search-header">
      <view class="search-mian">
        <image src="/static/iconImg/icon-search.svg" mode=""></image> <input type="text" disabled placeholder="搜索广告标题"
          placeholder-style="color: #00000059;font-size: 27rpx;font-weight: 400;" @tap="toSearch">
      </view>
    </view>
    <JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc">
      <template #tableBody="{ record }">
        <FaceCardRender :title="record.title" :advertId="record.advertId" :imgUrl="record.imgUrl"
          :releaseState="record.releaseState" />
      </template>
    </JeepayTableList>
    <view class="footer-wrapper">
      <view class="footer-button footer-button-style">
        <button hover-class="hover-button" hover-stay-time="150" class="flex-center" @tap="createdAd">创建广告</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue"
import { reqLoad, API_URI_PAY_AD_LIST } from "@/http/apiManager"
import { onLoad, onUnload } from '@dcloudio/uni-app'
import FaceCardRender from "/pages/list/render/FaceCardRender.vue"
import emit from '@/commons/utils/emit.js'
import go from '@/commons/utils/go.js'
uni.$on(emit.ENAME_REF_AD_LIST, (data) => {
  jeepayTableListRef.value.refTable(true)
})
onUnload(() => {
  uni.$off(emit.ENAME_REF_AD_LIST)
})
const jeepayTableListRef = ref(null)
const reqTableDataFunc = (params) => {
  params.advertType = 1
  return reqLoad.list(API_URI_PAY_AD_LIST, params)
}
const createdAd = () => {
  go.to('PAGES_AD_EDIT')
}
const toSearch = () => {
  go.toSearchPage('faceImgAd', 'faceImgAd')
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  min-height: calc(100vh - 160rpx);
}

.search-header {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  height: 110rpx;
  background-color: #fff;

  image {
    padding: 20rpx;
    width: 25rpx;
    height: 25rpx;
  }

  .search-mian {
    flex: 1;
    display: flex;
    height: 100%;
    border-radius: 12rpx;
    opacity: 1;
    background: #f5f5f5ff;

    input {
      height: 100%;
    }
  }
}

.footer-wrapper {
  height: 170rpx;
  background-color: transparent;


  .footer-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30rpx;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1rpx;
      background-color: #edededff;
    }

    button {
      height: 110rpx;
      font-size: 33rpx;
      font-weight: 500;
      color: $J-color-tff;
      border-radius: 20rpx;
      background: $jeepay-bg-primary;
    }

    .hover-button {
      opacity: 0.5;
    }
  }
}

.block {
  height: 150rpx;
}
</style>
