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

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

.module-form .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>
<style scoped>
ul {
  padding-left: 0;
}
li {
  list-style: none;
}
li:hover {
  background: #f2f2f2;
}
</style>
<template>
  <a-form :form="formAll" class="module-form" @submit="handleSubmit">
    <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="people" @change="getPeople">
        <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-group>
    </a-form-item>
    <a-form-item
      v-if="people == '3'"
      label="定向逻辑"
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
    >
      <a-radio-group buttonStyle="solid" v-model="targeted" @change="radioChange">
        <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-group>
      <div
        :style="{
          border: targeted == '4' ? '1px solid #f2f2f2' : '0',
          padding: targeted == '4' ? '20px' : '0'
        }"
        v-clickoutside="targetedShow"
      >
        <div style="display:flex;margin-top:15px" v-if="targeted == '4' || targeted == '2'">
          <span style="white-space:nowrap;width:10%" v-if="targeted == '4'">定向池：</span>
          <a-input
            placeholder="请至少选择一个自定义人群"
            @focus="
              topMiddle = true
              topMiddleNo = false
              dataList = dataElse
            "
            v-model="keyValue"
            @change="showOne"
          />
        </div>

        <div
          style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
          :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
          v-show="topMiddle"
        >
          <a-table
            :columns="columns"
            :dataSource="dataList"
            bordered
            :pagination="false"
            :scroll="{ y: 300 ,x:true }"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
              getCheckboxProps: getCheckboxProps
            }"
          >
            <span slot="orientationName" slot-scope="text, record">{{ text }}({{ record.orientationId }})</span>
            <span slot="populationType" slot-scope="text">{{ text | population_type }}</span>
            <span slot="putTime" slot-scope="text">{{ text | getDate }}</span>
          </a-table>
          <div style="text-align:right">
            <a-button style="margin-right:5px" @click="topMiddle = false">取消</a-button>
            <a-button type="primary" @click="okSelect">确定</a-button>
          </div>
        </div>
        <div style="display:flex;margin-top:15px" v-if="targeted == '4' || targeted == '3'">
          <span style="white-space:nowrap;width:10%" v-if="targeted == '4'">排除池：</span>
          <a-input
            placeholder="请至少选择一个自定义人群"
            @focus="
              topMiddleNo = true
              topMiddle = false
              dataList = dataElse
            "
            v-model="keyValueNo"
            @change="showTwo"
          />
        </div>

        <div
          style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
          :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
          v-show="topMiddleNo"
        >
          <a-table
            :columns="columns"
            :dataSource="dataList"
            bordered
            :pagination="false"
            :scroll="{ y: 300 ,x:true}"
            :rowSelection="{
              selectedRowKeys: selectedRowKeysNo,
              onChange: onSelectChangeNo,
              getCheckboxProps: getCheckboxPropsNo
            }"
          >
            <span slot="orientationName" slot-scope="text, record">{{ text }}({{ record.orientationId }})</span>
            <span slot="populationType" slot-scope="text">{{ text | population_type }}</span>
            <span slot="putTime" slot-scope="text">{{ text | getDate }}</span>
          </a-table>
          <div style="text-align:right">
            <a-button style="margin-right:5px" @click="topMiddleNo = false">取消</a-button>
            <a-button type="primary" @click="okSelectNo">确定</a-button>
          </div>
        </div>
      </div>
    </a-form-item>
    <a-form-item
      label="地区"
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
    >
      <a-radio-group @change="regionChange" v-model="allForm.regionType" buttonStyle="solid">
        <a-radio-button value="noLimit">不限</a-radio-button>
        <a-radio-button value="limit">指定地区</a-radio-button>
      </a-radio-group>
      <div v-if="allForm.regionType == 'limit'" style="margin-top:10px">
        <select-region :checkData.sync="allForm.region" :dataValue="allForm.region" />
      </div>
    </a-form-item>
    <a-form-item
      label="年龄"
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
    >
      <a-radio-group v-model="allForm.ageType" buttonStyle="solid">
        <a-radio-button value="noLimit">不限</a-radio-button>
        <a-radio-button value="ageLimit">限定年龄段</a-radio-button>
        <a-radio-button value="ageCustom">自定义年龄段</a-radio-button>
      </a-radio-group>
      <div v-if="allForm.ageType == 'ageLimit'">
        <a-checkbox-group v-decorator="['agesRange', { rules: [{ required: true, message: '请选择年龄段' }] }]">
          <!-- <a-checkbox :value="0">0-11岁</a-checkbox>
          <a-checkbox :value="12">12-17岁</a-checkbox> -->
          <a-checkbox :value="18">18-23岁</a-checkbox>
          <a-checkbox :value="24">24-30岁</a-checkbox>
          <a-checkbox :value="31">31-40岁</a-checkbox>
          <a-checkbox :value="41">41-49岁</a-checkbox>
          <a-checkbox :value="50">50+</a-checkbox>
        </a-checkbox-group>
      </div>
      <div v-if="allForm.ageType == 'ageCustom'">
        <a-slider
          range
          :marks="marks"
          :min="5"
          :max="55"
          v-decorator="[
            'age',
            {
              rules: [{ required: true, message: '请选择年龄段' }, { validator: handleConfirmValue }],
              initialValue: [10, 50]
            }
          ]"
        />
      </div>
    </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="[
          'gender',
          {
            initialValue: 0
          }
        ]"
      >
        <a-radio-button :value="0">不限</a-radio-button>
        <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="最低版本"
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
    >
      <a-radio-group buttonStyle="solid" v-model="allForm.platform_os">
        <a-radio-button :value="0" v-if="getApp == '0'">不限</a-radio-button>
        <a-radio-button :value="1" v-if="getApp == '0' || getApp == '1'">Android系统</a-radio-button>
        <a-radio-button :value="2" v-if="getApp == '0' || getApp == '2'">IOS系统</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 } }"
      v-if="allForm.platform_os == 1"
      class="else-label"
    >
      <a-radio-group
        v-decorator="[
          'androidOsv',
          {
            initialValue: 3
          }
        ]"
      >
        <a-radio :value="3">不限</a-radio>
        <a-radio :value="4">4X+</a-radio>
        <a-radio :value="5">5x+</a-radio>
        <a-radio :value="6">6x+</a-radio>
        <a-radio :value="7">7x+</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      label=" "
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      v-if="allForm.platform_os == 2"
      class="else-label"
    >
      <a-radio-group
        v-decorator="[
          'iosOsv',
          {
            initialValue: 6
          }
        ]"
      >
        <a-radio :value="6">不限</a-radio>
        <a-radio :value="7">7X+</a-radio>
        <a-radio :value="8">8x+</a-radio>
        <a-radio :value="9">9x+</a-radio>
        <a-radio :value="10">10x+</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      v-if="allForm.platform_os != 2"
      label="设备品牌"
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
    >
      <a-radio-group buttonStyle="solid" v-model="allForm.device">
        <a-radio-button value="0">不限</a-radio-button>
        <a-radio-button value="1">选择品牌</a-radio-button>
      </a-radio-group>
      <div v-if="allForm.device == '1'" style="width:120%">
        <a-checkbox-group
          v-decorator="['deviceBrand', { rules: [{ required: true, message: '请选择设备品牌' }] }]"
          style="width:120%"
        >
          <a-checkbox :value="1">OPPO</a-checkbox>
          <a-checkbox :value="2">VIVO</a-checkbox>
          <a-checkbox :value="3">华为</a-checkbox>
          <a-checkbox :value="4">小米</a-checkbox>
          <a-checkbox :value="5">荣耀</a-checkbox>
          <a-checkbox :value="6">三星</a-checkbox>
          <a-checkbox :value="7">金立</a-checkbox>
          <a-checkbox :value="8">魅族</a-checkbox>
          <a-checkbox :value="9">乐视</a-checkbox>
          <a-checkbox :value="10">其他</a-checkbox>
          <a-checkbox :value="11" v-if="allForm.platform_os == 0">苹果</a-checkbox>
        </a-checkbox-group>
      </div>
    </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-model="allForm.price">
        <a-radio-button value="0">不限</a-radio-button>
        <a-radio-button value="1">选择价格</a-radio-button>
      </a-radio-group>
      <div v-if="allForm.price == '1'" style="width:120%">
        <a-checkbox-group
          v-decorator="['devicePrice', { rules: [{ required: true, message: '请选择设备价格' }] }]"
          style="width:120%"
        >
          <a-checkbox :value="1">1500以下</a-checkbox>
          <a-checkbox :value="2">1501~2000</a-checkbox>
          <a-checkbox :value="3">2001~2500</a-checkbox>
          <a-checkbox :value="4">2501~3000</a-checkbox>
          <a-checkbox :value="5">3001~3500</a-checkbox>
          <a-checkbox :value="6">3501~4000</a-checkbox>
          <a-checkbox :value="7">4001~4500</a-checkbox>
          <a-checkbox :value="8">4501~5000</a-checkbox>
          <a-checkbox :value="9">5001~5500</a-checkbox>
          <a-checkbox :value="10">5500以上</a-checkbox>
        </a-checkbox-group>
      </div>
    </a-form-item>
    <a-form-item
      label="APP行为"
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      v-if="allForm.platform_os == 1&&allForm.platform_os"
    >
      <a-radio-group buttonStyle="solid" v-model="allForm.appType" @change="getAppType">
        <a-radio-button value="0">不限</a-radio-button>
        <a-radio-button value="1">按分类</a-radio-button>
        <a-radio-button value="2">按APP名称</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 } }"
      v-if="allForm.platform_os == 1 && allForm.appType == '1'"
      class="else-label"
    >
      <a-select
        mode="multiple"
        style="width: 100%"
        optionFilterProp="children"
        showSearch
        :filterOption="filterOption"
        v-decorator="['appInterest', { rules: [{ required: true, message: '请选择APP行为' }] }]"
      >
        <a-select-option v-for="item in optionsAppActive" :key="item.tagId" :value="item.tagId">{{
          item.tagName
        }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label=" "
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      v-if="allForm.platform_os == 1 && allForm.appType == '2'"
      class="else-label"
    >
      <div style="position:relative;" v-clickoutside="handleClose">
        <a-input
          placeholder="请输入搜索内容"
          @change="getAppAll"
          @focus="getAppAll"
          style="width:100%;position:relative;"
        />
        <div
          style="width:100%;position:absolute;z-index:10;height:200px;background:white;overflow:auto;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);"
          v-if="closeDialog"
        >
          <ul>
            <li style="padding:0 10px">
              <a-checkbox
                style="float:left;margin:0 5px"
                @change="onCheckAllChange"
                :indeterminate="indeterminate"
                :checked="checkAll"
              ></a-checkbox
              >全选
            </li>
            <a-checkbox-group @change="onChange" v-model="checkArr" class="home-card" style="width:100%">
              <li style="padding:0 10px;width:100%;" v-for="item of optionsApp" :key="item.appId">
                <a-checkbox :value="item.appId" style="float:left;margin:0 5px"></a-checkbox>{{ item.appName }}
              </li>
            </a-checkbox-group>
          </ul>
        </div>
        <div style="width:100%" v-if="optionsAll.length > 0">
          <a-button @click="clearAll">清空</a-button>
          <br />
          <a-tag v-for="item of optionsAll" :key="item" closable :afterClose="() => log(item)">
            {{ showAppName(item)?showAppName(item):item }}
          </a-tag>
        </div>
      </div>
    </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" @change="businessInterest" v-model="allForm.businessInterestType">
        <a-radio-button :value="0">不限</a-radio-button>
        <a-radio-button :value="1">智能推荐</a-radio-button>
        <a-radio-button :value="2">兴趣标签</a-radio-button>
      </a-radio-group>
      <br>
      <span v-if="allForm.businessInterestType==1">商业兴趣定向会根据您的投放计划，智能精选出最匹配人群，帮助您获取更满足投放意图的人群，以达到最好的投放效果。</span>
    </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.businessInterestType == 2"
    >
      <a-select
        mode="multiple"
        style="width: 100%"
        optionFilterProp="children"
        showSearch
        :filterOption="filterOption"
        v-decorator="['businessInterest', { rules: [{ required: true, message: '请选择商业兴趣' }] }]"
      >
        <a-select-option v-for="item in businessOptions" :key="item.tagId" :value="item.tagId">{{
          item.tagName
        }}</a-select-option>
      </a-select>
    </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="[
          'network',
          {
            initialValue: 0
          }
        ]"
      >
        <a-radio-button :value="0">不限</a-radio-button>
        <a-radio-button :value="1">Wi-Fi</a-radio-button>
        <a-radio-button :value="2">移动网络</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 } }"
    >
      <a-radio-group buttonStyle="solid" v-model="allForm.fansStar" @change="fansStar">
        <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.fansStar == '1'"
    >
      <a-select
        mode="multiple"
        style="width: 100%"
        optionFilterProp="children"
        showSearch
        :filterOption="filterOption"
        v-decorator="['fansStar', { rules: [{ required: true, message: '请选择网红类别' }] }]"
      >
        <a-select-option v-for="item in fansStarOptions" :key="item.tagId" :value="item.tagId">{{
          item.tagName
        }}</a-select-option>
      </a-select>
    </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-model="allForm.interestVideo" @change="interestVideo">
        <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.interestVideo == '1'"
    >
      <a-select
        mode="multiple"
        style="width: 100%"
        optionFilterProp="children"
        showSearch
        showArrow
        :filterOption="filterOption"
        v-decorator="['interestVideo', { rules: [{ required: true, message: '请选择视频标签' }] }]"
      >
        <a-select-option v-for="item in interestVideoOptions" :key="item.tagId" :value="item.tagId">{{
          item.tagName
        }}</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item
      label="智能扩量"
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
    >
      <!-- v-decorator="[
          'isOpen',
          {
            initialValue: '0'
          }
        ]" -->
      <a-radio-group buttonStyle="solid" v-model="allForm.isOpen">
        <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.isOpen == 1"
    >
      <a-checkbox :disabled="allForm.ageType == 'noLimit'" :checked="allForm.noAgeBreak" @change="getAge"
        >不可突破年龄</a-checkbox
      >
      <a-checkbox :disabled="getData('gender') == '0'" :checked="allForm.noGenderBreak" @change="getGender"
        >不可突破性别</a-checkbox
      >
      <a-checkbox :disabled="allForm.regionType != 'limit'||allForm.region.length==0" :checked="allForm.noAreaBreak" @change="getArea"
        >不可突破地域</a-checkbox
      >
    </a-form-item>
  </a-form>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import { mapGetters } from 'vuex'
import jq from 'jquery'

import selectRegion from './selectRegion'
import pick from 'lodash.pick'
let dateQuantumRangeConst = ''
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}

const columns = [
  {
    title: '人群',
    dataIndex: 'orientationName',
    scopedSlots: { customRender: 'orientationName' },
    width: 150
  },
  {
    title: '属性',
    dataIndex: 'populationType',
    filters: [
      { text: '上传人群', value: '1' },
      { text: '广告人群', value: '2' },
      { text: '主题专区', value: '3' },
      { text: '逻辑规则', value: '4' },
      { text: '人群扩展', value: '5' },
      { text: '平台定制', value: '6' },
      { text: '定制付费', value: '7' },
      { text: '网红粉丝类别', value: '8' },
      { text: '内容付费行为', value: '9' },
      { text: '移动应用安装', value: '10' },
      { text: '快手使用活跃度', value: '11' },
      { text: '行业分类', value: '12' },
      { text: '商业兴趣', value: '13' },
      { text: '固化标签', value: '14' },
      { text: '行业偏好', value: '15' },
      { text: '第三方标签', value: '16' },
      { text: '产品关键词', value: '17' }
    ],
    onFilter: (value, record) =>
      record.populationType
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
    scopedSlots: { customRender: 'populationType' },
    width: 150
  },
  {
    title: '创建时间',
    dataIndex: 'putTime',
    scopedSlots: { customRender: 'putTime' },
    sorter: (a, b) => a.putTime - b.putTime
  }
]

export default {
  name: 'BaseForm',
  components: { selectRegion },
  props: {
    campaignId: {
      type: String,
      default() {
        return null
      }
    },
    platform: {
      default() {
        return null
      }
    },
    populationData: {}
  },
  filters: {
    getDate(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + MM + '-' + d
    },
    platform(str) {
      var data = {
        1: 'Android应用下载',
        2: 'Android网页游戏',
        3: 'iOS应用下载',
        4: 'iOS网页游戏'
      }
      return data[str]
    },
    population_type(str) {
      var data = {
        1: '上传人群',
        2: '广告人群',
        3: '主题专区',
        4: '逻辑规则',
        5: '人群扩展',
        6: '平台定制',
        7: '定制付费',
        8: '网红粉丝类别',
        9: '内容付费行为',
        10: '移动应用安装',
        11: '快手使用活跃度',
        12: '行业分类',
        13: '商业兴趣',
        14: '固化标签',
        15: '行业偏好',
        16: '第三方标签',
        17: '产品关键词'
      }
      return data[str]
    }
  },
  watch: {
    platform(n, o) {
      if (n == 1 || n == 2) {
        // platform_os
        this.allForm.platform_os = 1
        // this.form.setFieldsValue({ platform_os: '1' })
      } else if (n == 3 || n == 4) {
        this.allForm.platform_os = 2
        // this.form.setFieldsValue({ platform_os: '2' })
      } else {
        this.allForm.platform_os = 0
        // this.form.setFieldsValue({ platform_os: '0' })
      }
    },
    populationData: {
      immediate: true, // immediate选项可以开启首次赋值监听
      handler(n, oldVal) {
        console.log(n)
        if (n.allForm) {
          this.allForm = n.allForm
          this.allForm.noAgeBreak = n.noAgeBreak == '0' ? false : true
          this.allForm.noGenderBreak = n.noGenderBreak == '0' ? false : true
          this.allForm.noAreaBreak = n.noAreaBreak == '0' ? false : true
          this.selectedRowKeys = n.population ? n.population : []
          this.selectedRowKeysNo = n.excludePopulation ? n.excludePopulation : []
          this.optionsAll = n.appIds
          this.targeted = n.excludePopulation ? (n.population ? '4' : '3') : '2'
          this.people = n.excludePopulation ? '3' : n.population ? '3' : '2'
          this.getPeople().then(res => {
            if (n.excludePopulation) {
              this.keyValueNo = ''
              this.selectedRowKeysValueNo = []
              for (let i = 0; i < res.length; i++) {
                for (let j = 0; j < n.excludePopulation.length; j++) {
                  if (res[i].orientationId == n.excludePopulation[j]) {
                    this.keyValueNo += res[i].orientationName + '   '
                    this.selectedRowKeysValueNo.push({
                      orientationId: res[i].orientationId,
                      orientationName: res[i].orientationName
                    })
                    this.selectedRowKeysNo.push()
                  }
                }
              }
            }
            if (n.population) {
              this.keyValue = ''
              this.selectedRowKeysValue = []
              for (let i = 0; i < res.length; i++) {
                for (let j = 0; j < n.population.length; j++) {
                  if (res[i].orientationId == n.population[j]) {
                    this.keyValue += res[i].orientationName + '   '
                    this.selectedRowKeysValue.push({
                      orientationId: res[i].orientationId,
                      orientationName: res[i].orientationName
                    })
                  }
                }
              }
            }
          })
          this.$nextTick(() => {
            this.formAll.setFieldsValue(
              pick(n, [
                'fansStar',
                'interestVideo',
                'appInterest',
                'gender',
                'network',
                'agesRange',
                'age',
                'androidOsv',
                'iosOsv',
                'deviceBrand',
                'devicePrice',
                'businessInterest'
              ])
            )
          })
        } else {
          this.formAll.resetFields()
          this.selectedRowKeys = []
          this.selectedRowKeysNo = []
          this.selectedRowKeysValueNo = []
          this.selectedRowKeysValue = []
          this.targeted = '2'
          this.people = '2'
          this.allForm = {
            regionType: 'noLimit',
            region: [],
            ageType: 'noLimit',
            age: [],
            device: '0',
            price: '0',
            appType: '0',
            fansStar: '0',
            interestVideo: '0',
            platform_os: 0,
            businessInterestType: 0,
            isOpen: 0,
            noAgeBreak: false,
            noGenderBreak: false,
            noAreaBreak: false
          }
        }
      }
    },
    checkArr(n, o) {
      console.log(n, o)
      this.optionsAll.push(...n)
      this.optionsAll = [...new Set(this.optionsAll)]
      if (n.length != o.length) {
        if (n.length < o.length) {
          var a = new Set(n)
          var b = new Set(o)
          var c = new Set([...b].filter((item) => !a.has(item))) // {1}
          console.log(...c)
          var d = this.optionsAll.indexOf(...c)
          if (d > 0) {
            this.optionsAll.splice(d, 1)
          }
        }
      }
    },
  },
  directives: { clickoutside },
  data() {
    return {
      optionsAll:[],
      formAll: this.$form.createForm(this),
      marks: {
        5: '5岁',
        10: '10岁',
        15: '15岁',
        20: '20岁',
        25: '25岁',
        30: '30岁',
        35: '35岁',
        40: '40岁',
        45: '45岁',
        50: '50岁',
        55: '55岁'
      },
      step: 0,
      loading: false,
      checkArr: [],
      checkAll: false,
      allForm: {
        regionType: 'noLimit',
        region: [],
        ageType: 'noLimit',
        age: [],
        device: '0',
        price: '0',
        appType: '0',
        fansStar: '0',
        interestVideo: '0',
        platform_os: 0,
        businessInterestType: 0,
        isOpen: 0,
        noAgeBreak: false,
        noGenderBreak: false,
        noAreaBreak: false,
        people: '2',
        targeted: '2',
        topMiddle: false,
        topMiddleNo: false,
        keyValue: '',
        keyValueNo: ''
      },
      options: [],
      optionsAll: [],
      optionProps: {
        value: 'regionId',
        label: 'name',
        children: 'children',
        multiple: true,
        emitPath: false
        // checkStrictly: true
      },
      optionsApp: [],
      optionsAppActive: [],
      checkOptions: [],
      businessOptions: [],
      fansStarOptions: [],
      interestVideoOptions: [],
      optionPropsApp: {
        value: 'tagId',
        label: 'tagName',
        children: 'children',
        multiple: true,
        emitPath: false
      },
      getApp: '0',
      closeDialog: false,
      indeterminate: false,
      checkAll: false,
      people: '2',
      targeted: '2',
      topMiddle: false,
      topMiddleNo: false,
      keyValue: '',
      keyValueNo: '',
      columns,
      selectedRowKeys: [],
      selectedRowKeysValue: [],
      selectedRowKeysNo: [],
      selectedRowKeysValueNo: [],
      dataList: [],
      dataElse:[]
    }
  },
  computed: {},
  methods: {
    getPeople() {
      return new Promise((resolve, reject) => {
        getAction('/kuaishou/batch/getPopulationList', { accountId: localStorage.getItem('accountId') }).then(res => {
          if (res.success) {
            if (res.result) {
              this.dataList = res.result.map((item, index) => {
                return {
                  ...item,
                  key: index
                }
              })
              this.dataElse = this.dataList
              resolve(res.result)
            }
          }
        })
      })
    },
    radioChange() {
      this.selectedRowKeys = []
      this.selectedRowKeysValue = []
      this.selectedRowKeysNo = []
      this.selectedRowKeysValueNo = []
      this.keyValue = ''
      this.keyValueNo = ''
    },
    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 + '   '
      }
    },
    showOne(){
    //    this.keyValueNo =orientationName
        var data = this.keyValue.split('   ')
        this.dataList = this.dataElse.filter(item => {
          return item.orientationName.toLowerCase().indexOf(data[data.length-1].toLowerCase()) > -1
        })
    },
    showTwo(){
    //    this.keyValueNo =orientationName
        var data = this.keyValueNo.split('   ')
        this.dataList = this.dataElse.filter(item => {
          return item.orientationName.toLowerCase().indexOf(data[data.length-1].toLowerCase()) > -1
        })
    },
    getAge(e) {
      this.allForm.noAgeBreak = e.target.checked
    },
    getGender(e) {
      this.allForm.noGenderBreak = e.target.checked
    },
    getArea(e) {
      this.allForm.noAreaBreak = e.target.checked
    },
    getRegion(data) {
      this.$refs.cascaderRegion.getCheckedNodes()
      var dataName = this.$refs.cascaderRegion.getCheckedNodes()
      var jsonArr = data
      for (let i = 0; i < dataName.length; i++) {
        for (let j = 0; j < data.length; j++) {
          if (dataName[i].children.length > 0) {
            if (data[j].substring(0, 2) == dataName[i].value) {
              jsonArr.splice(j, 1)
            }
          }
        }
      }
    },
    showAppName(appId) {
        if(this.checkOptions.length>0){
            var data = this.checkOptions.filter(item => {
                return item.appId == appId
            })
            if(data[0]){
              return data[0].appName
            }else{
              return null
            }
            
        }else{
            return null
        }
     
    },
    log(appId) {
      var index = this.optionsAll.findIndex((item) => item === appId)
      this.optionsAll.splice(index, 1)
      if (this.optionsAll.length == 0) {
        this.indeterminate = false
        this.checkAll = false
      }
    },
    handleClose(e) {
      this.closeDialog = false
    },
    targetedShow(e){
        this.topMiddle = false
        this.topMiddleNo = false
    },
    clearAll() {
      this.checkArr = []
      this.indeterminate = false
      this.checkAll = false
    },
    onChange(checkedList) {
      this.indeterminate =
        !!checkedList.length &&
        checkedList.length <
          this.optionsApp.map(item => {
            return item.appId
          }).length
      this.checkAll =
        checkedList.length ===
        this.optionsApp.map(item => {
          return item.appId
        }).length
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkArr: e.target.checked
          ? this.optionsApp.map(item => {
              return item.appId
            })
          : [],
        indeterminate: false,
        checkAll: e.target.checked
      })
      if (this.optionsAll.length > 20) {
        this.$message.error('最多选择20个APP行为')
        this.checkArr = []
        this.indeterminate = false
        this.checkAll = false
      }
      //   if (this.checkAll) {
      //     this.checkArr = []
      //   } else {
      //     this.checkArr = this.optionsApp.map(item => {
      //       return item.app_id
      //     })
      //   }
      //   this.checkAll = !this.checkAll
    },
    handleSubmit() {
      //   e.preventDefault()
      this.formAll.validateFields((err, values) => {
        if (!err) {
          //   this.checkArr
          var json = {}
          if (this.allForm.appType == '2') {
            json.appIds = this.optionsAll
          }
          if (this.allForm.regionType == 'limit') {
            json.region = this.allForm.region.map(item => {
              return item.value
            })
          }
          var jsonData = {}
          if(this.people == '3'){
            if (this.targeted == '2') {
                jsonData.population = this.selectedRowKeysValue.map(item => {
                return item.orientationId
                })
            } else if (this.targeted == '3') {
                jsonData.excludePopulation = this.selectedRowKeysValueNo.map(item => {
                return item.orientationId
                })
            } else if (this.targeted == '4') {
                jsonData.population = this.selectedRowKeysValue.map(item => {
                return item.orientationId
                })
                jsonData.excludePopulation = this.selectedRowKeysValueNo.map(item => {
                return item.orientationId
                })
            } else {
                jsonData = {}
            }
          }
          
          var dataJson = {
            ...values,
            platformOs: this.allForm.platform_os,
            businessInterestType: this.allForm.businessInterestType,
            isOpen: this.allForm.isOpen,
            ...json,
            noAgeBreak: this.allForm.noAgeBreak ? 1 : 0,
            noGenderBreak: this.allForm.noGenderBreak ? 1 : 0,
            noAreaBreak: this.allForm.noAreaBreak ? 1 : 0,
            allForm: this.allForm,
            ...jsonData
          }
          this.$emit('update:populationData', dataJson)
        }
      })
    },
    handleConfirmValue(rule, value, callback) {
      if (Math.abs(value[0] - value[1]) < 5) {
        callback('自定义年龄段需要间隔大于5岁')
      }
      callback()
    },
    manyValidator(rule, value, callback) {
      if (value.length > 20) {
        callback('最多只能选择20个选项')
      }
      callback()
    },
    regionChange() {
      this.allForm.region = []
    },
    search(e) {},
    put() {
      var data = this.allForm.region.map(item => {
        return item[1] + ''
      })
      var dataElse = data.map(item => {
        return [item.substring(0, 2), item]
      })
    },
    getAppAll(e) {
      if (e.target.value !== '') {
        getAction('/kuaishou/batch/getAppSearch', {
          accountId: localStorage.getItem('accountId'),
          appName: e.target.value
        }).then(res => {
          if (res.result) {
            this.optionsApp = res.result
            this.checkOptions.push(...res.result)
            this.closeDialog = true
          } else {
            this.optionsApp = []
            this.closeDialog = false
          }
        })
      } else {
        this.optionsApp = []
        this.closeDialog = false
      }
    },
    getAppType(e) {
      this.optionsApp = []
      this.formAll.setFieldsValue({ appInterest: [] })
      this.checkArr = []
      if (e.target.value == '1') {
        getAction('/kuaishou/batch/getTargetList', { tagType: 'APP_INTEREST' }).then(res => {
          if (res.success) {
            this.optionsApp = res.result
          }
        })
      }
    },
    businessInterest(e) {
      this.formAll.setFieldsValue({ businessInterest: [] })
      if (e.target.value == '2') {
        this.getDataType('BUSINESS_INTEREST', 'businessOptions')
      }
    },
    fansStar(e) {
      if (e.target.value == '1') {
        this.getDataType('FANS_STAR', 'fansStarOptions')
      }
    },
    interestVideo(e) {
      if (e.target.value == '1') {
        this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getDataType(type, dataList) {
      getAction('/kuaishou/batch/getTargetList', { tagType: type }).then(res => {
        if (res.success) {
          this[dataList] = res.result
        }
      })
    },
    getData(className) {
      return this.formAll.getFieldValue(className)
    }
  },
  mounted: function() {
    this.getDataType('APP_INTEREST', 'optionsAppActive')
    this.getDataType('BUSINESS_INTEREST', 'businessOptions')
    this.getDataType('FANS_STAR', 'fansStarOptions')
    this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')

  }
}
</script>

<style type="text/css">
.plug-timer-grid {
  width: 100%;
}

.plug-timer-grid td,
.plug-timer-grid th {
  border: 1px solid #97b4d1;
  text-align: center; /*cursor:pointer;*/
  font-size: 10px;
  line-height: 10px;
}

.Selected {
  background-color: rgb(102, 162, 243);
  opacity: 0.5;
}

.plug-timer-grid {
  border-collapse: collapse;
  z-index: 4;
}

.plug-timer-grid thead tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

.group-creat table td {
  height: 20px;
  max-width: 5px;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
}

.plug-timer-grid tbody th {
  width: 4%;
}

.plug-timer-grid tbody tr td {
  width: 2%;
}

/*.clear{*/
/*  margin:20px 0px 20px 0px;*/
/*}*/
</style>
