<template>
	<section class="">

    <div class="" v-loading="loading"  element-loading-text="加载中">
      <!-- <div class="brandList_box" id="brandList">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item in brandList" :key="item.brandId" :label="item.brandName" :name="item.brandId"></el-tab-pane>
        </el-tabs>
      </div> -->
      <div class="brandlistBig">
        <div class="brandlistInfo">
          <div class="brandleft">
            方案列表  共 <span class="s1">{{planList?planList.total:0}}</span> 个方案
          </div>
          <div class="brandright">
            <div class="searchbox">
              <el-input placeholder="输入搜索内容..." v-model="searchParam">
                <el-button slot="append" type="primary" @click="searchBtn()">搜索</el-button>
              </el-input>
            </div>
            <el-button class="addNews" type="primary" @click="onEditTpl()">创建新方案</el-button>
            <!-- <div class="addNews" >创建新方案</div> -->
          </div>
        </div>
        <div class="blBox" id="brandInfo">
          <div class="brandItem" v-for="item in planList.list" :key="item.planId">
            <div class="bimg">
              <img :src="item.coverPath" alt="" class="imgBrand">
            </div>
            <div class="brandtext">
              <div class="left">
                <p class="p1">{{item.title}}</p>
                <p>{{item.addDate}}</p>
              </div>
              <div class="right">
                <span class="el-icon-edit-outline editBtn" @click="onEditTpl(item.planId)"></span>
                <span class="el-icon-delete editBtn" @click="delTpl(item.planId)"></span>
              </div>
            </div>
          </div>
        </div>
        <!--<div id="page1" class="page">
    <div class="tcdPageCode"><span class="disabled">&lt;</span><span class="current">1</span><span class="disabled">&gt;</span></div>
  </div>-->
      <div class="pagination">
        <pagination @eventSizeChange="eventSizeChange" @eventCurrentChange="eventCurrentChange" :total="total" :pageSize="pageSize"></pagination>
      </div>
    </div>
    </div>
  </section>
</template>

<script>
import pagination from "@/components/common/pagination";
import { _getStorage } from "@/utils/utils";
  export default {
      name: 'saleBrandAdd',
      data() {
          return {
            loading:true,
            activeName:"1",
            currentPage:1,
            pageSize:10,
            total:0,
            searchParam:'',
            brandId:'',
            brandList:[],
            planList:[]
          }
      },
      components:{
        pagination
      },
      watch:{
        //监听相同路由下参数变化的时候，从而实现异步刷新
        '$route'(to,from) {
          if(from.path == '/marketing/planadd'){
            this.getPlanList();
          }
        }
      },
      mounted(){
        // this.getBrandList();
        let { brandId } = _getStorage('info');
        this.brandId=brandId;
        this.getPlanList();
      },
      methods: {
        eventSizeChange(val) {
          this.pageSize = val;
          this.getPlanList();
        },
        eventCurrentChange(val) {
          this.currentPage = val;
          this.getPlanList();
        },
        // getBrandList(){
        //   this.$axios.get(this.HOST+"/v1/brand/list").then((res)=>{
        //     if(res.data.code==200){
        //       if (res.data.data.length > 0) {
        //         this.brandList=res.data.data;
        //         this.brandId=res.data.data[0].brandId;
        //         this.getPlanList();
        //       } else {
        //         this.$message.error('您还没有品牌');
        //       }
        //     }
        //   })
        // },
        handleClick(tab, event) {
//        this.brandId=tab.name;
          this.brandId=tab.name;
          this.searchParam='';
          this.getPlanList();
        },
        getPlanList() {
          var params = {
              "brandId":this.brandId,
              "page":this.currentPage,
              "pageSize":this.pageSize,
              "search":this.searchParam
          }
          this.$axios.get("/brand/scheme/list",{
            params:params
          }).then((res)=>{
            if(res.data.code==200){
              var data=res.data.data;
              this.planList=data;
              this.total=parseInt(data.total);
              this.loading=false;
                        // console.log(data)
            }
          })
        },
        searchBtn(brandId) {
          this.getPlanList();
        },
        onEditTpl(planId){
         this.$router.push({
          path:'/marketing/planadd',
          query:{
            planId:planId,
            brandId:this.brandId
          }
        })
       },
       delTpl(id){
        this.$confirm('确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
           this.$axios.get(this.HOST +'/v1/brand/scheme/remove?planId='+id,
            ).then((res) => {
              if(res.data.code==200){
                this.$message.success("删除成功");
                this.getPlanList();
              }else{
                this.$message.error(res.data.message);
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
      }
  }

</script>

<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;}
    /*列表*/
    .brandlistBig{padding:30px;}
    .brandlistInfo{overflow:hidden;}
    .brandlistInfo .brandleft{float:left;font-size:16px;color:#999;margin-top:7px;}
    .brandlistInfo .brandright{float:right;overflow:hidden;}
    .brandlistInfo .searchbox{float:left;}
    .brandlistInfo .addNews{float:left;margin-left: 20px;}
    .brandlistInfo .addNews a{color:#fff;}
    /* .searchInput{height:36px;padding-left:10px;border:0;border-right:1px solid #ccc;overflow:hidden;background-color:transparent;width:220px;font-size:14px;} */
    .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: 240px;
      float: left;
      border: 1px solid #ccc;
      position: relative;
      margin: 1%;
      margin-bottom: 10px;
      cursor: pointer;
    }
    /* .blBox .brandItem:nth-of-type(3n){margin-right:0px;} */
    .brandItem .bimg{height:100%;position:relative;overflow:hidden;}
    .brandItem .imgBrand{display:block;max-width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
    .brandtext{position:absolute;z-index:1;bottom:0;right:0;left:0;background-color:#fff;color:#000;overflow:hidden;padding:10px;min-height:40px;}
    .brandItem:hover .brandtext{background-color:rgba(0,0,0,0.5);color:#fff;}
    .brandtext .left{float:left;width:60%;}
    .brandtext .left p{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;line-height:20px;}
    .brandtext .left .p1{font-size:16px;}
    .brandtext .right{float:right;margin-top:5px;}
    .brandtext .editBtn{cursor:pointer;}
/*    .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>
