<template>
  <div class="selectPlan">
    <!-- 跳转至选择已有 -->
    <div class="moduler">
        <div class="moduler-title">选择广告组</div>
        <div>
          广告组名称：
                 
            <a-tree-select
                show-search
                allow-clear
                dropdownMatchSelectWidth
                v-model="groupId"
                style="width: 60%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                placeholder="请选择具体广告组"                   
                :filterOption='filterOption'
                treeNodeFilterProp='title'
                @change='groupChange'                  
            >                   
            </a-tree-select>
          

        </div>
    </div>
    <div class="tabBody">
       <a-tabs v-model="tabKey">
          <a-tab-pane key="exist" tab="选择已有广告计划" forceRender>
              <div class="selectedExist">
                  <a-input v-model="selectedPlanValue" class="input" placeholder="请输入广告计划id或名称" @change="selectedPlan">
                      <a-icon slot="addonAfter" type="search" />
                  </a-input>
                  <div class="campaign-have-list">
                      <div class="campaign-have-header">列表</div>
                      <div class="hasAccountID" v-if="groupId">
                          <a-spin :spinning="spinning">
                              <ul v-if="planHaveList.length>0">
                                  <li class="ad-d-flex ad-d-flex-between" v-for="(item,index) in planHaveList" :key="index" @click="goCreate(item)">
                                      <span class="info">{{item.name}}</span>
                                      <!-- <span class="landing-type"></span> -->
                                  </li>
                              </ul>
                              <div v-else class="noAccountID">
                                  暂无数据
                              </div>
                          </a-spin>
                      </div>
                      <div class="noAccountID" v-else>
                          选择广告组后，才能选择已有广告计划
                      </div>
                      
                  </div>
                  <div class="fenye" v-if="totalPage">
                      <a-pagination :current='currentPage' size='small' :total='totalPage' :pageSize='10' @change="pageNoChange" />
                  </div>
              </div>             
              <a-tab-pane key="create" tab="新建广告组">
                
              </a-tab-pane>
          </a-tab-pane>      
          <a-tab-pane key="create" tab="新建广告计划" forceRender>
              <div class="selectedExist">
                  
                  <div class="campaign-have-list">
                      <div class="campaign-have-header">操作</div>
                      <div class="hasAccountID" v-if="groupId">
                          <a-button type='danger' @click="newCreate" style="margin-top:150px">去新建计划</a-button>
                      </div>
                      <div class="noAccountID" v-else>
                          选择广告组后，才能新建已有广告计划
                      </div>
                      
                  </div>
                 
              </div>             
          </a-tab-pane>      
      </a-tabs>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import qs from 'qs'
  export default {
    data() {
      return {
        selectedPlanValue:undefined,
        spinning:false,
        currentPage:1,
        totalPage:0,
        tabKey:'exist',
        planHaveList:[],
        groupId:undefined,
        planId:undefined,
        treeData:[],
        accountInfo:{},

      }
    },
    methods: {
      //分页页码改变
      pageNoChange(val){
          console.log(val);
          this.currentPage=val;
          this.selectedPlan()
      },
      selectedPlan(e){
            // console.log(e.target.value,this.selectedPlanValue);
            if(this.groupId){
                this.getExsitPlanList();
            }else{
                this.$message.warning('请选择具体广告组后重试！')
                this.selectedPlanValue=undefined;
            }
      },
      getExsitPlanList(){
          this.spinning=true;
          getAction('/ctop/byteDanceAdvertisePlan/list',{
              accountId:this.accountInfo.value,
              pageNo:this.currentPage,
              name:this.selectedPlanValue,
              campaignId:this.groupId
          }).then(res=>{
              console.log(res)
              if(res.success){
                  this.spinning=false;
                  this.totalPage=res.result.total;
                  this.planHaveList=res.result.records;
              }
          })
      },
      filterOption(input, option){
            console.log(input, option)
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
      },
      groupChange(val){
          console.log(val,this.groupId);
          // let currentData=this.treeData.filter((item)=>{
          //     return item.value==val
          // })
          // // console.log(currentData);
          // if(currentData.length>0){
          //     this.groupId=undefined;
          //     this.openID=val
          // }
          this.getExsitPlanList();
          console.log(this.treeData)
          this.treeData.forEach((item)=>{
              
            if(item.value==val){
                let groupInfo=JSON.stringify(item)
                localStorage.setItem('groupInfo',groupInfo)
            }
          })
         
      },
      
      goCreate(item){
          // console.log(item)
          let planInfo=JSON.stringify([item])
          localStorage.setItem('planInfo',planInfo);
          this.$router.replace(`/modules/BatchCreate/newCreate`);

      },
      newCreate(){
        this.$router.replace(`/modules/BatchCreate/newPlan`);
      },
      groupHttp(){
        this.treeData=[];
        this.groupId=undefined;
        getAction('/ctop/byteDanceCampaign/list', {
           accountId:this.accountInfo.value,
           pageSize:1000,
        }).then(res => {
          console.log(res);
          if(res.success){
              
            if(res.result){
              // this.treeData=res.result.records
                let treeData=[]
                res.result.records.forEach((element,index) => {
                  if(element){
                      element.title=element.name+'_('+element.landingType_dictText+')';
                      element.value=element.id;
                      element.key=element.id;        
                  }
                });
                // console.log(this.treeData)
                this.treeData=res.result.records
            }
          }
        })
      },
    },
    mounted() {
      let accountInfo = localStorage.getItem('accountInfo');
      if(accountInfo){
        this.accountInfo=accountInfo
      }
      this.groupHttp()
    },
    beforeDestroy() {
      this.$bus.$emit('remove', '/modules/BatchCreate/selectPlanList')
    },
  }
</script>
<style lang="less">
.selectPlan{
  .ant-btn-danger {
    background-color: #ff4d4f !important; 
  }
}
</style>
<style lang="less" scoped>
.selectPlan{
  ul,li{
    margin: 0;
    padding:0
  }
  .moduler {
    background: #fff;
    margin-bottom: 16px;
    position: relative;
    padding: 32px 24px 48px 32px;
    border-radius: 4px;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
    .moduler-title {
      display: flex;
      align-items: center;
      font-size: 22px;
      margin-bottom: 20px;
    }
    .row-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
    }
    .row-item:last-of-type {
      margin-bottom: 0;
    }
    .row-item .hint-item {
      width: 24px;
      min-width: 24px;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 5px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 7px;
      width: 80px;
      min-width: 80px;
      .text-item {
        font-size: 14px;
        width: 60px;
      }
    }
    .row-item .required-item {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background: #f45858;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .row-item .input-item {
      min-width: 480px;
      position: relative;
      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }
    }
  }
  
        .tabBody{
            background: #fff;
            margin-bottom: 20px;
            padding: 20px 30px;
            .tip{
                font-size: 12px;
                color: tomato;
                display: block;
                margin-top: 5px;
                height: 20px;
                line-height: 20px;
                
            }
            .selectedExist{
                width: 600px;
                .input{
                    margin-bottom:16px ;
                }
                .campaign-have-list{
                    font-family: PingFangSC-Regular;
                    font-size: 14px;
                    color: #333;
                    border: 1px solid #DADFE3;
                    border-radius: 4px;
                    margin-bottom: 16px;
                    height: 388px;
                    .campaign-have-header {
                        height: 38px;
                        width: 100%;
                        padding-left: 13px;
                        line-height: 38px;
                        background: #f8f9fa;
                        border-radius: 4px 4px 0px 0px;
                        border-bottom: 1px solid #DADFE3;
                    }
                    .campaign-have-list ul {
                        width: 100%;
                        height: 350px;
                        padding-top: 6px;
                        
                    }
                    li{
                        padding: 6px 10px;
                        cursor: pointer;
                    }
                    li:hover{
                        background: #EDF1F5;
                    }
                    .ad-d-flex-between {
                        justify-content: space-between !important;
                    }

                    .ad-d-flex, .ad-btn {
                        display: flex;
                        align-items: center;
                    }
                    .byted-loading-v {
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        z-index: 996;
                        background-color: hsla(0,0%,96%,.9);
                    }
                    .info{
                        width: 60%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: left;
                    }
                    .landing-type {
                        color: #999;
                        font-size: 12px;
                        white-space: nowrap;
                    }
                }
                .noAccountID{
                    font-size: 14px;
                    text-align: center;
                    color: #999;
                    line-height: 388px;
                }
                .fenye{
                    height: 60px;
                    padding-top: 12px;
                    text-align: right;
                }
                .hasAccountID{
                  text-align: center;
                }
            }
        }
        .creatBody{
            background: #fff;
            margin-bottom: 20px;
            padding: 20px 30px;
            text-align: right;
            .goback{
                margin-right: 20px;
            }
        }
    
}
</style>