<template>
	<section class="">
      <div class="" v-loading="loading"  element-loading-text="加载中">
      <div class="brandlistBig">
        <div class="search">
          <el-form :inline="true" :model="params" class="demo-form-inline" ref="searchForm">
            <el-form-item label="广告标题：" prop="advertisementTitle">
              <el-input v-model="params.advertisementTitle" placeholder="广告标题"></el-input>
            </el-form-item>
            <el-form-item label="投放端口：" prop="portNum">
              <el-select v-model="params.portNum" placeholder="投放端口">
                <el-option label="分销App" value="1"></el-option>
                <el-option label="E淘宝" value="2"></el-option>
                <el-option label="分销PC" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch">搜索</el-button>
              <el-button type="" @click="onRefresh('searchForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="blBox" id="brandInfo" v-if="total>0">
          <div class="brandItem" v-for="item in dataList.list" :key="item.planId"  @click="onEditTpl(item.id)">
            <div class="bimg">
              <img :src="item.advertisementCoverImage" alt="" class="imgBrand">
            </div>
            <div class="adtext">
              <p class="p1">
                <span>{{item.advertisementTitle}}</span>
                <span>{{item.tip}}</span>
              </p>
              <p>投放端口：{{item.portContent}}</p>
            </div>
          </div>
        </div>
        <div v-else class="nodata">
          -- 暂无数据 --
        </div>
      <div class="pagination">
        <pagination 
        @eventSizeChange="eventSizeChange" 
        @eventCurrentChange="eventCurrentChange" 
        :total="total" 
        :pageSize="params.pageSize"
        :pageSizes=[6]
        ></pagination>
      </div>
    </div>
    </div>
  </section>
</template>

<script>
import pagination from "@/components/common/pagination";
import { _getStorage } from '@/utils/utils';
  export default {
      name: 'adList',
      data() {
          return {
            params:{
              advertisementTitle:'',
              portStatus:'',//端口 1 app 2etaobao 3 pc
              pageNum:1,
              pageSize:6
            },
            loading:true,
            total:0,
            dataList:[]
          }
      },
      components:{
        pagination
      },
      mounted(){
        this.getList();
      },
      methods: {
        eventSizeChange(val) {
          this.params.pageSize = val;
          this.getList();
        },
        eventCurrentChange(val) {
          this.params.pageNum = val;
          this.getList();
        },
        getList() {
          let { brandId } = _getStorage('info');
          this.params.brandId =brandId;
          this.$axios.post("/advertisement/list",
            this.params
          ).then((res)=>{
            if(res.data.code==200){
              var data=res.data.data;
              this.dataList=data;
              this.total=parseInt(data.total);
              this.loading=false;
            }
          })
        },
        onRefresh(formName){
          this.$refs[formName].resetFields();
          this.getList();
        },
        onSearch() {
          this.getList();
        },
        onEditTpl(id){
         this.$router.push({
          path:'/marketing/admalledit',
          query:{
            id:id
          }
        })
       },
      }
  }

</script>
<style lang="scss" scoped>
  .search{
    .add_btn{
      text-align: right;
      margin-bottom: 20px;
    }
    >>> .el-select>.el-input {
        display: block;
        width: 180px;
    }
  }
  .brandItem{
          background: #FFFFFF;
      box-shadow: 0px 5px 5px 0px rgba(97, 97, 97, 0.3);
    .bimg{
    width: 100%;
    height: 100%;
    text-align: center;
    }
  }
  .adtext{
    .p1{
      display: flex;
      justify-content: space-between;
    }
  }
  .nodata{
    padding: 50px;
    color: #999;
    text-align: center;
  }
</style>
<style scoped>


  >>> .el-pagination__sizes{
    display: none !important;
  }
.recommend_wrap {display: inline-block;box-shadow: 1px 0 5px #ccc;margin-left: 15px;width: 83%;background: #fff;}
 /*   .brandList_box {border-bottom:1px solid #E4E4E4;border-top:1px solid #E4E4E4;position:relative;height:46px;background-color:#F6FAFD;}*/
    .ulBox {position:absolute;bottom:-1px;overflow:hidden;width:100%;}
    .brand_nav {white-space: nowrap;font-size: 0;position:relative;overflow-x:auto;width:100%;min-height:46px;}
    .brand_nav::-webkit-scrollbar-track{background-color: #F5F5F5;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);}
        .brand_nav::-webkit-scrollbar{width: 4px;height:6px;background-color: rgba(0, 0, 0, 0.34);}
        .brand_nav::-webkit-scrollbar-thumb{background-color: #8b8b8b;border-radius: 10px;}
    .brand_nav .listName{display: inline-block;color: #797979;font-size: 14px;padding: 0px 40px;
          border-right:1px solid #E4E4E4;border-bottom:1px solid #E4E4E4;background: #F6FAFD;cursor: pointer;border-top:2px solid #E4E4E4;height:46px;line-height:46px;}
    .brand_nav .actCss {background:#fff;border-bottom:1px solid #fff;border-top:2px solid #f60;}
    /*列表*/
    .searchInput::-webkit-input-placeholder {color: #aab2bd;font-size: 12px;padding-left:4px;}

    .searchBtn{display:inline-block;width:50px;height:37px;line-height:38px;text-align:center;cursor:pointer;background-color:#409eff;color:#fff;font-size:14px;}
    .blBox{padding-top:20px; overflow:hidden;}
    .brandItem{
      width: 31%;
      height: 277px;
      float: left;
      position: relative;
      margin: 1%;
      margin-bottom: 10px;
      cursor: pointer;
      background: #eee;
    }
    .brandItem .imgBrand{
      max-width: 100%;
      max-height: 100%;
    }
    .adtext{line-height: 20px;position:absolute;z-index:1;bottom:0;right:0;left:0;background-color:#fff;color:#333;overflow:hidden;padding:12px;min-height:40px;}

/*    .editdelBtn{display:inline-block;width:30px;height:30px;background:url(../../../../assets/img/del_b.png) no-repeat 0 0;background-size:100% 100%;cursor: pointer;}*/
/*    .editdelBtn input{width:30px;min-width:30px;overflow:hidden;}*/
/*    .editBtn{background:url(../../../../assets/img/edit_b.png) no-repeat 0 0;background-size:100% 100%;}*/
    .editBtn{color: #fff;font-size: 30px;}
    .noData{width:50%;margin:0 auto;color:#999;text-align:center;}
</style>
