<template>
	<section class="p_all_20">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="我的广告" name="1">
    <div class="" v-loading="loading"  element-loading-text="加载中">
      <div class="brandlistBig">
        <div class="search">
          <div class="add_btn"><el-button icon="el-icon-plus" type="primary" @click="activeName='2'">投放广告</el-button></div>
          <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="portStatus">
              <el-select v-model="params.portStatus" 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 label="广告状态：" prop="status">
              <el-select v-model="params.status" placeholder="广告状态">
                <el-option label="待投放" value="1"></el-option>
                <el-option label="已投放" value="2"></el-option>
                <el-option label="已失效" 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">
              <img v-if="item.statusType==1" class="tfico" src="@/assets/img/marketing/tf_1.png" alt="">
              <img v-if="item.statusType==2" class="tfico" src="@/assets/img/marketing/tf_2.png" alt="">
              <img v-if="item.statusType==3" class="tfico" src="@/assets/img/marketing/tf_3.png" alt="">
            </div>
            <div class="adtext">
              <p class="p1">
                <span>{{item.advertisementTitle}}</span>
                <span v-if="item.statusType==2 && item.tip<3">仅剩<span style="color:#f60;"> {{item.tip}} </span>天</span>
              </p>
              <p>投放端口：{{item.portContent}}</p>
              <p>投放时间：{{item.timeContent}}</p>
            </div>
            <div class="cov" v-if="item.statusType==3"></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>
    </el-tab-pane>
    <el-tab-pane label="广告商城" name="2">
      <ad-mall></ad-mall>
    </el-tab-pane>
  </el-tabs>
  </section>
</template>

<script>
import pagination from "@/components/common/pagination";
import { _getStorage } from '@/utils/utils';
import adMall from "./adMall"
  export default {
      name: 'adList',
      data() {
          return {
            params:{
              advertisementTitle:'',
              portNum:'',//端口 1 app 2etaobao 3 pc
              status:'', //1待投放 2已投放 3已失效
              pageNum:1,
              pageSize:6
            },
            loading:true,
            activeName:"1",
            total:0,
            dataList:[]
          }
      },
      components:{
        pagination,adMall
      },
      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/ghList",
            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/adEdit',
          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%;
     position: relative;
     text-align: center;
     .tfico{
       position: absolute;
       top: 3px;
       right: 2px;
     }
    }
    .cov{
      width: 100%;
     height: 100%;
     position: absolute;
       top: 0px;
       right: 0px;
       background: #000;
       opacity: 0.3;
       z-index: 2;
    }
  }
  .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: 297px;
      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>
