<style scoped lang="scss">
/deep/.display-none-selset {
    display: none !important;
}
.step-jump {
    /deep/ table tr td {
        border-bottom: 0px;
    }
}
.bottom-to-one {
    /deep/ .ant-form-item {
        margin-bottom: 0;
    }
}
.target-person-add-button {
    margin-left: 15px;
}
.card-person {
    width: 300px;
    /deep/.ant-card-body {
        padding: 0px;
    }
    /deep/.ant-card-head {
        padding: 0px 10px;
    }
    .card-main-case {
        height: 250px;
        overflow: auto;
        padding: 0 5px;
    }
}
.card-person-drawer {
    width: 100%;
    height: 90%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    justify-content: space-between;
    .card-item {
        width: calc(33% - 10px);
        margin-bottom: 10px;
        float: left;
    }
    .card-item-else {
        width: calc(20% - 10px);
        margin-bottom: 10px;
        float: left;
    }
}
.showShare {
    position: relative;
}
.share {
    display: none;
}
.showShare:hover .share {
    display: flex;
    justify-content: center;
    align-items: center;
}
.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;
}
.display-none-selset {
    display: none !important;
}
.logo {
    padding-left: 24px;
    img {
        height: 32px !important;
    }
    .name {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ced2d9;
        // line-height: 22px;
        margin-left: 20px;
        padding-left: 21px;
        position: relative;
    }
    .name::before {
        content: '';
        width: 1px;
        height: 18px;
        background: rgba(255, 255, 255, 0.31);
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -9px;
    }
}
.chartBox {
    .chartBody {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .search-box {
        margin-bottom: 20px;
    }
}

/deep/ .ant-descriptions-item-content {
    font-weight: bold;
}

.info-detail {
    /deep/ table tr td {
        border: 0;
    }
    /deep/ .ant-descriptions-item-label {
        color: darkgray;
        // min-width: 30px;
        white-space: nowrap;
    }
}
.flex-main {
    display: flex;
    margin-bottom: 10px;
    p {
        color: black;
        font-weight: 600;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
    }
}
</style>
<style lang="scss">
.hide-checkbox .ant-table-thead .ant-table-selection {
    display: none;
}
.new-batch .ant-card-head-title {
    font-weight: 700;
}
// .new-batch textarea {
//   resize: none;
//   border: none;
//   outline: 0;
//   box-shadow: none;
// }
.create-info .ant-form-item {
    margin-bottom: 0 !important;
}
.fengmian .ant-checkbox-wrapper:first-child {
    margin-left: 8px;
}
@media screen and (max-width: 1200px) {
    // 这里写对应要修改的样式如：
    .new-batch .el-step__title {
        font-size: 12px;
    }
}
.line-height-one .ant-form-item-control {
    line-height: inherit;
}
.creat-all-info .ant-form-item-control {
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.config-new-batch {
    .display-none-selset {
        display: none !important;
    }
    .ant-btn-danger {
        background-color: #ff4d4f !important;
    }
}
</style>
<template>
    <div ref="questionnaireBox" class="new-batch config-new-batch">
        <div class="chartBox">
            <a-row :gutter="20">
                <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
                    <a-card class="search-box step-jump">
                        <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="模板名称">
                                        <a-input
                                            :disabled="$route.query.id"
                                            v-decorator="[
                                                'templateName',
                                                {
                                                    rules: [
                                                        { required: true, message: ' ' },
                                                        { validator: templateNameValid }
                                                    ]
                                                }
                                            ]"
                                        >
                                        </a-input>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="清理时间范围">
                                        <a-select
                                            :disabled="$route.query.preview == 'true'"
                                            v-decorator="[
                                                'cleanTime',
                                                {
                                                    rules: [{ required: true, message: '清理时间范围必选' }],
                                                    initialValue: '1'
                                                }
                                            ]"
                                        >
                                            <a-select-option value="1">最近一天</a-select-option>
                                            <a-select-option value="3">最近三天</a-select-option>
                                            <a-select-option value="7">最近七天</a-select-option>
                                            <a-select-option value="15">最近十五天</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="优化目标">
                                        <a-select
                                            :disabled="$route.query.preview == 'true'"
                                            showSearch
                                            allowClear
                                            mode="multiple"
                                            v-decorator="[
                                                'optimizationObjective',
                                                {
                                                    rules: [{ required: true, message: '优化目标必选' }],
                                                    initialValue: ['activation']
                                                }
                                            ]"
                                        >
                                            <!-- <a-select-option value="bclick">行为数</a-select-option> -->
                                            <a-select-option value="activation">激活</a-select-option>
                                            <a-select-option value="formSize">表单提交</a-select-option>
                                            <a-select-option value="pay">付费</a-select-option>
                                            <!-- <a-select-option value="roi">首日ROI</a-select-option> -->
                                            <a-select-option value="evocativeApplication">唤起应用</a-select-option>
                                            <!-- <a-select-option value="effectiveClues">使用有效线索</a-select-option> -->
                                            <!-- <a-select-option value="creditApp">授信App</a-select-option> -->
                                            <!-- <a-select-option value="creditGrant">授信落地页</a-select-option> -->
                                            <!-- <a-select-option value="ordersSubmitted">订单提交</a-select-option> -->
                                            <!-- <a-select-option value="finishedPieceApp">App完件数</a-select-option> -->
                                            <!-- <a-select-option value="finishedPieceGrant">落地页完件数</a-select-option> -->
                                            <!-- <a-select-option value="registered">注册优化目标</a-select-option> -->
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="累计消耗">
                                        <span style="width: 15%;display: inline-block;">小于等于</span>
                                        <a-input-number
                                            :disabled="$route.query.preview == 'true'"
                                            v-decorator="[
                                                'charge',
                                                {
                                                    rules: [
                                                        {
                                                            required: true,
                                                            message: '累计消耗必填'
                                                        }
                                                    ],
                                                    initialValue: 100
                                                }
                                            ]"
                                            :min="0"
                                            :precision="0"
                                            style="width: 60%"
                                        />
                                        元
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="累计转化数">
                                        <span style="width: 15%;display: inline-block;">小于等于</span>

                                        <a-input-number
                                            :disabled="$route.query.preview == 'true'"
                                            v-decorator="[
                                                'conversion',
                                                {
                                                    rules: [
                                                        {
                                                            required: true,
                                                            message: '累计转化数必填'
                                                        }
                                                    ],
                                                    initialValue: 2
                                                }
                                            ]"
                                            :min="0"
                                            :precision="0"
                                            style="width: 60%"
                                        />
                                        个
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="推广组状态">
                                        <a-select
                                            :disabled="$route.query.preview == 'true'"
                                            v-decorator="[
                                                'promotionGroupStatus',
                                                {
                                                    rules: [{ required: true, message: '推广组状态必选' }],
                                                    initialValue: '1'
                                                }
                                            ]"
                                            @change="checkStatus"
                                        >
                                            <a-select-option value="1">投放中</a-select-option>
                                            <a-select-option value="2">暂停</a-select-option>
                                            <a-select-option value="3">不限</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <!-- { rules: [{ validator: deepBidValid }] } -->
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="执行操作类型">
                                        <a-radio-group
                                            :disabled="$route.query.preview == 'true'"
                                            button-style="solid"
                                            v-decorator="[
                                                'performOperations',
                                                {
                                                    rules: [{ required: true, message: '执行操作类型必选' }],
                                                    initialValue: '3'
                                                }
                                            ]"
                                        >
                                            <a-radio-button value="3">删除</a-radio-button>
                                            <a-radio-button
                                                value="2"
                                                :disabled="getFormData('formOptimize', 'promotionGroupStatus') != '1'"
                                                >暂停</a-radio-button
                                            >
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="16">
                                <a-col :span="16">
                                    <a-form-item label="执行操作时间">
                                        每天上午10点以后执行
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-card>
                    <div
                        style="display: flex; justify-content: flex-end; margin-bottom: 100px"
                        v-if="$route.query.preview != 'true'"
                    >
                        <div>
                            <a-button
                                type="primary"
                                style="margin-right: 15px"
                                @click="handleSubmit"
                                :loading="sumbitLoading"
                                :disabled="disabled"
                            >
                                创建
                            </a-button>
                            <a-button @click="clearAllData"> 取消 </a-button>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
//   import UserMenu from '../tools/UserMenu'
//   import SMenu from '../menu/'
import Logo from '@/components/tools/Logo.vue'
import pick from 'lodash.pick'
import { mixin } from '@/utils/mixin.js'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import moment from 'moment'
import selectCheckAll from '@/components/formComponents/toutiaoTime'
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
import uploadFile from '@/components/uploadFileMd5Push.vue'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
import { mapGetters } from 'vuex'
// import lookPreviewVue from './lookPreview.vue'
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: 'GlobalHeader',
    components: {
        //   UserMenu,
        //   SMenu,
        Logo,
        Treeselect,
        selectCheckAll,
        checkBoxGroup,
        uploadFile,
        selectTable
    },
    data() {
        return {
            formOptimize: this.$form.createForm(this), //优化目标表单
            sumbitLoading: false,
            formItemLayout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 16 }
            },
            formDrawerItemLayout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 20,
                        offset: 4
                    }
                }
            },
            tailFormItemLayoutElse: {
                wrapperCol: {
                    sm: {
                        span: 20,
                        offset: 1
                    }
                }
            },
            tailFormDrawerItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 19,
                        offset: 5
                    }
                }
            },
            disabled: false
        }
    },
    computed: {},
    watch: {},
    mounted() {
        this.$nextTick(function() {
            if (this.$route.query.id) {
                this.getAction('/accountClean/previewTemplate', { templateId: this.$route.query.id }).then(res => {
                    if (res.success) {
                        let data = res.result
                        data.optimizationObjective = data.optimizationObjective.split(',')
                        this.formOptimize.setFieldsValue(
                            pick(
                                data,
                                'templateName',
                                'cleanTime',
                                'optimizationObjective',
                                'charge',
                                'conversion',
                                'promotionGroupStatus',
                                'performOperations'
                            )
                        )
                    }
                })
            } else {
                this.formOptimize.setFieldsValue({
                    promotionGroupStatus: '1'
                })
            }
        })
    },
    filters: {},
    methods: {
        moment,
        templateNameValid(rule, value, callback) {
            if (value === '' || value === undefined || value === 0 || value === '0') {
                callback('模板名称必须填写')
            } else {
                let params = {}
                params.templateName = value
                if (this.$route.query.id) {
                    params.id = this.$route.query.id
                    callback()
                } else {
                    this.getAction('/accountClean/getTemplateNameSize', params).then(res => {
                        if (res.success) {
                            if (res.result > 0) {
                                callback('模板名称重复')
                            } else {
                                callback()
                            }
                        }
                    })
                }
            }
        },
        ...mapGetters(['userInfo']),
        getFormData(form, className) {
            return this[form].getFieldValue(className)
        },
        handleSubmit() {
            // /accountClean/createTemplate
            this.formOptimize.validateFields((err, values) => {
                if (!err) {
                    this.sumbitLoading = true
                    let params = { ...values }
                    params.optimizationObjective = params.optimizationObjective.join()
                    params.createId = this.userInfo().id
                    params.createUser = this.userInfo().username
                    console.log(this.userInfo())
                    if (this.$route.query.id) {
                        params.id = this.$route.query.id
                        this.postDataAction('/accountClean/updateTemplate', params).then(res => {
                            this.sumbitLoading = false
                            if (res.success) {
                                this.$router.replace('/earlyWarningRules/accountClear')
                                this.$bus.$emit('remove', `/earlyWarningRules/createClear?id=${this.$route.query.id}`)
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        this.postDataAction('/accountClean/createTemplate', params).then(res => {
                            this.sumbitLoading = false
                            if (res.success) {
                                this.$router.replace('/earlyWarningRules/accountClear')
                                this.$bus.$emit('remove', '/earlyWarningRules/createClear')
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    }
                } else {
                }
            })
        },
        checkStatus(e) {
            // if (e != '1') {
            this.formOptimize.setFieldsValue({
                performOperations: '3'
            })
            // }else{
            //      this.formOptimize.setFieldsValue({
            //         performOperations: undefined
            //     })
            // }
        },
        clearAllData() {
            if (this.$route.query.id) {
                this.$router.replace('/earlyWarningRules/accountClear')
                this.$bus.$emit('remove', `/earlyWarningRules/createClear?id=${this.$route.query.id}`)
            } else {
                this.$router.replace('/earlyWarningRules/accountClear')
                this.$bus.$emit('remove', '/earlyWarningRules/createClear')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/

$height: 59px;
.layout .header .user-wrapper .action .anticon,
.layout .top-nav-header-index .user-wrapper .action .anticon {
    color: #999;
}
.layout .header .user-wrapper .action .anticon,
.layout .top-nav-header-index .user-wrapper .action .anticon {
    color: #999;
}
.layout {
    .top-nav-header-index {
        .header-index-wide {
            margin-left: 10px;

            .ant-menu.ant-menu-horizontal {
                height: $height;
                line-height: $height;
            }
        }

        .trigger {
            line-height: 48px;
            font-size: 17px;
            &:hover {
                background: rgba(0, 0, 0, 0.05);
            }
        }
    }

    .header {
        z-index: 2;
        color: #999;
        height: $height;
        background-color: #1890ff;
        transition: background 300ms;

        /* dark 样式 */
        &.dark {
            color: #000000;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
            background-color: white !important;
        }
    }

    .header,
    .top-nav-header-index {
        &.dark .trigger:hover {
            background: rgba(0, 0, 0, 0.05);
        }
    }
}

.ant-layout-header {
    height: $height;
    line-height: $height;
}
</style>
