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

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

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

.else-label .ant-form-item-label label::after {
  content: '';
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
}
.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: '*';
}
</style>
<style lang="scss" scoped>
.require-check {
  /deep/ .ant-form-item-label {
    label::before {
      display: inline-block;
      margin-right: 4px;
      color: #f5222d;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }
}
</style>
<template>
  <a-modal v-model="visible" :title="type === 'add' ? '编辑素材指定定向包' : '编辑素材指定定向包'" :width="1100" v-if="visible">
    <a-spin :spinning="spinning">
      <a-form @submit="handleSubmit" :form="form">

        <targeted-population ref="population" :populationData.sync="populationData" />
      </a-form>
    </a-spin>
    <template slot="footer">
      <!-- <a-button type="primary" @click="handleSubmit" :loading="loading"> 确定 </a-button> -->
      <a-button
        type="default"
        @click="
          () => {
            this.visible = false
          }
        "
      >
        取消
      </a-button>
      <a-button type="primary" @click="handleSubmit" :loading="loading">
        {{ type == 'add' ? '确定' : '修改' }}
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
import moment from 'moment'
import { mapGetters } from 'vuex'
import jq from 'jquery'
import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
import targetedPopulation from './targetedPopulation.vue'
import pick from 'lodash.pick'
export default {
  name: 'new-mould',
  components: {
    targetedPopulation,
    selectTable,
  },
  data() {
    return {
      visible: false,
      spinning: false,
      projectName: '',
      form: this.$form.createForm(this),
      projectId: '',
      populationData: {},
      accountId: '',
      templateId: undefined,
      type: 'add',
      loading: false,
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      disabled: false,
      id:null
    }
  },
  computed: {},
  methods: {
    create(accountId, type) {
      this.disabled = false
      this.spinning = false
      this.visible = true
      this.type = type
      this.populationData = {}
      this.accountId = accountId
    },
    handleOk(item, type) {
      this.spinning = true
      this.visible = true
      this.type = type
      // var params = {}
      // params.id = item.id
      // this.templateId = item.id
      // this.projectName = item.projectName
      // this.projectId = item.projectId
      // getAction('/kuaishouDirectionalPackage/queryById', params).then((res) => {
      //   if (res.success) {
          this.id = item.id;
          var dataJson = {
            ...item,
          }

          this.populationData = dataJson

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

          this.populationData.age = dataJson.min ? [dataJson.min, dataJson.max] : []
          this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
          this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null

          this.populationData.behavior = dataJson.label
          this.populationData.interest = dataJson.interestLabel

          this.populationData.sceneType = dataJson.sceneType ? JSON.parse(dataJson.sceneType) : []
          this.populationData.allForm = {}
          this.populationData.allForm.regionType =
            dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'

          this.populationData.allForm.region = dataJson.region
          // postAction('/kuaishou/batch/getRegionDetail', {
          //   regionArr: dataJson.region
          // }).then(res => {
          //   console.log(res, 11111)
          //   if (res.success) {
          //     this.populationData.allForm.region = res.result
          //   }
          // })

          this.populationData.allForm.ageType =
            dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.min>0 ? 'ageCustom' : 'noLimit'
          this.populationData.allForm.device = dataJson.deviceBrand && eval(dataJson.deviceBrand).length > 0 ? '1' : '0'
          this.populationData.allForm.price = dataJson.devicePrice && eval(dataJson.devicePrice).length > 0 ? '1' : '0'
          this.populationData.allForm.appType =
            dataJson.appInterest && eval(dataJson.appInterest).length > 0
              ? '1'
              : dataJson.appIds && eval(dataJson.appIds).length > 0
              ? '2'
              : '0'
          this.populationData.allForm.fansStar =
            dataJson.fansStar && eval(dataJson.fansStar).length > 0 ? '1' : '0'
          this.populationData.allForm.interestVideo =
            dataJson.interestVideo && eval(dataJson.interestVideo).length > 0 ? '1' : '0'
          this.populationData.allForm.platform_os = dataJson.platformOs
          this.populationData.allForm.businessInterestType = dataJson.businessInterestType
          this.populationData.allForm.isOpen = dataJson.isOpen
          this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
          this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
          this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
          this.populationData.allForm.behaviorInterest = dataJson.label=='[]' ? '1' : '0'
          this.populationData.allForm.checkArr =
            this.populationData.allForm.appType == '2' ? JSON.parse(dataJson.appIds) : []
          this.populationData.projectId = dataJson.projectId + ''

          this.disabled = true

          this.$nextTick(() => {
            this.spinning = false
          })

    },
    handleCancel(e) {
      this.visible = false
    },
    handleSubmit(e) {
      //   this.$refs.population.handleSubmit()

      var data = JSON.parse(localStorage.getItem('materialDetail'))
      e.preventDefault()
      this.$refs.population.handleSubmit()
      this.$refs.population.formAll.validateFields((err, value) => {
        if (!err) {
          this.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
              this.loading = true
              // this.loading = true

                var params = {
                  ...this.populationData,
                  videoGetId: data.id,
                  signature: data.md5,
                  id:this.id
                }
                params.label = params.behavior?JSON.stringify(params.behavior):'[]'
                params.interestLabel = params.interest?JSON.stringify(params.interest):'[]'
                console.log(this.populationData)
                if (this.populationData.allForm.regionType == 'limit') {
                  if(this.populationData.allForm.region.length === 0) {
                    this.$message.error('请选择地域');
                    this.loading = false
                    return
                  }
                }
                if (this.type == 'add') {
                  postAction('/kuaishouVideoDirectionalPackage/saveOrUpdate', params).then((res) => {
                    if (res.success) {
                      this.visible = false
                      this.loading = false
                      this.$emit('getData')
                    } else {
                      this.loading = false
                      this.$message.error(res.message)
                    }
                  })
                } else if (this.type == 'edit') {
                  postAction('/kuaishouVideoDirectionalPackage/saveOrUpdate', params).then((res) => {
                    this.visible = false
                    if (res.success) {
                      this.loading = false
                      this.$emit('getData')
                    } else {
                      this.loading = false
                      this.$message.error(res.message)
                    }
                  })
                }
            }
          })
        }
      })
    },
  },
}
</script>