<template>
  <div class="newPlan">
    <a-form :form="form">
         <!-- 投放范围 -->
        <div class="moduler">
            <div class="moduler-title">请选择策略创建场景</div>
            <div class="ad-range">
            <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                <div class="text-item">创建场景</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>
                    <a-radio-group v-decorator="['scenes', { initialValue:'2' }]">
                    <a-radio-button value="1">素材+出价</a-radio-button>
                    <a-radio-button value="2">素材+定向</a-radio-button>
                    <a-radio-button value="3">时间+出价</a-radio-button>
                    </a-radio-group>
                </a-form-item>
                </div>
            </div>        
            </div>
        </div>

        <div class="moduler">
            <div class="moduler-title">选择账户</div>
            <div>
            <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                <div class="text-item">账户</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                    
                    <Treeselect :appId.sync="accountId" :multiple="false" request="2" reqUrl='/ctop/projectMember/getProjectAccountByUserId'  ref="treeSelect" style="margin-bottom:8px;width:580px " />
                </div>
            </div>
            </div>
        </div>
     
        <!-- 推广目的 -->
        <div class="moduler">
            <div class="moduler-title">请选择营销目标</div>
            
            <div class="row-item">
                <div class="hint-item">
                </div>
                <div class="label-item">
                <div class="text-item">营销目标</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                    <a-form-item >
                        <a-radio-group   v-decorator="['marketingGoal',{initialValue:'2' }]" @change="marketingGoalChange">
                            <a-radio-button value="2">提升应用安装</a-radio-button>
                            <a-radio-button value="3">获取电商下单</a-radio-button>                                   
                            <a-radio-button value="4">推广品牌活动</a-radio-button>                                   
                            <a-radio-button value="5">收集销售线索</a-radio-button>                                   
                            <a-radio-button value="7">提高应用活跃</a-radio-button>                                   
                        </a-radio-group>
                    </a-form-item>
                </div>
            </div>        
           
        </div>
    
        <!-- 基础信息 -->
        <div class="moduler">
            <div class="moduler-title">请设置基本信息</div>
            
            <div class="row-item">
            <div class="hint-item"> </div>
            <div class="label-item">
              <div class="text-item">策略名称</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <a-form-item>                
                <a-input v-model="strategyName"   allow-clear />
               </a-form-item>
            </div>
          </div>  
            
        </div>
    
      <div class="moduler">
        <div class="opt">
          <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
         
          <a-button type="primary" @click="goNext"  :loading="goNextloading">下一步</a-button>
        </div>
      </div>
    </a-form>
  </div>
</template>

<script>
import moment from 'moment'
import {mapGetters} from 'vuex';

import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import { TreeSelect } from 'ant-design-vue';
import qs from 'qs'
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
// import selectCheckAll from './toutiaoTime'

var str = ""
for (let i = 0; i < 7*48; i++) {
 str+='0'
  
}
export default {
    components: {
        // selectCheckAll,
        // newDirectedPackage,
        Treeselect
    },
    data() {
        return {
            treeData:[],
            accountId:undefined,
            strategyName: '',
            form: this.$form.createForm(this),

            goNextloading:false,
            goPlanShowloading:false,
            
            
            dateRange: [moment(), moment()],

            visible:false,
            errorInfo:[],
        
            validationRules: {
                url: [   
                {          
                    required: true,
                    validator: this.validateURL,
                },
                ],
                strategyName:[{
                required: true,
                validator: this.validateName,
                }],
                bid:[{
                required: true,
                message:'出价信息必须填写',
                // validator: this.validateBid,
                }],
                roi:[{
                required: true,
                message:'ROI系数必须填写',
                // validator: this.validateBid,
                }],
            },
            
        }
    },
    watch: {
        accountId(newValue,oldValue){
            if(newValue){
                this.treeData.forEach(item=>{
                    if(item.children){
                        item.children.forEach(ele=>{
                            if(ele.value==newValue){
                                this.$parent.accountInfo=ele
                            }
                        })
                    }
                })
                console.log(this.$parent.accountInfo)
            }
        }
    },
    methods: {
        ...mapGetters(['userInfo']),

        //获取表单的某一个属性值
        getFormData(className) {
        return this.form.getFieldValue(className)
        },
        dateChange(date, dateString) {
        // console.log(date,dateString)
        this.form.getFieldDecorator('startTime')
        this.form.getFieldDecorator('endTime')
        this.form.setFieldsValue({
            startTime: date[0].format('YYYY-MM-DD HH:mm'),
            endTime:  date[1].format('YYYY-MM-DD HH:mm'),
        })
        },
    
        //推广目的改变
        marketingGoalChange(e){
            console.log(e.target)
            let strategyNamepart=this.marketingGoalHandle(e.target.value);
            this.strategyName ='[策略]_'+ strategyNamepart+'_' + moment().format('MM_DD_hh:mm') ;

        },
    
        // 验证网址
        IsURL(res) {
        //   var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
        var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
        var re = new RegExp(strRegex)
        // console.log(re.test(res))
        if (re.test(res)) {
            return true
        } else {
            return false
        }
        },
        validateURL(rule, value, callback) {
        // console.log(rule, value, callback);

        if (this.IsURL(value)) {
            callback()
        } else if (value && !this.IsURL(value)) {
            callback('链接地址无法访问，请正确输入')
        } else {
            callback('链接必须填写')
        }
        },
        validateName(rule, value, callback){
        // console.log(rule, value, callback);

            if (value) {
            callback()
            } else {
                callback('应用包名称必须填写')
            }
        },
        validateBid(rule, value, callback){
        // console.log(rule, value, callback);
            if (value) {
            callback()
            } else {
                callback('出价必须填写')
            }
        },

   
    
        goBack() {
            this.$router.replace('/autoLaunch/autoLaunchList')
            this.$bus.$emit('remove', '/autoLaunch/newStrategy')
        },
    
        // 保存并新建创意
        goNext() {
        this.$nextTick(()=>{
            if (this.strategyName) {
                this.form.validateFields((err, values) => {
                if (!err) {

                    console.log('Received values of form: ', values)
                    // console.log(this.strategyNames)
                    values.accountId = this.accountId
                    values.strategyName=this.strategyName
                    this.$parent.strategyInfo=values;
                    this.$parent.currentTabComponent='setDirectional'
                }else{
                    this.$message.error('请正确填写必填项目')
                }
            })
                }else{
                    this.$message.error('请输入策略名称')
                }
        })
        
        },
        //请求项目和账户内容
        accountHttp(){
            this.treeData=[];
            this.accountIds=[];
            getAction('/ctop/projectMember/getProjectAccountByUserId?mediaType=2&userId=' + this.userInfo().id, {}).then(res => {
            if(res.success){
                    // console.log(res);
                    if(res.result){
                        res.result.forEach((element,index) => {
                        if(element){                  
                            this.treeData.push({});                    
                            this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
                            this.treeData[index].value='project'+element.project.projectId;
                            this.treeData[index].key=element.project.projectId;
                            this.treeData[index].mediaId=element.project.mediaId;
                            this.treeData[index].children=[];
                                                
                            if(element.account.length){
                            element.account.forEach((ele,i)=>{
                                this.treeData[index].children.push({});
                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                                this.treeData[index].children[i].value=ele.accountId;
                                this.treeData[index].children[i].key=ele.accountId;
                            })
                                
                            }                           
                        }      
                        });
                        // console.log(this.treeData)
                        
                    }
            }
            })
        },


        marketingGoalHandle(val){
            let str='';
            switch (val) {
                case '2':
                    str='应用安装'
                    break;
                case '3':
                    str='电商下单'
                    break;
                case '4':
                    str='推广品牌'
                    break;
                case '5':
                    str='营销线索'
                    break;
                case '7':
                    str='应用活跃'
                    break;
            
                default:
                    str='转化错误'
                    break;
            }
            return str
        },
    },
    
  mounted() {
    this.accountHttp()
    // this.$bus.$emit('remove', '/modules/BatchCreate/newGroup')
    let strategyNamepart=this.marketingGoalHandle(this.getFormData('marketingGoal'));
    
    
    this.strategyName ='[策略]_'+ strategyNamepart+'_' + moment().format('MM_DD_hh:mm') ;

    
    this.$nextTick(()=>{
      if(this.$parent.strategyInfo.accountId){
          this.form.setFieldsValue(
            {
              ...this.$parent.strategyInfo
            }
          )
          this.accountId=this.$parent.strategyInfo.accountId
          this.strategyName=this.$parent.strategyInfo.strategyName
      }
    })

    
  },
}
</script>
<style lang="scss">
.newPlan{
  .ant-btn-danger {
    background-color: #ff4d4f !important; 
  }
}


.ant-tooltip-inner,
.ant-tooltip-arrow::before {
  background-color: #fff;
  color: #333;
}
.ant-tooltip-inner {
  span {
    display: block;
  }
}
.ant-tooltip {
  max-width: 450px;
}
.newPlan {
  .ant-radio-button-wrapper {
    min-width: 80px;
    text-align: center;
  }
  .ant-form-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    vertical-align: top;
  }
  .directedBody {
    .ant-form-item {
      margin-bottom: 20px;
    }
  }
}
</style>
<style lang="scss" scoped>
.newPlan {
  font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  color: #333;
  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: 9px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 10px;
      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;
      }
    }
  }
  .opt {
    text-align: right;
  }
}
</style>