<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">
                <a-row :gutter="24">
                    <a-col :md="24" :sm="24" :xxl="24">
                        <a-form-item
                            label="账户ID"
                            :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                            :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
                            class="require-check"
                        >
                            <!-- <a-input v-model="accountId" :disabled="disabled"></a-input> -->
                            {{ accountId }}
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-form-item
                    label="定向包名称"
                    :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
                >
                    <a-input
                        v-decorator="[
                            'templateName',
                            {
                                rules: [
                                    { required: true, message: '模板名称必填' },
                                    { min: 1, max: 30, message: '请输入1-30个字', trigger: 'blur' }
                                ]
                            }
                        ]"
                    ></a-input>
                </a-form-item>

                <targeted-population
                    ref="population"
                    :populationData.sync="populationData"
                    :accountId.sync="accountId"
                />
            </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
        }
    },
    computed: {},
    methods: {
        create(accountId, type) {
            this.disabled = false
            this.spinning = false
            this.visible = true
            this.type = type
            this.populationData = {}
            this.accountId = accountId
            localStorage.setItem('createLaunch', accountId)
        },
        handleOk(item, type) {
            this.spinning = true
            this.visible = true
            this.type = type
            var params = {}
            params.id = item.id
            this.accountId = item.accountId
            this.templateId = item.id
            getAction('/auto/aiKuaishouAccountAutoTarget/queryById', params).then(res => {
                if (res.success) {
                    var dataJson = {
                        ...res.result,
                        templateName: res.result.targetName
                    }

                    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 = {}
                    var population = dataJson.population ? JSON.parse(dataJson.population) : null
                    var excludePopulation = dataJson.excludePopulation ? JSON.parse(dataJson.excludePopulation) : null
                    this.populationData.allForm.people =
                        population && excludePopulation && excludePopulation.length > 0 && population.length > 0
                            ? '3'
                            : population &&
                              population.length > 0 &&
                              (!excludePopulation || excludePopulation.length == 0)
                            ? '1'
                            : (!population || population.length == 0) &&
                              excludePopulation &&
                              excludePopulation.length > 0
                            ? '2'
                            : (!population || population.length == 0) &&
                              (!excludePopulation || excludePopulation.length == 0)
                            ? '0'
                            : '0'
                    this.populationData.allForm.tabKey =
                        this.populationData.allForm.people == '0'
                            ? '1'
                            : this.populationData.allForm.people == '1'
                            ? '1'
                            : this.populationData.allForm.people == '2'
                            ? '2'
                            : '1'
                    this.populationData.allForm.incluedSelectedRowKeys =
                        dataJson.population && dataJson.population.length > 0 ? dataJson.population : []
                    this.populationData.allForm.incluedSelectedKeys =
                        dataJson.population && dataJson.population.length > 0 ? dataJson.population : []
                    this.populationData.allForm.excludeSelectedKeys =
                        dataJson.excludePopulation && dataJson.excludePopulation.length > 0
                            ? dataJson.excludePopulation
                            : []
                    this.populationData.allForm.excludeSelectedRowKeys =
                        dataJson.excludePopulation && dataJson.excludePopulation.length > 0
                            ? dataJson.excludePopulation
                            : []
                    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 && 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(() => {
                        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.$refs.population.formAll.validateFields((err, value) => {
                if (this.populationData.allForm.appType == '2') {
                    if (this.populationData.appIds.length == 0) {
                        this.$message.error('APP名称未选择')
                    }
                }
                if (!err) {
                    this.form.validateFieldsAndScroll((err, values) => {
                        if (!err) {
                            // this.loading = true
                            if (this.accountId) {
                                var params = {
                                    ...this.populationData,
                                    targetName: values.templateName,
                                    accountId: this.accountId
                                }
                                // params.label = params.behavior ? JSON.stringify(params.behavior) : '[]'
                                // params.interestLabel = params.interest ? JSON.stringify(params.interest) : '[]'
                                if (this.type == 'add') {
                                    postAction('/auto/aiKuaishouAccountAutoTarget/addLocalTarget', 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') {
                                    params.id = this.templateId
                                    postAction('/auto/aiKuaishouAccountAutoTarget/updateLocalTarget', params).then(
                                        res => {
                                            this.loading = false
                                            if (res.success) {
                                                this.visible = false
                                                
                                                this.$emit('getData')
                                            } else {
                                                // this.loading = false
                                                this.$message.error(res.message)
                                            }
                                        }
                                    )
                                }
                            } else {
                                this.$message.error('请选择项目')
                            }
                        }
                    })
                }
            })
        }
    }
}
</script>
