<template>
  <!-- 广告管理 -->
  <div class="advertPage flex-col">
    <s-header :name="$t('advertManage.advertisingManagement')" :noback="false"></s-header>
    <div class="advertBox flex-col">
      <van-list
        v-model:loading="loading"
        v-model:error="error"
        error-text="{{$t('advertManage.requestFailed')}}"
        :finished="finished"
        finished-text="{{$t('advertManage.noMore')}}"
        offset="300"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <div class="flex-col outer4"></div>
              <span class="flex-col txt2"
                >{{$t('advertManage.total')}}<span class="discountNumber">{{ adTotal }}</span
                >{{$t('advertManage.ads')}}</span
              >
            </div>
          </div>
          <div class="flex-col">
            <div class="operBox">
              <div class="listBox" @click="pushAdRule()">
                <img class="iconImg" src="../../assets/accountPer/listIcon.png" />
                <span>{{$t('advertManage.advertisingRules')}}</span>
              </div>
              <div class="addBox" @click="pushAdd()">
                <img class="iconImg" src="../../assets/accountPer/addicon.png" />
                <span>{{$t('advertManage.add')}}</span>
              </div>
              <div class="searchBox" @click="deleteClick()">
                <img class="iconImg" src="../../assets/advertManage/closeIcon.png" />
                <span>{{$t('advertManage.delete')}}</span>
              </div>
              <div class="searchBox" @click="pushClick()">
                <img class="iconImg" src="../../assets/advertManage/pushIcon.png" />
                <span>{{$t('advertManage.push')}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="adList" v-for="(item, index) in adList" :key="index" @click="adUpdate(item)">
          <img class="adImg" :src="isAdImgUrl(item)" />
          <div class="adInfoBox">
            <span class="adTitle">{{item.name}}</span>
            <div class="adRow">
              <span class="adLeft">{{$t('advertManage.locationType')}}:</span>{{item.locationType === 0 ? $t('advertManage.advertising') : $t('advertManage.externalAdvertising')}}
            </div>
            <div class="adRow">
              <span class="adLeft">{{$t('advertManage.advertisingPosition')}}:</span>{{item.screenType === 0 ? $t('advertManage.screenA') : $t('advertManage.screenB')}}
            </div>
            <div class="adRow">
              <span class="adLeft">{{$t('advertManage.advertisingType')}}:</span>{{item.adType === 0 ? $t('advertManage.picture') : $t('advertManage.video')}}
            </div>
            <div class="adRow">
              <span class="adLeft">{{$t('advertManage.creationTime')}}:</span>{{showDateTime(item.createDate)}}
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { getAdList } from '@/service/advertManage';
import { onMounted, reactive, ref } from 'vue';
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { Toast } from 'vant';
import dateUtil from "@/utils/dateUtil";
import { useRouter } from "vue-router";

export default {
  components: { sHeader, navBar },
  setup() {
    const router = useRouter(); 
    const adList = ref([]);
    const adTotal = ref('');
    const pushAdRule = () => { console.log('pushAdRule'); }
    const pushAdd = () => { localStorage.removeItem('adverInfo'); router.push({ path: 'advertSet' }) }
    const deleteClick = () => { console.log('deleteClick'); }
    const pushClick = () => { console.log('pushClick'); }
    let searchParams = reactive({ current: 1, size: 20 });
    const loading = ref(false);
    const error = ref(false);
    const finished = ref(false);
    // 初始化页面获取列表
    onMounted(async () => {
      adList.value = [];
      searchParams.current = 1;
      loading.value = true;
      getAdListFun();
    });
    const onLoad = () => { if (!finished.value) { searchParams.current = searchParams.current + 1; loading.value = true; getAdListFun(); } };
    // 获取广告列表
    const getAdListFun = async () => {
      const params = Object.assign({}, searchParams);
      const { data } = await getAdList(params);
      loading.value = false;
      if (data.code === '00000') {
        adList.value = adList.value.concat(data.data.records);
        adTotal.value = data.data.total;
        if (adList.value.length === data.data.total) { finished.value = true; }
      } else { Toast.fail(data.message); }
    }
    const isAdImgUrl = (item) => { return item.adType === 1 ? item.mediaPreview : item.url; }
    const showDateTime = (date) => { return date ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss" ) : ''; }
    const adUpdate = (item) => { localStorage.setItem('adverInfo',JSON.stringify(item)); router.push({ path: 'advertSet' }); }
    return {
      adList,
      adTotal,
      pushAdRule,
      pushAdd,
      deleteClick,
      pushClick,
      loading,
      error,
      finished,
      onLoad,
      isAdImgUrl,
      showDateTime,
      adUpdate,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
</style>
