<style>
  @import "../../assets/css/advert/advmanager.css";

</style>
<template>
  <div class="advmanager-box page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select @input="getaddatas(0)" standout="bg-primary text-white" v-model="adMsg.IsFee" :options="statusOpts"
            emit-value map-options label="类型" />
        </div>
      </div>
      <q-btn label="新增" size="sm" color="accent q-px-md" style="font-weight:400 !important" @click="add" />
    </div>
    <div class="content">
      <vueWaterfallEasy :imgsArr="addatas" ref="waterfall" @scrollReachBottom="handleCurrentChange" :maxCols='7'
        :imgWidth='208' :enablePullDownEvent='true' v-if="addatas.length>0">
        <template slot-scope="props">
          <span class="money" v-if="props.value.IsFee==1">￥{{props.value.ChargeAmount.toFixed(2)}}</span>
          <span class="free" v-else>{{$t('advmanager.v_free')}}</span>
          <div class="star-box">
            <i class="iconfont icon-star star"></i>&nbsp; {{props.value.AdvertisingCount}}
          </div>
          <div class="label-box" v-if="props.value.LableList.length>0">
            <div v-for="(item,index) in props.value.LableList" :key="index" class="ad-label" v-if="index<3">
              {{ item }}
            </div>
          </div>
          <div class="zezhao">
            <i class="el-icon-edit" :title="$t('pub.updateMsg')" @click="update(props.value)"></i>
            <i class="el-icon-delete" :title="$t('system.table_delete')" @click="delAD(props.value.ID)"></i>
          </div>

        </template>
        <div slot="waterfall-over">没有更多了</div>
      </vueWaterfallEasy>
      <div v-if="addatas.length===0" style="text-align:center">
        暂无数据
      </div>
    </div>
    <!-- 新增修改广告图 -->
    <AdvmanagerForm v-if="showForm" @close="closeruleset" :save-obj="model" @success="getaddatas(0)">
    </AdvmanagerForm>
  </div>
</template>

<script>
  import vueWaterfallEasy from 'vue-waterfall-easy';
  import AdvmanagerForm from "../../components/activity/advmanager-form"
  import {
    getAdvertisingList,
    delAd
  } from '../../api/AD/index.js'
  export default {
    data() {
      return {
        addatas: [],
        model: {},
        statusOpts: [{
            label: "全部",
            value: 0
          },
          {
            label: "收费",
            value: 1
          },
          {
            label: "免费",
            value: 2
          }
        ],
        showForm: false,
        adMsg: {
          pageIndex: 1,
          pageSize: 10,
          IsFee: 0
        }
      }
    },
    mounted() {
      this.getaddatas(0)
    },
    components: {
      vueWaterfallEasy,
      AdvmanagerForm
    },
    methods: {
      //关闭弹窗
      closeruleset() {
        this.showForm = false;
      },
      //    新增
      add() {
        this.showForm = true
        this.model = {
          ID: 0,
          IsFee: 2,
          ChargeAmount: 0,
          PictureUrl: "",
          SamplePicturesUrl: "",
          Title: "",
          LableList: []
        }
      },
      update(x) {
        this.showForm = true
        this.model = x
      },

      handleCurrentChange() {
        this.adMsg.pageIndex++
        this.getaddatas(1)
      },
      //获取广告图列表
      getaddatas(type) {
        if (type === 0) {
          this.adMsg.pageIndex = 1
        }
        getAdvertisingList(this.adMsg).then(res => {
          if (res.Code === 1) {
            res.Data.PageData.forEach(x => {
              x.src = `${x.SamplePicturesUrl}?x-oss-process=image/resize,w_200`
              x.id = x.ID
            })

            if (type == 0) {
              this.addatas = res.Data.PageData
            } else {
              this.addatas = this.addatas.concat(res.Data.PageData)
            }
            this.total = res.Data.Count
            if (res.Data.PageData.length == 0) {
              this.$refs.waterfall.waterfallOver()
            }
          }

        })

      },
      //删除广告图
      delAD(id) {
        delAd({
          BAID: id
        }).then(res => {
          if (res.Code === 1) {
            this.$message.success('删除成功')
            this.getaddatas(0)
          } else {
            this.$message.error(res.message)
          }
        })
      }

    }
  }

</script>
