<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: 17 }, sm: { span: 17 } }"
    >
      <a-radio-group buttonStyle="solid" v-model="targeted" @change="radioChange">
        <a-radio-button value="3">排除</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 == '3'">
          <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, 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: 17 }, 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'" style="margin-top: 5px">
        <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: 17 }, 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"
      style="margin-top: -16px"
    >
      <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"
      style="margin-top: -16px"
    >
      <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
      label="过滤已转化用户"
      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 15 }, sm: { span: 15 } }"
    >
      <a-radio-group buttonStyle="solid" v-decorator="['filterConvertedLevel', { 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-button :value="3">本账户</a-radio-button>
        <a-radio-button :value="4">公司主体</a-radio-button>
        <a-radio-button :value="5">APP</a-radio-button>
      </a-radio-group>
    </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: {},
    lol: {
      type: String,
      default() {
        return '1'
      },
    },
  },
  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 ? (typeof n.appIds == 'string' ? JSON.parse(n.appIds) : n.appIds) : []
          this.targeted = '3'
          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, [
                'appInterest',
                'gender',
                'network',
                'agesRange',
                'age',
                'androidOsv',
                'iosOsv',
                'deviceBrand',
                'devicePrice',
                'filterConvertedLevel',
              ])
            )
          })
        } 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',
            platform_os: 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)
          }
        }
      }
    },
    'allForm.isOpen': function (n, o) {
      console.log(n, o)
      if (n == 0) {
        this.allForm.noAgeBreak = false
        this.allForm.noGenderBreak = false
        this.allForm.noAreaBreak = false
      }
    },
  },
  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: [],
      appListValue: '',
      checkAll: false,
      allForm: {
        regionType: 'noLimit',
        region: [],
        ageType: 'noLimit',
        age: [],
        device: '0',
        price: '0',
        appType: '0',
        platform_os: 0,
        isOpen: 0,
        noAgeBreak: false,
        noGenderBreak: false,
        noAreaBreak: false,
        people: '2',
        targeted: '3',
        topMiddle: false,
        topMiddleNo: false,
        keyValue: '',
        keyValueNo: '',
      },
      options: [],
      optionsAll: [],
      optionProps: {
        value: 'regionId',
        label: 'name',
        children: 'children',
        multiple: true,
        emitPath: false,
        // checkStrictly: true
      },
      checkOptions: [],
      businessOptions: [],
      optionPropsApp: {
        value: 'tagId',
        label: 'tagName',
        children: 'children',
        multiple: true,
        emitPath: false,
      },
      getApp: '0',
      closeDialog: false,
      indeterminate: false,
      checkAll: false,
      people: '2',
      targeted: '3',
      topMiddle: false,
      topMiddleNo: false,
      keyValue: '',
      keyValueNo: '',
      columns,
      selectedRowKeys: [],
      selectedRowKeysValue: [],
      selectedRowKeysNo: [],
      selectedRowKeysValueNo: [],
      dataList: [],
      dataElse: [],
    }
  },
  computed: {},
  methods: {
    getPeople() {
      var data = ''
      if (this.$route.path == '/creat/creatUnit') {
        data = localStorage.getItem('campaignAccountId')
      } else {
        data = localStorage.getItem('accountId')
      }
      return new Promise((resolve, reject) => {
        getAction('/kuaishou/batch/getPopulationList', { accountId: data }).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 = ''
    },
    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 + '   '
      }
    },
    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
      })
    },
    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)
            }
          }
        }
      }
    },
    handleClose(e) {
      this.closeDialog = false
    },
    targetedShow(e) {
      this.topMiddleNo = false
    },
    handleSubmit() {
      //   e.preventDefault()
      this.formAll.validateFields((err, values) => {
        if (!err) {
          //   this.checkArr
          if (values.age) {
            values.min = values.age[0]
            values.max = values.age[1]
          }
          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,
            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()
    },

    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]
    //   })
    // },


    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getData(className) {
      return this.formAll.getFieldValue(className)
    },
  },
  mounted: function () {
    
  },
}
</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>
