<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){
            console.log(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){
                      console.log(397,res)
                       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>

