<template>
  <view class="page-wrapper">
    <JeepayCustomNavbar textColor="#000" bgDefaultColor="#fff" :title="vdata.advertId ? '广告编辑' : '广告创建'"
      backCtrl="back" />
    <view class="ad-title-wrapper">
      <view class="ad-title">广告标题</view>
      <input type="text" v-model="vdata.title" placeholder="请输入广告标题"
        placeholder-style="color: #b3b3b3ff; font-size: 32rpx;font-weight: 400;" maxlength="12">
    </view>
    <JSwitchCard borderWidth="0" title="是否发布" :tipsWidth='410' tips="发布后，刷脸设备上仅展示当前广告中包含的图片" v-if='!vdata.advertId'>
      <template #right>
        <JeepayStateSwitch v-model:state="vdata.releaseState" :showSwitchType="true" :confirm="false" />
      </template>
    </JSwitchCard>
    <view class="ad-content">
      <AdItems :adList="vdata.adList" />
    </view>
    <!-- 保存编辑 -->
    <view class="footer-wrapper">
      <view class="footer-button footer-button-style">
        <button hover-class="hover-button" hover-stay-time="150" class="flex-center" @tap="addOrEdit">{{ vdata.advertId ?
          '保存编辑' : '确认创建' }}</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import infoBox from '@/commons/utils/infoBox.js'
import { reqLoad, API_URI_PAY_AD_LIST } from "@/http/apiManager.js"
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import AdItems from "./components/AdItems.vue"
onLoad((options) => {
  if (options.id) {
    vdata.advertId = options.id
    getDetails()
  }
})
const vdata = reactive({
  advertType: 1,
  releaseState: 1,
  adList: [{ timeId: new Date().getTime() + Math.random() }]
})
const addOrEdit = () => {
  // 上传前格式化数据
  if(!vdata.title) return infoBox.showToast('请填写广告标题')
  if (formatAdData()) return
  vdata.appContent = JSON.stringify(vdata.adList)
  reqLoad.addOrUpdate(vdata.advertId ? vdata.advertId : false, API_URI_PAY_AD_LIST, vdata).then(res => {
    go.back(1, emit.ENAME_REF_AD_DETAILS)
    emit.refPageAndSearchEmit(emit.ENAME_REF_AD_LIST)
  })
}
const getDetails = () => {
  reqLoad.getById(API_URI_PAY_AD_LIST, vdata.advertId).then(({ bizData }) => {
    bizData.adList = JSON.parse(bizData.appContent)
    bizData.adList.forEach(v => {
      v.timeId = new Date().getTime() + Math.random()
    })
    Object.assign(vdata, bizData)
  })
}
const formatAdData = () => {
  if (vdata.adList.findIndex(v => v.imgUrl) == '-1') return  infoBox.showToast('空数据不可保存') 
  vdata.adList = vdata.adList.filter(v=>v.imgUrl) // 筛选有值字段
  vdata.adList.forEach((v, i) => {
    delete v.timeId //删除唯一值 后端不许要存储
    if(!v.sort){
      v.sort = i+1 //如果没有填写 排序字段 将 下标赋值给 排序字段
    }
  })
  return false
}
</script>

<style lang="scss" scoped>
.title {
  color: #4d4d4dff;
  font-size: 32rpx;
  font-weight: 400;
}

.ad-content {
  margin-top: 20rpx;
  padding: 0.1rpx;
  background-color: #fff;


}

.ad-title-wrapper {
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  height: 120rpx;
  background-color: #fff;

  input {
    margin-left: 70rpx;
  }

  margin-bottom: 20rpx;
}

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

  .footer-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    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;
    }
  }
}
</style>