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

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

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

.else-label .ant-form-item-label label::after {
  content: '';
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
}
</style>
<template>
  <a-modal v-model="visible" title="定向模板" :width="1100" v-if="visible">
    <a-spin :spinning="spinning">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="模板名称"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
        >
          <a-input
            v-decorator="['templateName', { rules: [{ required: true, message: '模板名称必填' }] }]"
            :disabled="type == 'look'"
          ></a-input>
        </a-form-item>
        <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"> {{this.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 targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue'
import pick from 'lodash.pick'
export default {
  name: 'new-mould',
  components: {
    targetedPopulation,
  },
  data() {
    return {
      visible: false,
      spinning: false,
      form: this.$form.createForm(this),

      populationData: {},
      accountId: '',
      templateId:undefined,
      type: 'add',
      loading: false,
    }
  },
  computed: {},
  methods: {
    create(accountId, type) {
      this.spinning = false
      this.visible = true
      this.type = type
      this.populationData = {checkApp:'none'}
      this.accountId = accountId
    },
    handleOk(accountId, templateId, type) {
      this.spinning = true
      this.visible = true
      this.type = type
      var params = {}
      params.templateId = templateId
      this.templateId=templateId;
      this.accountId = accountId
      getAction('/batch/kuaishouTemplateTarget/getDetailByTemplateId', params).then((res) => {
        if (res.success) {
          var dataJson = {
            ...res.result.base,
            ...res.result.detail,
          }

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

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

          this.populationData.age = dataJson.min ? [dataJson.min, dataJson.max] : []
          this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
          this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
          this.populationData.allForm = {}
          this.populationData.allForm.regionType =
            dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'

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

          this.populationData.allForm.ageType =
            dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.min ? 'ageCustom' : 'noLimit'
          this.populationData.allForm.device = dataJson.deviceBrand ? '1' : '0'
          this.populationData.allForm.price = dataJson.devicePrice ? '1' : '0'
          this.populationData.allForm.appType = dataJson.appInterest ? '1' : dataJson.appIds ? '2' : '0'
          this.populationData.allForm.fansStar = dataJson.fansStar ? '1' : '0'
          this.populationData.allForm.interestVideo = dataJson.interestVideo ? '1' : '0'
          this.populationData.allForm.platform_os = dataJson.platformOs
          this.populationData.allForm.businessInterestType = dataJson.businessInterest ? 2 : 0
          this.populationData.allForm.isOpen = dataJson.isOpen
          this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
          this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
          this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
          this.populationData.allForm.checkArr =
            this.populationData.allForm.appType == '2' ? JSON.parse(dataJson.appIds) : []
          this.populationData.checkApp = 'none'
          this.populationData.disableInstalledAppSwitch = dataJson.disableInstalledAppSwitch 
          this.$nextTick(() => { 
            console.log(dataJson)
            this.form.setFieldsValue(pick(dataJson, ['templateName']))
            this.spinning = false
          })
        }
      })
    },
    handleCancel(e) {
      this.visible = false
    },
    handleSubmit(e) {
      //   this.$refs.population.handleSubmit()

      e.preventDefault()
      this.$refs.population.handleSubmit()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          // this.loading = true

          var params = {
            ...this.populationData,
            templateName: values.templateName,
            accountId: this.accountId,
            
          }
          console.log(params)
          if (this.type == 'add') {
            postAction('/batch/kuaishouTemplate/createTemplate', params).then((res) => {
              if (res.success) {
                this.visible = false
                this.loading = false

                getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
                  accountId: this.accountId,
                }).then((res) => {
                  if (res.success) {
                    this.$emit('getData', this.accountId)
                  }
                })
              } else {
                this.loading = false
                this.$message.error(res.result.message)
              }
            })
          } else if (this.type == 'look') {
            params.templateId=this.templateId
         
            postAction('/batch/kuaishouTemplate/updateTemplate', params).then((res) => {
              this.visible = false
              if (res.success) {
                this.loading = false

                getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
                  accountId: this.accountId,
                }).then((res) => {
                  if (res.success) {
                    this.$emit('getData', this.accountId)
                  }
                })
              } else {
                this.loading = false
                this.$message.error(res.result.message)
              }
            })
          }
        }
      })
    },
  },
}
</script>