<style scoped lang="scss">
::v-deep.ant-form-item {
    margin-bottom: 10px !important;
}
::v-deep.vue-treeselect__control {
    line-height: 36px !important;
}
.account-item {
    ::v-deep .ant-form-item-control {
        line-height: 1;
    }
}

::v-deep.display-none-selset {
    display: none !important;
}
// .step-jump {
//     ::v-deep table tr td {
//         border-bottom: 0px;
//     }
// }
.bottom-to-one {
    ::v-deep .ant-form-item {
        margin-bottom: 0;
    }
}
.target-person-add-button {
    margin-left: 15px;
}
.card-person {
    width: 300px;
    ::v-deep.ant-card-body {
        padding: 0px;
    }
    ::v-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;
    }
}

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

.info-detail {
    ::v-deep table tr td {
        border: 0;
    }
    ::v-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">
        <a-spin :spinning="spinning">
            <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="formProject">
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="编号位数">
                                            <a-select
                                                style="width:300px"
                                                allowClear
                                                v-decorator="[
                                                    'numberLength',
                                                    {
                                                        rules: [{ required: true, message: '编号位数限制必选' }],
                                                        initialValue: 0
                                                    }
                                                ]"
                                            >
                                                <a-select-option :value="0">不限制</a-select-option>
                                                <a-select-option :value="3">三位数</a-select-option>
                                                <a-select-option :value="4">四位数</a-select-option>
                                                <a-select-option :value="5">五位数</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16" v-if="createTypeData && createTypeData.createType == '1'">
                                    <a-col :span="16">
                                        <a-form-item label="编号">
                                            <a-input
                                                style="width:300px"
                                                v-decorator="[
                                                    'numberValue',
                                                    {
                                                        rules: [
                                                            { required: true, message: ' ' },
                                                            { validator: cpaBidValid }
                                                        ]
                                                    }
                                                ]"
                                            >
                                            </a-input>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="渠道号">
                                            <a-input
                                                v-decorator="[
                                                    'channelCode',
                                                    {
                                                        rules: [
                                                            { required: true, message: '请填写渠道号' },
                                                            {
                                                                min: 1,
                                                                max: 20,
                                                                message: '渠道号不能超过20个字符',
                                                                trigger: 'blur'
                                                            }
                                                        ]
                                                    }
                                                ]"
                                                allow-clear
                                                id="channelCode"
                                            />
                                        </a-form-item>
                                        <a-form-item
                                            v-bind="tailFormItemLayout"
                                            v-if="createTypeData && createTypeData.createType == '1'"
                                        >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('编号', 'formProject', 'channelCode')"
                                                >+编号</a-tag
                                            >
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="渠道号名称">
                                            <a-input
                                                v-decorator="[
                                                    'channelName',
                                                    {
                                                        rules: [
                                                            { required: true, message: '请填写渠道号名称' },
                                                            {
                                                                min: 1,
                                                                max: 40,
                                                                message: '渠道号名称不能超过40个字符',
                                                                trigger: 'blur'
                                                            }
                                                        ]
                                                    }
                                                ]"
                                                allow-clear
                                                id="channelName"
                                            />
                                        </a-form-item>
                                        <a-form-item
                                            v-bind="tailFormItemLayout"
                                            v-if="createTypeData && createTypeData.createType == '1'"
                                        >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('编号', 'formProject', 'channelName')"
                                                >+编号</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('渠道号', 'formProject', 'channelName')"
                                                >+渠道号</a-tag
                                            >
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="下载链接">
                                            <a-button type="primary" @click="addNewApp">添加应用</a-button>
                                        </a-form-item>
                                        <a-form-item v-bind="tailFormItemLayout">
                                            <span style="color:red">由于快手API限制，每天最多新建300个应用包</span>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="调起链接">
                                            <a-input v-decorator="['schemaUri']" allow-clear id="schemaUri" />
                                        </a-form-item>
                                        <a-form-item
                                            v-bind="tailFormItemLayout"
                                            v-if="createTypeData && createTypeData.createType == '1'"
                                        >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('编号', 'formProject', 'schemaUri')"
                                                >+编号</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('渠道号', 'formProject', 'schemaUri')"
                                                >+渠道号</a-tag
                                            >
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="第三方点击监测链接">
                                            <a-input
                                                v-decorator="[
                                                    'clickTrackUrl',
                                                    {
                                                        rules: [
                                                            { required: true, message: '请填写第三方点击监测链接' },
                                                            { validator: handleConfirmValue }
                                                        ]
                                                    }
                                                ]"
                                                allow-clear
                                                id="clickTrackUrl"
                                            />
                                        </a-form-item>
                                        <a-form-item
                                            v-bind="tailFormItemLayout"
                                            v-if="createTypeData && createTypeData.createType == '1'"
                                        >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('编号', 'formProject', 'clickTrackUrl')"
                                                >+编号</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('渠道号', 'formProject', 'clickTrackUrl')"
                                                >+渠道号</a-tag
                                            >
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="第三方actionBar监测链接">
                                            <a-input
                                                v-decorator="[
                                                    'actionbarClickUrl',
                                                    {
                                                        rules: [{ validator: handleConfirmValueOkUndefind }]
                                                    }
                                                ]"
                                                allow-clear
                                                id="actionbarClickUrl"
                                            />
                                        </a-form-item>
                                        <a-form-item
                                            v-bind="tailFormItemLayout"
                                            v-if="createTypeData && createTypeData.createType == '1'"
                                        >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('编号', 'formProject', 'actionbarClickUrl')"
                                                >+编号</a-tag
                                            >
                                            <a-tag
                                                color="#2db7f5"
                                                @click="getChangeAll('渠道号', 'formProject', 'actionbarClickUrl')"
                                                >+渠道号</a-tag
                                            >
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="16">
                                        <a-form-item label="是否关联单品">
                                            <a-radio-group
                                                disabled
                                                button-style="solid"
                                                v-decorator="[
                                                    'isHaveItem',
                                                    {
                                                        rules: [{ required: true, message: '是否关联单品必选' }],
                                                        initialValue: 0
                                                    }
                                                ]"
                                            >
                                                <a-radio-button :value="1">是</a-radio-button>
                                                <a-radio-button :value="0">否</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="使用层级">
                                            <a-radio-group
                                                button-style="solid"
                                                v-decorator="[
                                                    'usageLevel',
                                                    {
                                                        rules: [{ required: true, message: '使用层级必选' }],
                                                        initialValue: 'plan'
                                                    }
                                                ]"
                                            >
                                                <a-radio-button value="account">账户</a-radio-button>
                                                <a-radio-button value="plan">计划</a-radio-button>
                                                <a-radio-button value="group">组</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="是否循环使用">
                                            <a-radio-group
                                                button-style="solid"
                                                v-decorator="[
                                                    'isCycle',
                                                    {
                                                        rules: [{ required: true, message: '使用层级必选' }],
                                                        initialValue: 1
                                                    }
                                                ]"
                                            >
                                                <a-radio-button :value="1">是</a-radio-button>
                                                <a-radio-button :value="0">否</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <!-- <a-row
                                    :gutter="16"
                                    v-if="getFormData('isCycle') == 1 || getFormData('isCycle') == undefined"
                                >
                                    <a-col :span="16">
                                        <a-form-item label="循环使用次数">
                                            <a-input-number
                                                v-decorator="[
                                                    'cycleTimes',
                                                    {
                                                        rules: [
                                                            {
                                                                required: getFormData('isCycle') == 0 ? false : true,
                                                                message: '请输入循环使用次数'
                                                            }
                                                        ]
                                                    }
                                                ]"
                                                :precision="0"
                                                :min="1"
                                                :max="999"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row> -->
                            </a-form>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <div style="width:100%;display:flex;    justify-content: flex-end;">
                <a-button type="default" style="margin-right: 15px" @click="goBack">取消</a-button>
                <a-button type="primary" style="margin-right: 15px" @click="saveHandler" :loading="saveLoading"
                    >确定</a-button
                >
            </div>
        </a-spin>
        <creatApplication ref="application" @getDataList="getDataAll" />
    </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 './components/treeSelectProject.vue'
import treeSelectAccount from './components/treeSelectAccount.vue'
import { mapGetters } from 'vuex'
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 creatApplication from './components/creatApplication.vue'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
// import EditableCell from './editablCell'
// 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)
}

let optionsAppActive = []
let businessOptions = []
let interestVideoOptions = []
let retargetColumns = [
    {
        title: '人群包',
        dataIndex: 'name',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'name' }
    },
    {
        title: '属性',
        dataIndex: 'populationType',
        scopedSlots: {
            customRender: 'populationType'
        },
        width: 200
    },
    {
        title: '所属账号',
        dataIndex: 'accountId',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'accountId' }
    }
]
export default {
    name: 'GlobalHeader',
    components: {
        //   UserMenu,
        //   SMenu,
        Logo,
        Treeselect,
        selectCheckAll,
        checkBoxGroup,
        uploadFile,
        selectTable,
        treeSelectAccount,
        creatApplication
        // EditableCell
    },
    mixins: [mixin],
    data() {
        return {
            projectId: null,
            spinning: false,
            saveLoading: false,
            accountIds: [],
            fansStarOptions: [],
            fansStarType: 0,
            deviceType: 0,
            priceType: 0,
            customCrowd: '0',
            tabKey: '0',
            retargetDataAll: [],
            finallyRightTree: [],
            retargetColumns,
            activeKey: '',
            loading: false,
            formProject: this.$form.createForm(this), //选择项目表单
            newAppFormData: null,
            formItemLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 18,
                        offset: 6
                    }
                }
            },
            createTypeData: { createType: '1', accountId: null }
        }
    },
    computed: {},
    watch: {},
    mounted() {
        this.$nextTick(function() {
            this.createTypeData = JSON.parse(localStorage.getItem('channelInfo'))
            window.addEventListener('scroll', this.onScroll)
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        })
    },
    filters: {},
    methods: {
        moment,
        ...mapGetters(['userInfo']),
        cpaBidValid(rule, value, callback) {
            let length =
                this.getFormData('numberLength') == 0 || this.getFormData('numberLength') == 5
                    ? 5
                    : this.getFormData('numberLength') == 3
                    ? 3
                    : 4
            let z = /-/g
            let a = /\//g
            let d = /\./g
            if (value === '' || value === undefined) {
                callback('请填写编号')
            } else if (value.match(d)) {
                callback('请填写正确编号')
            } else if (value.match(a)) {
                callback('请填写正确编号')
            } else if (value.match(z) && value.match(z).length > 1) {
                callback('请填写正确编号')
            } else if (value.startsWith('-') || value.endsWith('-')) {
                callback('请填写正确编号')
            } else if (value.match(/[^0-9+-\/]/g)) {
                callback('请填写正确编号')
            } else if (value.match(z) && value.match(z).length == 1) {
                console.log(value.split('-'))
                if (Number(value.split('-')[0]) > Number(value.split('-')[1])) {
                    callback('请填写正确编号')
                } else {
                    if (value.split('-')[0].length > length || value.split('-')[1].length > length) {
                        callback('请填写正确编号')
                    } else {
                        callback()
                    }
                }
            } else if (/^[0-9]/g.test(value)) {
                if (value.length > length) {
                    callback('请填写正确编号')
                } else {
                    callback()
                }
            } else {
                callback()
            }
        },
        getDataAll(form) {
            this.newAppFormData = form
        },
        addNewApp() {
            this.$refs.application.showApplication()
        },
        getChangeAll(type, form, field) {
            var node = document.getElementById(field)
            var v = ''
            if (field == 'channelName' || field == 'channelCode') {
                v = '-{{' + type + '}}-'
            } else {
                v = '-{{' + type + '}}-'
            }

            if (document.selection) {
                //IE
                node.focus()
                var sel = document.selection.createRange()
                sel.text = v
                sel.select()
                if (field == 'channelName') {
                    this[form].setFieldsValue({ channelName: sel.text })
                } else if (field == 'channelCode') {
                    this[form].setFieldsValue({ channelCode: sel.text })
                } else if (field == 'schemaUri') {
                    this[form].setFieldsValue({ schemaUri: sel.text })
                } else if (field == 'clickTrackUrl') {
                    this[form].setFieldsValue({ clickTrackUrl: sel.text })
                } else if (field == 'actionbarClickUrl') {
                    this[form].setFieldsValue({ actionbarClickUrl: sel.text })
                }
            } else if (node.selectionStart || node.selectionStart == '0') {
                //MOZILLA/GOOGLE
                var startPos = node.selectionStart
                var endPos = node.selectionEnd
                var restoreTop = node.scrollTop
                node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
                if (restoreTop > 0) {
                    node.scrollTop = restoreTop
                }
                if (field == 'channelName') {
                    this[form].setFieldsValue({ channelName: node.value })
                } else if (field == 'channelCode') {
                    this[form].setFieldsValue({ channelCode: node.value })
                } else if (field == 'schemaUri') {
                    this[form].setFieldsValue({ schemaUri: node.value })
                } else if (field == 'clickTrackUrl') {
                    this[form].setFieldsValue({ clickTrackUrl: node.value })
                } else if (field == 'actionbarClickUrl') {
                    this[form].setFieldsValue({ actionbarClickUrl: node.value })
                }
                node.focus()
                node.selectionStart = startPos + v.length
                node.selectionEnd = startPos + v.length
                // this.channelName = node.value
            } else {
                //OTHER
                node.value += v
                // console.log(node.value)
                if (field == 'channelName') {
                    this[form].setFieldsValue({ channelName: node.value })
                } else if (field == 'channelCode') {
                    this[form].setFieldsValue({ channelCode: node.value })
                } else if (field == 'schemaUri') {
                    this[form].setFieldsValue({ schemaUri: node.value })
                } else if (field == 'clickTrackUrl') {
                    this[form].setFieldsValue({ clickTrackUrl: node.value })
                } else if (field == 'actionbarClickUrl') {
                    this[form].setFieldsValue({ actionbarClickUrl: node.value })
                }
                node.focus()
                // this.channelName = node.value
            }
        },
        handleConfirmValue(rule, value, callback) {
            if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
                callback()
            } else {
                callback('链接不能为空且开头为http://或https://')
            }
        },
        handleConfirmValueOkUndefind(rule, value, callback) {
            if (!!!value) {
                callback()
            } else if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value)) {
                callback()
            } else {
                callback('链接开头为http://或https://')
            }
        },
        numberMinCheck(rule, value, callback) {
            if (value == '' || value == null) {
                callback('请输入正确的编号')
            } else if (this.getFormData('numberMax') && value > this.getFormData('numberMax')) {
                callback('请输入正确的编号')
            } else {
                callback()
            }
        },
        goBack() {
            localStorage.removeItem('channelInfo')
            this.$router.replace('/autoLaunch/channelAdmin')
            this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')

            this.$bus.$emit('remove', '/autoLaunch/createChannelIndex?accountId=' + this.$route.query.accountId)
        },
        saveHandler() {
            this.formProject.validateFields((err, values) => {
                if (!err) {
                    if (!!this.newAppFormData) {
                        this.saveLoading = true
                        var params = { ...values, ...this.newAppFormData }
                        params.userId = this.userInfo().id
                        params.createType = this.createTypeData.createType
                        let numberValueArr = params.numberValue.split('-')
                        if (numberValueArr.length > 1) {
                            if (numberValueArr[0] > numberValueArr[1]) {
                                this.$message.error('编号填写错误')
                                return
                            }
                        }

                        if (this.createTypeData && this.createTypeData.usageRange == '1') {
                            params.usageRange = 1
                            params.projectId = null
                            params.accountId = this.createTypeData.accountId
                        } else if (this.createTypeData && this.createTypeData.usageRange == '2') {
                            params.usageRange = 2
                            params.projectId = this.createTypeData.projectId
                            params.accountId = null
                        }
                        let url =
                            this.createTypeData.createType == '1'
                                ? '/channel/systemBatchCreation'
                                : '/channel/customizedCreate'
                        postAction(url, params).then(res => {
                            this.saveLoading = false
                            if (res.success) {
                                localStorage.removeItem('channelInfo')
                                this.$router.replace('/autoLaunch/channelAdmin')
                                this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')
                                this.$bus.$emit(
                                    'remove',
                                    '/autoLaunch/createChannelIndex?accountId=' + this.$route.query.accountId
                                )
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        this.$message.error('未创建新的应用')
                    }
                }
            })
        },
        numberMaxCheck() {
            // if (value == '' || value == null) {
            //     callback('请输入最高出价')
            // } else if (this.getFormData('numberMin') && value < this.getFormData('numberMin')) {
            //     callback('该编号不能比前面小')
            // } else {
            //     callback()
            // }
            this.formProject.validateFields(['numberMin'])
        },
        //获取表单的某一个属性值
        getFormData(className) {
            return this.formProject.getFieldValue(className)
        },
        onScroll() {
            // var box = document.getElementById('box')
            // var t = document.documentElement.scrollTop || document.body.scrollTop
            // box.style.top = t + 'px'

            var jump = document.querySelectorAll('.step-jump')
            var distance =
                document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
            jump.forEach((item, index) => {
                if (distance >= item.offsetTop) {
                    this.activeStep = index
                }
            })
        },
        // 锚点点击
        jump(index) {
            this.activeStep = index
            // 用 class=".step-jump" 添加锚点，此时的类名要放在tr上，放在td上不对，
            // 以后做的时候要注意这点，不是表格的时候，如何放置锚点
            let jump = document.querySelectorAll('.step-jump')
            // 通过 offsetTop 获取对象到窗体顶部的距离，然后赋值给 scrollTop，就能实现锚点的功能
            let total = jump[index].offsetTop
            // scrollTop滚动条距离页面的距离
            let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
            // 平滑滚动，时长500ms，每10ms一跳，共50跳
            let step = total / 50
            if (total > distance) {
                smoothDown()
            } else {
                let newTotal = distance - total
                step = newTotal / 50
                smoothUp()
            }
            function smoothDown() {
                if (distance < total) {
                    distance += step
                    document.body.scrollTop = distance
                    document.documentElement.scrollTop = distance
                    window.pageYOffset = distance
                    setTimeout(smoothDown, 5)
                } else {
                    document.body.scrollTop = total
                    document.documentElement.scrollTop = total
                    window.pageYOffset = total
                }
            }
            function smoothUp() {
                if (distance > total) {
                    distance -= step
                    document.body.scrollTop = distance
                    document.documentElement.scrollTop = distance
                    window.pageYOffset = distance
                    setTimeout(smoothUp, 10)
                } else {
                    document.body.scrollTop = total
                    document.documentElement.scrollTop = total
                    window.pageYOffset = total
                }
            }
        },

        getData(className, formName) {
            return this[formName].getFieldValue(className)
        }
    }
}
</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>
