<template>
  <JeepayBackground :bgColorStyle="{ height: '706rpx' }">
    <JeepayCustomNavbar textColor="#fff"
      bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="广告详情"
      backCtrl="back" />
    <JeepayTableListItem viewClass="list-item-by-detail" logo="/pageDevice/static/icon/ad-white.svg"
      :title="vdata.title" :subtitle="vdata.advertId" :moreBtnList="list" />
    <view class="create-time">
      <view class="time-title">创建时间</view>
      <view class="time-info">{{ vdata.createdAt }}</view>
    </view>
    <JeepayCard editText="编辑广告" @editTap="toEditAd">
      <JeepayDescview>
        <block v-for="(v, i) in vdata.appContent">
          <JeepayDescviewItem :title="`广告图片（${i + 1}）`">
            <template #desc>
              <image class="ad-img" :src="v.imgUrl" mode="aspectFill">
              </image>
            </template>
          </JeepayDescviewItem>
        </block>
      </JeepayDescview>
    </JeepayCard>
    <JeepayCard title='其他设置' viewStyle="margin-top:30rpx">
      <JSwitchCard title="是否发布" :tipsWidth='410' tips="发布后，刷脸设备上仅展示当前广告中包含的图片">
        <template #right>
          <JeepayStateSwitch v-model:state="vdata.releaseState" :showSwitchType="true"
            :updateStateFunc="updateStateFunc" />
        </template>
      </JSwitchCard>
    </JeepayCard>
    <JeepayPopupConfirm ref="refTips" />
    <JSinglePopup ref="refMore" :list="list" activeColor="#FF5B4C" />
  </JeepayBackground>
</template>

<script setup>
import { reqLoad, API_URI_PAY_AD_LIST } from "@/http/apiManager.js"
import http from "@/http/http"
import emit from '@/commons/utils/emit.js'
import infoBox from '@/commons/utils/infoBox.js'
import { reactive, ref } from "vue"
import go from '@/commons/utils/go.js'
import { onLoad,onUnload } from '@dcloudio/uni-app'
onLoad((options) => {
  vdata.advertId = options.id
  getDetails()
})
uni.$on(emit.ENAME_REF_AD_DETAILS, (data) => {
  getDetails()
})
const list = reactive([{
  label: '编辑广告',
  value: 'editAd',
  fun: toEditAd,
},
{
  label: '删除广告',
  value: 'deleteAd',
  color: '#FF5B4C',
  fun: function () {
    refTips.value.open('是否确认删除该条广告?').then(() => {
      http.req(API_URI_PAY_AD_LIST, { delAdvertIds: vdata.advertId }, "DELETE").then(res => {
        infoBox.showSuccessToast('删除成功').then(res => {
          go.back(1,emit.ENAME_REF_AD_LIST)
        })

      })
    }).catch(() => {
      refMore.value.open()
    })
  }
},
])
const refTips = ref(null)
const refMore = ref(null)
const vdata = reactive({})
function toEditAd () {
  go.to('PAGES_AD_EDIT', { id: vdata.advertId })
}
// 获取详情
const getDetails = () => {
  reqLoad.getById(API_URI_PAY_AD_LIST, vdata.advertId).then(({ bizData }) => {
    bizData.appContent = JSON.parse(bizData.appContent)
    Object.assign(vdata, bizData)
  })
}
// 修改发布状态
const updateStateFunc = (state) => {
  reqLoad.addOrUpdate(vdata.advertId, API_URI_PAY_AD_LIST, { releaseState: state }).then(res=>{
    emit.refPageAndSearchEmit( emit.ENAME_REF_AD_LIST)
  })
}
onUnload(() => uni.$off(emit.ENAME_REF_AD_DETAILS))
</script>

<style lang="scss" scoped>
.create-time {
  display: flex;
  justify-content: space-between;
  margin: 0 75rpx;
  padding: 50rpx 0;
  font-size: 30rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);

  .time-title {
    color: rgba(255, 255, 255, 0.7);
  }

  .time-info {
    color: #fff;
  }

}

.ad-img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}

.c-desc-view-item ::v-deep .title {
  justify-content: flex-start !important;
}
</style>
