<template>
  <!-- 广告管理 - 新增|修改 -->
  <div class="advertPage flex-col">
    <s-header :name="pageTitle" :noback="false"></s-header>
    <div class="advertBox flex-col">
      <van-form @submit="updateAdFun">
        <van-field
          v-model="adInfo.name"
          name="name"
          :label="`${$t('advertManage.advertisingNameLabel')}:`"
          :placeholder="$t('advertManage.advertisingNamePlaceholder')"
          :rules="[{ required: true, message: $t('advertManage.advertisingNamePlaceholder') }]"
        />
        <van-field
          v-model="adInfo.adminId"
          name="adminId"
          :label="`${$t('advertManage.affiliatedMerchantsLabel')}:`"
          :placeholder="$t('advertManage.affiliatedMerchantsPlaceholder')"
          :rules="[{ required: true, message: $t('advertManage.affiliatedMerchantsPlaceholder') }]"
        />
        <!-- <van-field
          v-model="adInfo.username"
          name="username"
          :label="'所属商家名:'"
          :placeholder="'请输入所属商家'"
          :rules="[{ required: true, message: '请输入所属商家' }]"
        /> -->
        <van-field
          v-model="adInfo.orders"
          name="orders"
          type="number"
          :label="`${$t('advertManage.advertisingOrderLabel')}:`"
          :placeholder="$t('advertManage.advertisingOrderPlaceholder')"
        />
        <van-field
          v-model="adInfo.duration"
          name="duration"
          type="number"
          :label="`${$t('advertManage.advertisingDurationLabel')}:`"
          :placeholder="$t('advertManage.advertisingDurationPlaceholder')"
        />
        <van-field
          v-model="adInfo.plays"
          name="plays"
          type="number"
          :label="`${$t('advertManage.playbackTimesLabel')}:`"
          :placeholder="$t('advertManage.playbackTimesPlaceholder')"
        />
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label"><span>{{$t('advertManage.advertisingPosition')}}:</span></div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="adInfo.screenType" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{$t('advertManage.screenA')}}</van-radio>
              <van-radio name="1" icon-size="18px">{{$t('advertManage.screenB')}}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label"><span>{{$t('advertManage.locationType')}}:</span></div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="adInfo.locationType" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{$t('advertManage.advertising')}}</van-radio>
              <van-radio name="1" icon-size="18px">{{$t('advertManage.externalAdvertising')}}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label"><span>{{$t('advertManage.defaultDownload')}}:</span></div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="adInfo.type" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{$t('advertManage.defaultDownload')}}</van-radio>
              <van-radio name="1" icon-size="18px">{{$t('advertManage.doNotDownloadByDefault')}}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label"><span>{{$t('advertManage.advertisingType')}}:</span></div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="adInfo.adType" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{$t('advertManage.picture')}}</van-radio>
              <van-radio name="1" icon-size="18px">{{$t('advertManage.video')}}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div v-if="adInfo.adType === '0'">
          <van-field
            v-model="adInfo.url"
            name="url"
            :label="`${$t('advertManage.pictureAddressLabel')}:`"
            :placeholder="$t('advertManage.pictureAddressPlaceholder')"
            :rules="[{ required: true, message: $t('advertManage.pictureAddressPlaceholder') }]"
          />
        </div>
        <div v-if="adInfo.adType === '1'">
          <van-field
            v-model="adInfo.mediaPreview"
            name="mediaPreview"
            :label="`${$t('advertManage.thumbnailAddressLabel')}:`"
            :placeholder="$t('advertManage.thumbnailAddressPlaceholder')"
          />
          <van-field
            v-model="adInfo.url"
            name="url"
            :label="`${$t('advertManage.videoLinkLabel')}:`"
            :placeholder="$t('advertManage.videoLinkPlaceholder')"
            :rules="[{ required: true, message: $t('advertManage.videoLinkPlaceholder') }]"
          />
        </div>
        <van-row justify="space-around" style="padding: 1em">
          <van-button
            span="5"
            round
            type="primary"
            style="height: 2em; padding: 0 2em"
            native-type="submit"
          >
            {{$t('advertManage.submit')}}
          </van-button>
        </van-row>
      </van-form>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>
  
  <script>
import { onMounted, ref } from "vue";
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { addAdInfo, updateAdInfo } from '@/service/advertManage';
import { useRouter } from "vue-router";
import { Toast } from 'vant';
import { useI18n } from 'vue-i18n';

export default {
  components: { sHeader, navBar },
  setup() {
    const { t } = useI18n();
    const router = useRouter(); 
    const adInfo = ref({
      adminId: '',
      username: null,
      name: '',
      orders: '',
      duration: '',
      plays: '',
      status: '推送中',
      screenType: '0',
      locationType: '0',
      type: '0',
      adType: '0',
      url: '',
      mediaPreview: ''
    });
    const pageTitle = ref('');
    onMounted(async () => {
      console.log("onMounted");
      let adverInfo = localStorage.getItem('adverInfo');
      if (adverInfo) {
        pageTitle.value = t('advertManage.modifyAdvertisement');
        adverInfo = JSON.parse(adverInfo);
        adInfo.value.id = adverInfo.id;
        adInfo.value.adminId = adverInfo.adminId;
        adInfo.value.username = adverInfo.username;
        adInfo.value.name = adverInfo.name;
        adInfo.value.orders = adverInfo.orders;
        adInfo.value.duration = adverInfo.duration;
        adInfo.value.plays = adverInfo.plays;
        adInfo.value.screenType = typeof adverInfo.screenType === 'object' ? '0' : adverInfo.screenType.toString();
        adInfo.value.locationType = typeof adverInfo.locationType === 'object' ? '0' : adverInfo.locationType.toString();
        adInfo.value.type = typeof adverInfo.type === 'object' ? '0' : adverInfo.type.toString();
        adInfo.value.adType = typeof adverInfo.adType === 'object' ? '0' : adverInfo.adType.toString();
        adInfo.value.url = adverInfo.url;
        adInfo.value.mediaPreview = adverInfo.mediaPreview;
        console.log(adInfo.value);
      } else {
        pageTitle.value = t('advertManage.addAds');
      }
    });

    const updateAdFun = async () => {
      if (pageTitle.value === t('advertManage.modifyAdvertisement')) {
        const params =  Object.assign({}, adInfo.value);
        const { data } = await updateAdInfo(params);
        if (data.code === '00000') {
          Toast.success(t('advertManage.successfullyModifiedTheAdvertisement'));
          router.push({ path: 'advertManage' });
        } else { Toast.fail(data.message); }
        console.log('updateAdFun', data);
      } else {
        const params =  Object.assign({}, adInfo.value);
        const { data } = await addAdInfo(params);
        if (data.code === '00000') {
          Toast.success(t('advertManage.advertisementAddedSuccessfully'));
          router.push({ path: 'advertManage' });
        } else { Toast.fail(data.message); }
      }
    }
    return {
      pageTitle,
      adInfo,
      updateAdFun
    };
  },
};
</script>
  
<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
</style>
  