<style>
  #table_time_selected1 tr {
    border: 1px solid rgb(102, 162, 243);
  }

  .plug-timer-grid th {
    line-height: 25px;
  }

  .group-creat .ant-form-item-required::before {
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '';
  }

  .else-label .ant-form-item-label label::after {
    content: '';
    position: relative;
    top: -0.5px;
    margin: 0 8px 0 2px;
  }
</style>
<template>
  <a-form @submit="handleSubmit" :form="form">
    <a-form-item label="目标应用" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }" v-if="campaignType == '2'">
      <a-select disabled v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch
        allowClear placeholder="选择应用目标" optionFilterProp="children" style="width: 500px" @focus="handleFocus"
        @blur="handleBlur" @change="handleChange" :filterOption="filterOption">
        <a-select-option value="0">请选择目标应用</a-select-option>
        <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
          {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
            appModel.platform | platform
          }}
        </a-select-option>
      </a-select>
      <a @click="addApplication" style="margin-left:10px">添加应用</a>
      <creat-application ref="application" />
    </a-form-item>
    <a-form-item label="转化类型" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" v-if="campaignType == '3'">
      <a-radio-group buttonStyle="solid"
        v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]">
        <a-radio-button value="1">淘宝商品</a-radio-button>
        <a-radio-button value="2">淘客商品</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item :label="campaignType == '3' ? ' ' : '链接'" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" v-if="campaignType != '2'"
      :class="{ elseLabel: campaignType == '3' }">
      <!-- 请填写以http://或者https://开头的落地页地址，长度不超过1000个字符 -->
      <a-input placeholder="请填写链接"
        v-decorator="['url', { rules: [{ required: true, message: ' ' }, { validator: handleConfirmValue }] }]" />
    </a-form-item>
    <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label"
      v-if="campaignType == '2'&&(getPlatForm(getData('appId'))=='1'||getPlatForm(getData('appId'))=='2')">

      <a-checkbox @change="onChange" :checked="allForm.useAppMarket">
        优先从系统应用商店下载
      </a-checkbox>
    </a-form-item>
    <div style="text-align:center;font-size:16px;margin-bottom:10px">
      目标人群
    </div>
    <a-form-item label="选择模板" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
      <a-select showSearch allowClear placeholder="选择模板" optionFilterProp="children" style="width: 500px"
        @change="handleChangeMould" :filterOption="filterOption">
        <a-select-option v-for="(appModel, index) in dataList" :key="index" :value="appModel.id">
          {{ appModel.templateName }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <targeted-population ref="population" :populationData.sync="populationData"
      :platform="getPlatForm(getData('appId'))" />
    <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label">
      <div style="display:flex;">
        <a-checkbox :checked="checkedTrue" @change="getCheck">
          是否设置为模板
        </a-checkbox>
        <a-input v-model="nameValue" v-if="checkedTrue" placeholder="请输入模板名称" style="width:70%" />
      </div>
    </a-form-item>

    <div style="text-align:center;font-size:16px">
      预算和排期
    </div>

    <a-form-item label="单日预算" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
      <a-radio-group buttonStyle="solid" v-model="allForm.dayBudget">
        <a-radio-button value="0">不限</a-radio-button>
        <a-radio-button value="1">统一预算</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label" v-if="allForm.dayBudget == '1'">
      <a-input placeholder="不小于100，不超过100000000，仅支持输入自然数" v-decorator="[
          'dayBudget',
          {
            rules: [{ required: true, message: '请填写预算' }, { validator: budgetValue }]
          }
        ]" />
    </a-form-item>
    <a-form-item label="投放方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
      <a-radio-group buttonStyle="solid" v-decorator="['speed', { initialValue: 1 }]">
        <a-radio-button :value="1">正常投放</a-radio-button>
        <a-radio-button :value="2">平滑投放</a-radio-button>
      </a-radio-group>
      <br />
      <span>
        {{ getData('speed') == '2' ? '平滑匀速投放' : '尽快展示广告消耗预算' }}
      </span>
    </a-form-item>
    <a-form-item label="排期" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
      <!-- v-decorator="['speed', { initialValue: '1' }]" -->
      <a-radio-group buttonStyle="solid" v-model="allForm.time" @change="setTime">
        <a-radio-button value="1">从今天开始长期投放</a-radio-button>
        <a-radio-button value="2">设置开始和结束日期</a-radio-button>
      </a-radio-group>
      <br />
      <a-range-picker v-if="allForm.time == '2'" v-model="timeRange" format="YYYY-MM-DD" :allowClear="false" />
    </a-form-item>
    <a-form-item label="投放时段" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
      <!-- v-decorator="['speed', { initialValue: '1' }]" -->
      <a-radio-group buttonStyle="solid" v-model="allForm.scheduleTime" @change="setTimeAll">
        <a-radio-button value="1">全天</a-radio-button>
        <a-radio-button value="2">特定时间</a-radio-button>
      </a-radio-group>
      <br />
      <selectCheckAll style="width:100%" v-show="allForm.scheduleTime == '2'"
        :scheduleTime.sync="allForm.scheduleTimeData" ref="selectCheck" />
    </a-form-item>

    <a-form-item label="创意展现方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
      <!-- v-decorator="['speed', { initialValue: '1' }]" -->
      <a-radio-group buttonStyle="solid" v-decorator="['showMode', { initialValue: 2 }]">
        <a-radio-button :value="2">智能优选</a-radio-button>
        <a-radio-button :value="1">随机轮播</a-radio-button>
      </a-radio-group>
      <br />
      <span>
        {{
          getData('showMode') == '1'
            ? '广告组包含的广告创意将随机展现'
            : '每一次展现的时候，系统会进行CTR预估，预估CTR高的会得到展现机会'
        }}
      </span>
    </a-form-item>


    <a-form-item label="场景广告位" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
      <!-- v-decorator="['speed', { initialValue: '1' }]" -->
      <a-radio-group buttonStyle="solid" v-model="allForm.sceneIdAll">
        <a-radio-button :value="1">优选广告位</a-radio-button>
        <a-radio-button :value="2">按场景选择广告位</a-radio-button>
      </a-radio-group>
      <!-- getData('speed') == '2' -->
      <br>

    </a-form-item>
    <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label" v-if="allForm.sceneIdAll == 2">
      <a-checkbox-group :defaultValue="[7]" v-model="allForm.sceneId">
        <a-checkbox :value="7">信息流广告</a-checkbox>
        <a-checkbox :value="6">上下滑大屏广告</a-checkbox>
        <a-checkbox :value="3">视频播放页广告</a-checkbox>
      </a-checkbox-group>
    </a-form-item>


    <div style="text-align:center;font-size:16px">优化目标和计费</div>
    <a-form-item label=" " :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
      :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" class="else-label">
      <div style="width:100%">
        <a-layout>
          <a-layout-content style="padding:10px;">
            <!-- <div :style="{ marginBottom: '16px' }">
                <a-button @click="addGroup" :disabled="allForm.group.length > 10">添加广告组</a-button>
              </div> -->
            <a-row>
              <a-col :sm="24" :md="24" :xl="24" :xxl="24" v-for="(item, index) of allForm.group" :key="index">
                <a-card title :ref="item" style="height:435px">
                  <div style="clear:both"></div>
                  <a-form-item label="优化目标" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }">
                    <a-radio-group buttonStyle="solid" v-model="item.bidType" @change="resData(index)">
                      <a-radio-button :value="1">点击数</a-radio-button>
                      <a-radio-button :value="2">行为数</a-radio-button>
                      <a-radio-button :value="180"
                        v-if=" allForm.groupTypeData.isActivate == '1'">激活</a-radio-button>
                      <a-radio-button :value="53"
                        v-if=" allForm.groupTypeData.isFormSubmit == '1'">
                        表单提交</a-radio-button>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item label="深度转化目标" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-if="
                      (item.bidType == 180 || item.bidType == 53) &&
                        allForm.groupTypeData.deepConversionTypes.length > 0
                    ">
                    <a-select v-model="item.deepConversionType" allowClear>
                      <a-select-option :value="items.deepConversionType"
                        v-for="(items, index) of allForm.groupTypeData.deepConversionTypes" :key="index">
                        {{ items.desc }}</a-select-option>
                    </a-select>
                  </a-form-item>

                  <a-form-item label="计费方式" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }">
                    <a-radio-group :defaultValue="1">
                      <a-radio :value="1">{{item.bidType == 1?"点击计费":"展示计费(oCPM)"}}</a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item label="出价" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-if="item.bidType == 1">
                    <a-input-number v-model="item.bid" @change="showTip(index)"
                      :style="{ borderColor: item.showTipCheck ? 'red' : '#d9d9d9' }" style="width:100%">
                    </a-input-number>
                    <span style="color:red" v-if="item.showTipCheck">不得低于0.2元，不得高于项目最高出价{{ maxBid }}元</span>
                  </a-form-item>
                  <a-form-item label="目标成本" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-else>
                    <a-input-number v-model="item.cpaBid" @change="showTip(index)"
                      :style="{ borderColor: item.showTipCheck ? 'red' : '#d9d9d9' }" style="width:100%">
                    </a-input-number>
                    <span style="color:red" v-if="item.showTipCheck">{{
                      item.bidType == 2
                        ? '不得低于1元，不得高于项目最高出价' + maxBid + '元'
                        : '不得低于1元，不得高于项目最高出价' + maxBid + '元'
                    }}</span>
                  </a-form-item>
                  <a-form-item label="深度转化出价" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-if="
                      (item.bidType == 180 || item.bidType == 53) &&
                        allForm.groupTypeData.deepConversionTypes.length > 0 &&
                        item.deepConversionType != ''
                    ">
                    <a-input-number v-model="item.deepConversionBid" @change="deep_conversion_bidTip(index)"
                      :style="{ borderColor: item.deepConversionBidCheck ? 'red' : '#d9d9d9' }" style="width:100%"
                      :disabled="item.cpaBid == ''"></a-input-number>
                    <span style="color:red" v-if="item.deepConversionBidCheck">深度转化目标成本必须高于优化目标成本，且不得高于3000元</span>
                  </a-form-item>
                  <a-form-item label="广告组名称" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }">
                    <a-input v-model="item.unitName" @change="checkGroup($event, index)"></a-input>
                    <span style="color:red" v-if="item.unitNameCheck">广告组名称重复</span>
                  </a-form-item>
                </a-card>
              </a-col>
            </a-row>
          </a-layout-content>
        </a-layout>
      </div>
    </a-form-item>
  </a-form>
</template>

<script>
  import {
    getAction,
    postAction,
    deleteAction,
    putAction
  } from '@/api/manage'
  import moment from 'moment'
  import {
    mapGetters
  } from 'vuex'
  import jq from 'jquery'
  import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  import targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue'

  import creatApplication from '@/views/modules/kuaishouapp/account/stepForm/stepModule/creatApplication.vue'

  import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
  import pick from 'lodash.pick'
  export default {
    name: 'new-mould',
    components: {
      targetedPopulation,
      Treeselect,
      creatApplication,
      selectCheckAll
    },
    data() {
      return {
        checkedTrue: false,
        nameValue: '',
        visible: false,
        timeRange: [],
        form: this.$form.createForm(this),
        step: 0,
        people: '2',
        targeted: '2',
        topMiddle: false,
        topMiddleNo: false,
        keyValue: '',
        keyValueNo: '',
        selectedRowKeys: [],
        selectedRowKeysValue: [],
        selectedRowKeysNo: [],
        selectedRowKeysValueNo: [],
        data: [],
        populationData: {},
        url: {
          insertTemplateUrl: '/kuaishou/create/createGroups',
          userAllocationList: '/ctop/userAllocation/list',
          campaignList: '/kuaishou/kuaiShouCampaignTemplate/list',
          getDeepConversionUrl: '/kuaishou/kuaiShouConversionTypes/getIsActivate',
          getCampaignTemplate: '/kuaishou/kuaiShouCampaignTemplate/getKuaiShouCampaignTemplate',
          appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list'
        },
        appList: [],
        appId: '',
        loading: false,
        campaignTemplateId: '',
        campaignType: '2',
        maxBid: 0,
        allForm: {
          dayBudget: '0',
          time: '1',
          scheduleTime: '1',
          scheduleTimeData: '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
          group: [],
          groupTypeData: {
            deepConversionTypes: [],
            isActivate: '0',
            isFormSubmit: '0'
          },
          fail: [],
          success: [],
          sceneId: [7],
          sceneIdAll: 1,
          useAppMarket: false
        },
        dataList: [],
        unitId: '',
        accountId: '',
        planId: ""
      }
    },
    computed: {},
    filters: {
      platform(str) {
        var data = {
          1: 'Android应用下载',
          2: 'Android网页游戏',
          3: 'iOS应用下载',
          4: 'iOS网页游戏'
        }
        return data[str]
      }
    },
    methods: {
      getCheck(e) {
        this.checkedTrue = e.target.checked
      },
      resData(index) {
        this.allForm.group[index].bid = ''
        this.allForm.group[index].cpaBid = ''
        this.allForm.group[index].showTipCheck = false
        this.allForm.group[index].deepConversionBidCheck = false
        this.allForm.group[index].deepConversionType = ''
        this.allForm.group[index].deepConversionBid = ''
      },
      removeGroup(index) {
        this.allForm.group.splice(index, 1)
      },
      deep_conversion_bidTip(index) {
        if (
          this.allForm.group[index].deepConversionBid < this.allForm.group[index].cpaBid ||
          this.allForm.group[index].deepConversionBid > 3000
        ) {
          this.allForm.group[index].deepConversionBidCheck = true
        } else {
          this.allForm.group[index].deepConversionBidCheck = false
        }
      },
      checkGroup(e, index) {
        if (e.target.value != '') {
          getAction('/kuaishou/batch/checkUnitName', {
            campaignId: localStorage.getItem('advertisingGroupKey'),
            unitName: e.target.value
          }).then(res => {
            this.allForm.group[index].unitNameCheck = !res.result
          })
        }

      },
      showTip(index) {
        if (this.allForm.group[index].bidType == 1) {
          if (this.allForm.group[index].bid < 0.2 || this.allForm.group[index].bid > this.maxBid) {
            this.allForm.group[index].showTipCheck = true
          } else {
            this.allForm.group[index].showTipCheck = false
          }
        } else if (this.allForm.group[index].bidType == 2) {
          if (this.allForm.group[index].cpaBid < 1 || this.allForm.group[index].cpaBid > this.maxBid) {
            this.allForm.group[index].showTipCheck = true
          } else {
            this.allForm.group[index].showTipCheck = false
          }
        } else {
          if (this.allForm.group[index].cpaBid < 1 || this.allForm.group[index].cpaBid > this.maxBid) {
            this.allForm.group[index].showTipCheck = true
          } else {
            this.allForm.group[index].showTipCheck = false
          }
        }
      },
      getScheduleTime(item) {
        this.allForm.scheduleTimeData = item
      },
      setTime(e) {
        //   console.log(moment('2019-12-27'))
        if (e.target.value == '2') {
          this.timeRange[0] = moment().startOf('day')
          this.timeRange[1] = moment().add(1, 'months')
        }
      },
      setTimeAll(e) {
        //   console.log(moment('2019-12-27'))
        //   if (e.target.value == '2') {
        //     this.$refs.selectCheck.init()
        //   } else {
        //   }
      },
      getData(className) {
        return this.form.getFieldValue(className)
      },
      handleConfirmValue(rule, value, callback) {
        if (this.campaignType == '3') {
          if (value == '') {
            callback('请填写链接')
          }
        } else if (this.campaignType == '4') {
          if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '' && value.length < 10000) {
            callback()
          } else {
            callback('链接不能为空且开头为http://或https://，并且长度小于10000')
          }
        } else if (this.campaignType == '5') {
          if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '' && value.length < 10000) {
            callback()
          } else {
            callback('链接不能为空且开头为http://或https://，并且长度小于10000')
          }
        }
      },
      budgetValue(rule, value, callback) {
        if (value < 100 || value > 100000000) {
          callback('不小于100，不超过100000000，仅支持输入自然数')
        }
        callback()
      },
      handleConfirmBid(rule, value, callback) {
        if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
          callback('不得低于0.2元，不得高于100元')
        }
        callback()
      },

      handleConfirmCpaBid(rule, value, callback) {
        if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
          callback('金额不得低于1元，不得高于3000元')
        }
        if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
          callback('金额不得低于5元，不得高于3000元')
        }
        callback()
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRowKeysValue = selectionRows.map(item => {
          return {
            orientationId: item.orientationId,
            orientationName: item.orientationName
          }
        })
      },
      getCheckboxProps(record) {
        return {
          props: {
            disabled: this.selectedRowKeysValueNo.some(item => item.orientationId === record.orientationId)
          }
        }
      },
      onSelectChangeNo(selectedRowKeys, selectionRows) {
        this.selectedRowKeysNo = selectedRowKeys
        this.selectedRowKeysValueNo = selectionRows.map(item => {
          return {
            orientationId: item.orientationId,
            orientationName: item.orientationName
          }
        })
      },
      getCheckboxPropsNo(record) {
        return {
          props: {
            disabled: this.selectedRowKeysValue.some(item => item.orientationId === record.orientationId)
          }
        }
      },
      okSelect() {
        this.keyValue = ''
        this.topMiddle = false
        for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
          this.keyValue += this.selectedRowKeysValue[i].orientationName + '   '
        }
      },
      okSelectNo() {
        this.keyValueNo = ''
        this.topMiddleNo = false
        for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
          this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + '   '
        }
      },
      radioChange() {
        this.selectedRowKeys = []
        this.selectedRowKeysValue = []
        this.selectedRowKeysNo = []
        this.selectedRowKeysValueNo = []
        this.keyValue = ''
        this.keyValueNo = ''
      },

      addApplication() {
        this.$refs.application.showApplication()
      },
      getBasicsData(item) {
        return new Promise((resolve, reject) => {
          this.getAppList(item)
          this.getCampaignList(item)
          this.getMould(item)
          getAction('/kuaishou/batch/getIsActivate', {
            accountId: item.accountId
          }).then(res => {
            if (res.success) {
              this.allForm.groupTypeData = res.result
            }
          })
          getAction('/kuaishou/batch/getProjectMaxBid', {
            accountId: item.accountId
          }).then(res => {
            if (res.success) {
              this.maxBid = res.result / 1000
            }
          })
          setTimeout(resolve(), 1000)
        })
      },
      handleOk(item) {
        this.accountId = item.accountId
        this.campaignId = item.campaignId
        this.planId = item.planId
        this.getBasicsData(item).then(() => {
          var params = {}
          params.accountId = item.accountId
          params.unitId = item.unitId
          getAction('/kuaishou/batch/getUnitDetail', params).then(res => {
            if (res.success) {
              var dataJson = {
                ...res.result.baseInfo,
                ...res.result.appInfo,
                ...res.result.target
              }
            //   dataJson.sceneId = JSON.parse(dataJson.sceneId)[0] == '1' ? '1' : '2'
              this.allForm.sceneIdAll = JSON.parse(dataJson.sceneId).filter(item => item == 1).length > 0 ? 1 : 2
              this.allForm.sceneId = this.allForm.sceneIdAll == 1 ? [7] : JSON.parse(res.result.baseInfo
              .sceneId)
              
              dataJson.dayBudget = dataJson.dayBudget / 1000
              this.allForm.dayBudget = dataJson.dayBudget == 0 ? '0' : '1'
              this.allForm.useAppMarket = dataJson.useAppMarket ? (dataJson.useAppMarket == 0 ? false : true) :
                false
              this.allForm.time = dataJson.endTime ? '2' : '1'
              this.timeRange = [moment(dataJson.beginTime), moment(dataJson.endTime)]
              this.allForm.scheduleTime = dataJson.scheduleTime.indexOf('1') != -1 ? '2' : '1'
              this.allForm.scheduleTimeData = dataJson.scheduleTime
              this.allForm.group = [{
                bidType: dataJson.ocpxActionType,
                bid: dataJson.bid,
                cpaBid: dataJson.cpaBid / 1000,
                showTipCheck: false,
                deepConversionBidCheck: false,
                unitName: dataJson.unitName,
                unitNameCheck: false,
                deepConversionType: dataJson.deepConversionType,
                deepConversionBid: dataJson.deepConversionBid / 1000
              }]

              this.populationData = dataJson
              this.populationData.population = dataJson.population ? JSON.parse(dataJson.population) : null
              this.populationData.excludePopulation = dataJson.excludePopulation ? JSON.parse(dataJson
                .excludePopulation) : null

              this.populationData.devicePrice = dataJson.devicePrice ? JSON.parse(dataJson.devicePrice) : null
              this.populationData.appInterest = dataJson.appInterest ? JSON.parse(dataJson.appInterest) : null
              this.populationData.businessInterest = dataJson.businessInterest ?
                JSON.parse(dataJson.businessInterest) :
                null
              this.populationData.fansStar = dataJson.fansStar ? JSON.parse(dataJson.fansStar) : null
              this.populationData.interestVideo = dataJson.interestVideo ? JSON.parse(dataJson.interestVideo) :
                null
              this.populationData.deviceBrand = dataJson.deviceBrand ? JSON.parse(dataJson.deviceBrand) : null

              this.populationData.age = dataJson.ageMin ? [dataJson.ageMin, dataJson.ageMax] : []
              this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
              this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
              this.populationData.allForm = {}
              this.populationData.allForm.regionType =
                dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'
              this.populationData.allForm.region = dataJson.region
              //   postAction('/kuaishou/batch/getRegionDetail', {
              //     regionArr: dataJson.region
              //   }).then(res => {
              //     console.log(res)
              //     if (res.success) {
              //       this.populationData.allForm.region = res.result
              //     }
              //   })

              this.populationData.allForm.ageType =
                dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.ageMin ? 'ageCustom' : 'noLimit'
              this.populationData.allForm.device = dataJson.deviceBrand ? '1' : '0'
              this.populationData.allForm.price = dataJson.devicePrice ? '1' : '0'
              this.populationData.allForm.appType = dataJson.appInterest ? '1' : dataJson.appIds ? '2' : '0'
              this.populationData.allForm.fansStar = dataJson.fansStar ? '1' : '0'
              this.populationData.allForm.interestVideo = dataJson.interestVideo ? '1' : '0'
              this.populationData.allForm.platform_os = dataJson.platformOs
              this.populationData.allForm.businessInterestType = dataJson.businessInterest ? 2 : 0
              this.populationData.allForm.isOpen = dataJson.isOpen
              this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
              this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
              this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''

              console.log(this.populationData.allForm, dataJson.agesRange)
              this.$nextTick(() => {
                this.form.setFieldsValue(pick(dataJson, ['appId', 'urlType', 'url', 'dayBudget', 'speed',
                  'showMode',
                'filterConvertedLevel'
                ]))
              })
            }
          })
        })
      },
      handleCancel(e) {
        this.visible = false
      },
      handleSubmit(e) {
        //   this.$refs.population.handleSubmit()
        e.preventDefault()
        this.$refs.population.handleSubmit()
        this.$emit('update:loadingGroup', true)
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true
            var groupArr = this.allForm.group.map(item => {
              return {
                ...item,
                cpaBid: item.cpaBid != '' ? item.cpaBid * 1000 : '',
                bid: item.bid != '' ? item.bid * 1000 : '',
                deepConversionBid: item.deepConversionBid != '' ? item.deepConversionBid * 1000 : '',
                ocpxActionType: item.bidType,
                bidType: item.bidType == 1 ? 2 : 10
              }
            })
            var json = {
              ...values,
              //   sceneId: [values.sceneId],
              sceneId: this.allForm.sceneIdAll == 1 ? [this.allForm.sceneIdAll] : this.allForm.sceneId,
              dayBudget: values.dayBudget * 1000
            }
            var params = {
              ...this.populationData,
              ...json,
              groupArr: groupArr,
              accountId: this.accountId,
              campaignId: this.planId,
              unitType: 4,
              beginTime: moment(this.timeRange[0]).format('YYYY-MM-DD'),
              endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
              scheduleTime: this.allForm.scheduleTimeData
            }
            if (this.allForm.useAppMarket == true || this.allForm.useAppMarket == false) {
              params.useAppMarket = this.allForm.useAppMarket ? 1 : 0
            }
            if (this.checkedTrue) {
              var data = this.populationData
              postAction('/kuaishou/batch/addDirectionalTemplate', {
                accountId: this.accountId,
                templateName: this.nameValue,
                templateContent: JSON.stringify(this.populationData)
              }).then(res => {})
            }
            postAction('/kuaishou/batch/createUnit', params).then(res => {
              if (res.success) {
                if (res.result.failCount > 0) {
                  this.$emit('update:loadingGroup', false)
                  this.$emit('update:jihua', false)
                  this.$emit('failInfo', res.result)
                } else {
                  this.$emit('failInfo', null)
                  this.$emit('update:loadingGroup', false)
                  this.$emit('update:jihua', false)
                }

              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      },
      onChange(value) {
        this.allForm.useAppMarket = e.target.checked
      },
      handleChange(value) {
        //   this.$refs.population.getAppList(value)
      },
      handleChangeMould(value) {
        if (value) {
          this.populationData = JSON.parse(
            this.dataList.filter(item => {
              return item.id == value
            })[0].templateContent
          )
        } else {
          this.populationData = {}
        }
      },
      getPlatForm(appId) {
        if (appId) {
          var data = this.appList.filter(item => {
            return item.appId == appId
          })
          return data[0].platform
        }
      },
      handleBlur() {
        console.log('blur')
      },
      handleFocus() {
        console.log('focus')
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      prevStep() {
        this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignId'))
      },
      getMould(item) {
        let params = {}
        params.accountId = item.accountId
        getAction('/kuaishou/batch/getDirectionalTemplate', params).then(res => {
          console.log(res)
          if (res.success) {
            this.dataList = res.result.map((item, index) => {
              return {
                ...item,
                key: index
              }
            })
          }
        })
      },

      getAppList(item) {
        let params = {}
        params.accountId = item.accountId
        getAction('/kuaishou/batch/getAppList', params).then(res => {
          if (res.success) {
            this.appList = res.result.map((item, index) => {
              return {
                ...item,
                key: index
              }
            })
          }
        })
      },
      getPeople(e) {
        console.log(e.target.value)
        if (e.target.value == 3) {
          getAction('/kuaishou/batch/getPopulationList', {
            accountId: item.accountId
          }).then(res => {
            if (res.success) {
              this.data = res.result.map((item, index) => {
                return {
                  ...item,
                  key: index
                }
              })
            }
          })
        }
      },
      getCampaignList(item) {
        var params = {}
        params.accountId = item.accountId
        params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('campaignId')
        getAction('/kuaishou/batch/getCampaignList', params).then(res => {
          if (res.success) {
            this.campaignType = res.result.records[0].campaignType
          }
        })
      },
      getData(className) {
        return this.form.getFieldValue(className)
      }
    },
    mounted: function () {}
  }
</script>