<style>
.display-none-selset {
  display: none !important;
}
#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-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="选择模板"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-select
          v-decorator="['templateId']"
          showSearch
          allowClear
          placeholder="选择定向模板"
          optionFilterProp="children"
          style="width: 500px"
          :filterOption="filterOption"
        >
          <a-select-option v-for="appModel in templateList" :key="appModel.templateId" :value="appModel.templateId">
            {{ appModel.templateName }}
          </a-select-option>
        </a-select>
        <a-button type="primary" @click="getTemplate(accountId)" :loading="templateLoading"> 刷新模板</a-button>
        <br />
        <a style="margin: 0 10px 0 0" @click="addTemplate(accountId)">新增模板</a>
        <a
          @click="lookTemplate(accountId, getData('templateId'))"
          :disabled="getData('templateId') == '' || getData('templateId') == null"
          >查看模板</a
        >
      </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 } }"
      >
        <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: 10 }, sm: { span: 17 } }"
      >
        <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 } }"
      >
        <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: 10 }, sm: { span: 17 } }"
      >
        <checkBoxGroup
          :options="[
            { label: '优选广告位', value: 1 },
            { label: '信息流广告', value: 7 },
            { label: '上下滑大屏广告', value: 6 },
            { label: '视频播放页广告', value: 3 },
          ]"
          v-model="allForm.sceneId"
          @change="changeData"
        />
      </a-form-item>

      <div style="width: 100%" v-for="(item, index) of allForm.group" :key="index">
        <div style="clear: both"></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="item.bidType" @change="resData(index)">
            <a-radio-button :value="1">点击数</a-radio-button>

            <a-radio-button :value="10">转化数</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="item.bidType == 10"
        >
          <a-select v-model="item.ocpxActionType">
            <a-select-option :value="2">行为数</a-select-option>
            <a-select-option :value="180" v-if="campaignType == '2' && allForm.groupTypeData.isActivate == '1'"
              >激活</a-select-option
            >
            <a-select-option
              :value="53"
              v-if="(campaignType == '4' || campaignType == '5') && allForm.groupTypeData.isFormSubmit == '1'"
              >表单提交</a-select-option
            >

            <a-select-option :value="394" v-if="allForm.groupTypeData.isOrderSubmit == '1'">订单提交</a-select-option>
            <a-select-option :value="348" v-if="allForm.groupTypeData.isValidClue == '1'">使用有效线索</a-select-option>
            <a-select-option :value="383" v-if="allForm.groupTypeData.isCreditGrant == '1'">授信出价</a-select-option>
            <a-select-option :value="384" v-if="allForm.groupTypeData.isWanJian == '1'">完件出价</a-select-option>
            <a-select-option :value="190" v-if="allForm.groupTypeData.isPurchase == '1'">付费出价</a-select-option>
            <a-select-option :value="191" v-if="allForm.groupTypeData.isFirstdayRoi == '1'">首日ROI</a-select-option>
            <a-select-option :value="396" v-if="allForm.groupTypeData.isRegister == '1'">注册优化目标</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="
            (item.ocpxActionType == 180 || item.ocpxActionType == 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: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, 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: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-if="item.bidType == 1"
        >
          <!-- v-model="item.bid" -->
          <a-input-number
            v-decorator="[
              'bid',
              {
                rules: [{ required: true, message: '出价必填' }, { validator: bidCheck }],
              },
            ]"
            style="width: 100%"
          >
          </a-input-number>
        </a-form-item>
        <a-form-item
          label="目标成本"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-else
        >
          <!-- v-model="item.cpaBid" -->
          <a-input-number
            v-decorator="[
              'cpaBid',
              {
                rules: [{ required: true, message: '目标成本必填' }, { validator: cpaBidCheck }],
              },
            ]"
            style="width: 100%"
          >
          </a-input-number>
          <span
            style="color: red; font-weight: 700"
            v-if="item.ocpxActionType == 2 && getData('cpaBid') && getData('cpaBid') > 1"
          >
            行为出价大于1元,请注意！！！
          </span>
        </a-form-item>
        <a-form-item
          label="深度转化出价"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-if="
            (item.ocpxActionType == 180 || item.ocpxActionType == 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="getData('cpaBid') == null || getData('cpaBid') == ''"
          ></a-input-number>
          <span style="color: red" v-if="item.deepConversionBidCheck"
            >深度转化目标成本必须高于优化目标成本，且不得高于3000元</span
          >
        </a-form-item>
      </div>
    </a-form>
  </a-card>
</template>

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

import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
import templateModal from '@/views/modules/kuaishouapp/crossAccount/templateModal'
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
let dateQuantumRangeConst = ''
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: 'createTime',
    scopedSlots: {
      customRender: 'createTime',
    },
    sorter: (a, b) => a.createTime - b.createTime,
  },
]
function tqFun(qcArr1) {
  var tempArr = []
  function bbFun(qcArr) {
    for (var i = 0; i < qcArr.length; i++) {
      if (qcArr[i] instanceof Array) {
        bbFun(qcArr[i])
      } else {
        tempArr.push(qcArr[i])
      }
    }
    return tempArr
  }
  return bbFun(qcArr1)
}
export default {
  name: 'creat-unit',
  components: {
    selectCheckAll,
    templateModal,
    checkBoxGroup,
  },
  props: {
    campaignId: {
      type: String,
      default() {
        return null
      },
    },
  },

  data() {
    return {
      templateLoading: false,
      dataOne: [],
      trackName: '',
      trackUrlList: [],
      showSite: false,
      appList: [],
      siteList: [],
      fieldNames: {
        label: 'category_name',
        value: 'category_id',
        children: 'child',
      },
      defaultProps: {
        children: 'children',
        label: 'label',
        id: 'id',
      },
      showTrackUrlNameElse: true,
      clickTrackUrlList: false,
      spinning: false,
      trackUrlName: '',
      tagName: '',
      labelCol: {
        lg: {
          span: 6,
        },
        sm: {
          span: 6,
        },
        xs: {
          span: 6,
        },
        md: {
          span: 6,
        },
      },
      wrapperCol: {
        lg: {
          span: 18,
        },
        sm: {
          span: 18,
        },
        xs: {
          span: 14,
        },
        md: {
          span: 14,
        },
      },
      ipagination: {
        current: 1,
        pageSize: 5,
        //   pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        //   showSizeChanger: true,
        total: 0,
        onChange: (current) => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.ipagination.current = current
        },
      },
      showVideo: true,
      videoList: [],
      orderBy: 'time',
      visibleMatemal: false,
      loadingVideoList: false,
      checkVideo: [],
      checkVideoAll: [],
      checkVideoWai: [],
      dataSource: [],
      active: 0,
      time: [],
      channelType: 0,
      creativeMaterialType: '',
      tab: [
        {
          value: 0,
          label: '内部',
        },
        {
          value: 1,
          label: '外部',
        },
      ],
      templateList: [],
      allianceAccount: false,
      creativeCategorySwitch: false,
      actionbarClickUrlSwitch: false,
      tongbuLoading: false,
      convert: false,
      convertId: '',
      convertList: [],
      checkedTrue: false,
      nameValue: '',
      visible: false,
      timeRange: [],
      form: this.$form.createForm(this),
      step: 0,
      people: '2',
      targeted: '2',
      topMiddle: false,
      topMiddleNo: false,
      keyValue: '',
      keyValueNo: '',
      columns,
      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',
      },
      appId: '',
      loading: false,
      campaignTemplateId: '',
      campaignType: null,
      maxBid: 0,
      allForm: {
        dayBudget: '0',
        time: '1',
        scheduleTime: '1',
        scheduleTimeData:
          '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
        group: [],
        groupTypeData: null,
        fail: [],
        success: [],
        sceneId: [1],
        appStore: ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'],
        allianceAccount: '1',
        description: '',
      },
      convertType: '1',
      clickTrackUrlShow: false,
      clickTrackUrlShowType: '1',
      optionsTag: [],
      creativeTagVisible: false,
      visibleVideo: false,
      videoUrlShow: '',
      sumContent: 0,
      titleVisible: false,
      options: [],
      value: '',
      title: [],
      cunTitleVisible: false,
      cunTitleList: [],
      tongbuLoading: false,
      accountId: '',
      oldCampaignId: '',
      oldCampaignName: '',
      newCampaignId: '',
    }
  },
  computed: {
    count() {
      return moment().startOf('day')
    },
  },
  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]
    },
  },
  methods: {
    changeData(data) {
      if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
        data.splice(
          data.findIndex((item) => item == 1),
          1
        )
      } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
        data.splice(0, data.length - 1)
      } else if (data.length == 0) {
        data.push(1)
      }
    },
    handleOk(item) {
      this.accountId = item.accountId
      this.oldCampaignId = item.oldCampaignId
      this.oldCampaignName = item.oldCampaignName
      this.newCampaignId = item.newCampaignId

      this.getTemplate(item.accountId)
      this.campaignType = item.campaignType
      getAction('/kuaishou/batch/getIsActivate', {
        accountId: item.accountId,
      }).then((res) => {
        if (res.success) {
          this.allForm.groupTypeData = res.result
          this.addGroup()
        }
      })

      //   getAction('/kuaishou/batch/getWhiteList', {
      //     accountId: item.accountId,
      //   }).then((res) => {
      //     if (res.success) {
      //       // console.log(res)
      //       if (res.result) {
      //         this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
      //         this.allianceAccount = res.result.alliance_account == 1 ? true : false
      //         this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false
      //       } else {
      //         this.allianceAccount = false
      //         this.creativeCategorySwitch = false
      //         this.actionbarClickUrlSwitch = false
      //       }
      //     }
      //   })
      getAction('/kuaishou/batch/getProjectMaxBid', {
        accountId: item.accountId,
      }).then((res) => {
        if (res.success) {
          this.maxBid = res.result / 1000
        }
      })
    },

    filter(inputValue, path) {
      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },

    ...mapGetters(['nickname', 'avatar', 'userInfo']),

    lookTemplate(accountId, templateId) {
      this.$refs.templateModal.handleOk(accountId, templateId, 'look')
    },
    addTemplate(accountId) {
      this.$refs.templateModal.create(accountId, 'add')
    },
    getTemplate(accountId) {
      var data = null
      if (accountId) {
        data = accountId
      } else {
        this.templateLoading = true
        data = accountId
      }
      getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
        accountId: data,
      }).then((res) => {
        if (res.success) {
          this.getTemplateList(data)
        }
      })
    },
    getTemplateList(accountId) {
      this.templateList = []
      getAction('/batch/kuaishouTemplate/list', {
        accountId: accountId,
        pageSize: 1000,
        pageNo: 1,
      }).then((res) => {
        if (res.success) {
          this.templateList = res.result.records.map((item, index) => {
            return {
              ...item,
              key: index,
            }
          })
          this.templateLoading = false
        } else {
          this.templateLoading = false
        }
      })
    },

    getCheck(e) {
      this.checkedTrue = e.target.checked
    },
    addGroup() {
      this.allForm.group.push({
        bidType: 10,
        // bid: '',
        // cpaBid: '',
        deepConversionBidCheck: false,
        // unitName: '',
        unitNameCheck: false,
        deepConversionType: '',
        deepConversionBid: '',
        ocpxActionType: this.campaignType == '2' && this.allForm.groupTypeData.isActivate == '1' ? 180 : 2,
      })
    },
    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 = ''
      this.form.setFieldsValue({
        bid: undefined,
      })
      this.form.setFieldsValue({
        cpaBid: undefined,
      })
    },
    removeGroup(index) {
      this.allForm.group.splice(index, 1)
    },
    deep_conversion_bidTip(index) {
      if (
        this.allForm.group[index].deepConversionBid < this.getData('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('campaignList'),
          unitName: e.target.value,
        }).then((res) => {
          if (res.success) {
            this.allForm.group[index].unitNameCheck = !res.result
          } else {
            this.allForm.group[index].unitNameCheck = false
          }
        })
      }
    },
    showTip(index) {
      if (this.allForm.group[index].bidType == 1) {
        if (this.getData('bid') < 0.2 || this.getData('bid') > this.maxBid) {
          this.allForm.group[index].showTipCheck = true
        } else {
          this.allForm.group[index].showTipCheck = false
        }
      } else {
        if (this.getData('cpaBid') < 1 || this.getData('cpaBid') > this.maxBid) {
          this.allForm.group[index].showTipCheck = true
        } else {
          this.allForm.group[index].showTipCheck = false
        }
      }
    },
    getScheduleTime(item) {
      this.allForm.scheduleTimeData = item
    },
    setTime(e) {
      if (e.target.value == '2') {
        this.timeRange[0] = moment().startOf('day')
        this.timeRange[1] = moment().add(1, 'months')
      }
    },
    setTimeAll(e) {
      if (e.target.value == '2') {
        this.$nextTick(() => {
          this.$refs.selectCheck.init()
        })
      } else {
      }
    },
    getData(className) {
      return this.form.getFieldValue(className)
    },
    bidCheck(rule, value, callback) {
      if (value < 0.2 || value > this.maxBid) {
        callback('不得低于0.2元，不得高于项目最高出价' + this.maxBid + '元')
      } else {
        callback()
      }
    },
    cpaBidCheck(rule, value, callback) {
      if (value < 1 || value > this.maxBid) {
        callback('不得低于1元，不得高于项目最高出价' + this.maxBid + '元')
      } else {
        callback()
      }
    },
    handleConfirmValue(rule, value, callback) {
      if (value != '' && value != undefined) {
        getAction('/kuaishou/batch/checkUnitName', {
          campaignId: localStorage.getItem('campaignList'),
          unitName: value + '_0',
        }).then((res) => {
          if (res.success) {
            if (!res.result) {
              callback('广告组名称重复')
            } else {
              callback()
            }
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    },
    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 = ''
    },

    handleSubmit(e) {
      e.preventDefault()

      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.loading = true
          var groupArr = this.allForm.group.map((item) => {
            return {
              ...item,

              deepConversionBid: item.deepConversionBid != '' ? item.deepConversionBid * 1000 : '',
              ocpxActionType: item.ocpxActionType,
              bidType: item.bidType == 1 ? 2 : 10,
            }
          })
          var json = {
            ...values,
            cpaBid: values.cpaBid && values.cpaBid != '' ? values.cpaBid * 1000 : null,
            bid: values.bid && values.bid != '' ? values.bid * 1000 : null,
            dayBudget: values.dayBudget * 1000,
          }
          var params = {
            userId: this.userInfo().id,
            ...json,
            ...groupArr[0],
            accountId: this.accountId,
            oldCampaignId: this.oldCampaignId,
            oldCampaignName: this.oldCampaignName,
            newCampaignId: this.newCampaignId,
            beginTime: moment(this.timeRange[0]).format('YYYY-MM-DD'),
            endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
            sceneId: this.allForm.allianceAccount == '1' ? this.allForm.sceneId : [5],
            scheduleTime:
              this.allForm.scheduleTime == '2'
                ? this.allForm.scheduleTimeData
                : '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
          }
          postAction('/kuaishouCampaignCopyData/add', params).then((res) => {
            if (res.success) {
                this.$emit('getUnitData')
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    onChange(value) {
      // console.log(value)
    },
    handleChange(value) {
      //   this.$refs.population.getAppList(value)
      this.getSiteList(value)
    },

    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')
    },
    getPageSize(data) {
      if (data.target.value == '0') {
        this.ipagination.pageSize = 5
      } else if (data.target.value == '1') {
        this.ipagination.pageSize = 15
      }
      this.videoList = []
      this.checkVideo = []
      this.checkVideoAll = []
      this.checkVideoWai = []
      this.sumContent = 0
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    prevStep() {
      this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignList'))
    },

    getData(className) {
      return this.form.getFieldValue(className)
    },
    showVideoList(url, params) {
      this.dataSource = []
      this.loadingVideoList = true
      getAction(url, params).then((res) => {
        // console.log(res)
        if (res.success) {
          this.dataSource = res.result.list
          this.ipagination.total = res.result.total
          this.loadingVideoList = false
        } else {
          this.loadingVideoList = false
        }
      })
    },
    getSiteList(appId) {
      getAction('/kuaishou/batch/getPageList', {
        accountId: localStorage.getItem('campaignAccountId'),
        appId: appId,
        viewComp: 7,
      }).then((res) => {
        if (res.success) {
          this.siteList = res.result
          if (this.siteList.length > 0) {
            this.showSite = true
          }
        } else {
          this.showSite = false
        }
      })
    },
  },
  watch: {
    timeSeries(val) {
      // console.log(val)
    },
    checkVideo(n, o) {},
    checkVideoAll(n, o) {
      // this.checkVideoAll = [...new Set(n)]
      // console.log(n,o)
      // this.checkVideo = [...new Set(n)]
    },
    time(n, o) {
      if (n.length > 0) {
        var params = {}
        params.accountId = localStorage.getItem('campaignAccountId')
        params.materialType = this.creativeMaterialType
        params.pageSize = this.ipagination.pageSize
        params.pageNo = 1
        params.status = 0
        params.channelType = this.channelType
        params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
        params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
        params.orderBy = this.orderBy
        this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
      } else {
        var params = {}
        params.accountId = localStorage.getItem('campaignAccountId')
        params.materialType = this.creativeMaterialType
        params.pageSize = this.ipagination.pageSize
        params.pageNo = 1
        params.status = 0
        params.channelType = this.channelType
        params.orderBy = this.orderBy
        this.ipagination.current = 1
        this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
      }
    },
  },
  mounted: function () {},
}
</script>

<style type="text/css" scoped lang="scss">
.width-video {
  width: calc(20% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
}
.chouzhen {
  border-style: solid;
  border-width: 1px;
  border-color: #e4e4e4;
  width: calc(20% - 10px);
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  background: #fff;
  position: relative;
  z-index: 99;
  float: left;
}

li.chouzhen.first:before {
  font-size: 12px;
  content: '首帧';
  position: absolute;
  top: 7px;
  left: 5px;
  width: 36px;
  height: 20px;
  color: rgb(255, 255, 255);
  line-height: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  z-index: 1000;
}
.actor-photo-list {
  display: flex;
  padding-left: 0;

  li {
    width: 25%;
    margin: 10px;
    position: relative;
    height: 250px;
    border: 1px solid #f2f2f2;
    list-style: none;
    img,
    video {
      width: 100%;
      margin-top: auto;
      margin-bottom: auto;
      top: 0;
      bottom: 0;
      position: absolute;
      max-height: 250px;
    }
  }
}
.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>