<style lang="scss" scoped>
.adver-position-radio {
    margin-bottom: 15px;
    .create-web-url-class {
        width: 320px;
        height: 110px;
        background-color: #f9f8f8;
        display: flex;
        .web-url-img {
            width: 53px;
            img {
                width: 100%;
            }
        }
        .web-url-content {
            margin-top: 10px;
            margin-left: 10px;
            .url-content-id {
                margin-top: 10px;
            }
        }
    }
    .creative-label-content {
        width: 400px;
        height: 200px;
        padding: 10px;
        border: 1px solid #eee;
        .label-content-select-tag {
            height: 80%;
            overflow: auto;
        }
        .tag-select-class {
            margin-bottom: 15px;
        }
    }
    .examin-form-icon {
        font-size: 18px;
        color: #1890ff;
        cursor: pointer;
        margin-left: 10px;
    }
}
.search-bar {
    display: flex;
    align-items: center;
}
.search-box p {
    display: inline-block;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
}
.card-person-drawer {
    width: 100%;
    height: 90%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    ::v-deep .ant-card-body {
        padding: 0;
    }
    ::v-deep .ant-card-head {
        padding: 0 5px;
    }
    .card-item {
        width: calc(20% - 10px);
        margin: 10px 5px;
        float: left;
    }
    .card-item-else {
        width: calc(20% - 10px);
        margin: 10px 5px;
        float: left;
    }
}
</style>
<style scoped>
.showNumBox {
    margin: 10px 0;
}
.showNumBox .ant-card-body {
    display: flex;
    justify-content: center;
}
.showNumBox p,
.showNumBox span {
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    font-weight: 600;
    color: red;
    margin: 0;
}
.search-box .ant-card-body {
    padding: 5px 15px;
}
.showNumBox .ant-card-body .styleElse {
    line-height: 60px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
    display: none !important;
}
.yincang .ant-col-6 p {
    text-align: left;
    color: red;
    font-size: 16px;
    font-weight: 500;
}
.ant-table-thead div {
    font-weight: 700;
}
.tool-tip {
    position: absolute;
    top: 65px;
    right: 10px;
}
</style>
<style lang="less" scoped>
.ant-card-head .ant-tabs-bar {
    padding: 0;
}
.search-box .ant-card-body {
    padding: 5px 15px;
}
.search-box {
    padding: 15px 10px;
}
.search-box p {
    display: inline-block;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
}
.statistics .ant-col-6 .ant-card-body .styleElse {
    line-height: 60px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
    display: none !important;
}
.yincang .ant-col-6 p {
    text-align: left;
    color: red;
    font-size: 16px;
    font-weight: 500;
}
.ant-table-thead div {
    font-weight: 700;
}
.tool-tip {
    position: absolute;
    top: 65px;
    right: 10px;
}
.statistics {
    .ant-card-bordered {
        border: none;
    }
    .ant-card-head .ant-tabs {
        clear: both;
        margin-bottom: -13px;
        color: rgba(0, 0, 0, 0.65);
        font-weight: normal;
        font-size: 14px;
    }
    .duibi {
        position: absolute;
        right: 24px;
        top: 15px;
    }
    p {
        margin-bottom: 0;
    }
}
</style>

<style lang="less" scoped>
.middle-button {
    margin: 0 8px;
}
.newPlanStatic {
    .divider {
        height: 62px;
    }
    .showNumBox {
        background: white;
        overflow: hidden;
        margin: 15px 0;
        padding: 30px 0;
        text-align: center;
        .ant-card-body {
            padding-top: 0;
        }
        .title {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 22px;
            display: inline-block;
        }
    }
    .tabbody {
        background: white;
        padding: 0 24px;
        margin-bottom: 15px;
        .ant-tabs-bar {
            margin: 0;
        }
    }
    .chartBox {
        background: white;
        padding: 20px 0;
    }
    .tableBody {
        background: white;
        padding: 20px;
    }
}
</style>
<style>
.display-none-selset {
    display: none !important;
}
</style>
<template>
    <div class="newPlanStatic config-project">
        <div class="tabbody">
            <a-tabs v-model="tabKey" @change="tabChange">
                <a-tab-pane :key="1" tab="脚本配置列表"> </a-tab-pane>
                <a-tab-pane :key="2" tab="脚本数据导出列表"> </a-tab-pane>
                <a-tab-pane :key="3" tab="脚本评分"> </a-tab-pane>
                <a-button slot="tabBarExtraContent" type="primary" @click="newCreat(null)" v-if="tabKey == 1">
                    新建
                </a-button>
            </a-tabs>
        </div>
        <a-card>
            <div class="table-page-search-wrapper">
                <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
                    <a-row :gutter="24" v-if="tabKey === 1">
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="关键字">
                                <a-input v-decorator="['search_word']" placeholder="请输入关键字" />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="时间选择">
                                <a-range-picker
                                    v-decorator="[
                                        'timeRange',
                                        { initialValue: [moment().subtract(1, 'months'), moment()] },
                                    ]"
                                    :ranges="dateRanges"
                                    :disabled-date="disabledDate"
                                />
                            </a-form-item>
                        </a-col>

                        <a-col :md="6" :sm="6" :xxl="6">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
                                <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
                                    >重置</a-button
                                >
                            </span>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" v-else-if="tabKey === 2">
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="选择来源">
                                <a-select v-decorator="['source_code']" mode="multiple" style="width: 100%">
                                    <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-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="关键字">
                                <a-input v-decorator="['search_word']" placeholder="请输入关键字" />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="时间选择">
                                <a-range-picker
                                    v-decorator="[
                                        'timeRange',
                                        { initialValue: [moment().subtract(1, 'months'), moment()] },
                                    ]"
                                    :ranges="dateRanges"
                                    :disabled-date="disabledDateThen"
                                />
                            </a-form-item>
                        </a-col>

                        <a-col :md="6" :sm="6" :xxl="6">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
                                <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
                                    >重置</a-button
                                >
                                <a-button
                                    type="primary"
                                    @click="handleOkDownLoad"
                                    class="middle-button"
                                    :loading="downLoading"
                                    :disabled="selectedRowKeys.length == 0"
                                    >导出</a-button
                                >
                            </span>
                        </a-col>
                        <!-- <a-col :md="24" :sm="24" :xxl="24" v-if="config_id">
                            <a-form-item label="脚本ID">
                                <a-tag :key="config_id" closable @close="() => handleClose(config_id)">
                                    {{ config_id }}
                                </a-tag>
                            </a-form-item>
                        </a-col> -->
                    </a-row>
                    <a-row :gutter="24" v-else-if="tabKey === 3">
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="时间选择">
                                <a-range-picker
                                    v-decorator="[
                                        'timeRange',
                                        { initialValue: [moment().subtract(1, 'months'), moment()] },
                                    ]"
                                    :ranges="dateRanges"
                                    :disabled-date="disabledDate"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="关键字">
                                <a-input v-decorator="['search_word']" placeholder="请输入关键字" />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="上传人">
                                <a-input v-decorator="['user_name']" placeholder="请输入上传人" />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="评分">
                                <a-select v-decorator="['script_level']" mode="multiple" style="width: 100%">
                                    <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-col :md="6" :sm="6" :xxl="6">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
                                <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
                                    >重置</a-button
                                >
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-card>

        <a-row style="margin-bottom: 15px; margin-top: 12px">
            <a-col :span="24">
                <div class="tableBody" style="min-height: 200px; padding-bottom: 50px">
                    <div style="width: 100%; display: flex; justify-content: flex-end; margin-bottom: 10px">
                        <a-button
                            type="primary"
                            @click="
                                scoreVisible = true
                                scoreResults = undefined
                                scoreValue = undefined
                            "
                            v-if="tabKey === 3"
                            >去评分</a-button
                        >
                    </div>

                    <a-table
                        :columns="columns"
                        :dataSource="dataSource"
                        :pagination="false"
                        :loading="dataLoading"
                        bordered
                        size="middle"
                        style="word-break: break-all; font-size: 16px; font-weight: 600"
                        id="outTable"
                        ref="accountTable"
                        rowKey="number"
                        :customRow="rowClick"
                        :rowSelection="
                            tabKey == 1 || tabKey == 3 ? null : { selectedRowKeys, onChange: onSelectChange }
                        "
                    >
                        <span slot="query_word" slot-scope="text, record">
                            {{ Array.isArray(text) ? text.join() : text }}
                        </span>
                        <span slot="recommended_word" slot-scope="text, record">
                            {{ !!text[0] ? text.join() : '-' }}
                        </span>
                        <span slot="script_num" slot-scope="text, record">
                            {{ text ? text : '-' }}
                        </span>
                        <span slot="action" slot-scope="text, record">
                            <a @click.stop="deleteScript(record)">删除</a>
                        </span>
                        <span slot="start_time" slot-scope="text, record">
                            {{ text.split('T').join('   ') }}
                        </span>
                        <span slot="script_text" slot-scope="text, record">
                            {{ text.slice(0, 15) + '......' }}
                        </span>
                        <span slot="scriptActive" slot-scope="text, record">
                            <a
                                @click.stop="
                                    detailsVisible = true
                                    detailsData = record
                                "
                                :disabled="userInfo().id != record.user_id"
                                >查看详情</a
                            >
                            <a-divider type="vertical" />
                            <a @click.stop="deleteScriptScore(record)" :disabled="userInfo().id != record.user_id"
                                >删除</a
                            >
                        </span>
                    </a-table>
                    <a-pagination
                        size="small"
                        :showTotal="ipagination.showTotal"
                        style="float: right; margin-top: 10px"
                        v-if="dataSource.length > 0"
                        showQuickJumper
                        show-size-changer
                        :pageSize.sync="ipagination.pageSize"
                        :total="ipagination.total"
                        v-model="ipagination.current"
                        @change="getDataSource"
                        @showSizeChange="getDataSource"
                    />
                </div>
            </a-col>
        </a-row>
        <a-modal
            v-if="addScriptVisible"
            title="新建脚本配置"
            :visible="addScriptVisible"
            dialog-class="web-url-modal"
            @cancel="handleCancelAll"
            @ok="handleBudgetSure"
        >
            <keyWord :projectId.sync="scriptLabel" :allScript.sync="creativeTag" ref="selectTable" />
            <!-- <div class="adver-position-radio">
                <div class="creative-label-content">
                    <p>已选：{{ creativeTag.length || 0 }}</p>
                    <div class="label-content-select-tag">
                        <a-tag
                            v-for="item in creativeTag"
                            :key="item"
                            :closable="true"
                            class="tag-select-class"
                            @close="handleTagsClose(item)"
                        >
                            {{ item }}
                        </a-tag>
                    </div>
                </div>
            </div> -->
        </a-modal>
        <a-modal
            v-if="scoreVisible"
            title="脚本评分"
            :visible="scoreVisible"
            dialog-class="web-url-modal"
            :footer="null"
            @cancel="scoreVisible = false"
            :width="1000"
        >
            <h3>评分规则：</h3>
            <a-table ref="table" size="middle" bordered :dataSource="scoreData" :pagination="false">
                <a-table-column key="score" data-index="score" title="评分" align="center" />
                <a-table-column key="you" data-index="you" title="评分<=85" align="center" />
                <a-table-column key="liang" data-index="liang" title="85<评分<=95" align="center" />
                <a-table-column key="cha" data-index="cha" title="95<评分<=100" align="center" />
            </a-table>
            <span style="color: red; margin: 10px 0; display: block"
                >注意事项：该打分模型适用于淘特产品，其他产品使用效果未知</span
            >
            <h3>脚本输入区：</h3>
            <a-textarea
                v-model="scoreValue"
                placeholder="请输入脚本内容，多于100字的脚本评分会更有价值"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                @change="scoreResults = undefined"
            />
            <div style="width: 100%; display: flex; justify-content: flex-end; margin-top: 10px">
                <a-button type="primary" @click="getScore" v-if="!scoreResults" :loading="scoreLoading">评分</a-button>
            </div>
            <div v-if="!!scoreResults">
                <h3>评分结果展示：</h3>
                <div style="width: 100%; border: 1px solid #d9d9d9; border-radius: 4px; display: flex; padding: 5px">
                    <span style="font-size: 30px; font-weight: 700; margin-right: 20px">
                        {{ scoreResults.script_level == 1 ? '优' : scoreResults.script_level == 2 ? '良' : '低质' }}
                    </span>
                    <div>
                        <p style="margin-bottom: 0px">
                            该脚本评分为：{{ scoreResults.script_score ? scoreResults.script_score : '-' }}分
                        </p>
                        <p>
                            使用该脚本后，素材累计消耗达到2W+概率为：{{
                                (scoreResults.high_quality_prob * 100).toFixed(2) + '%'
                            }}
                        </p>
                    </div>
                </div>
            </div>
        </a-modal>
        <a-modal
            v-if="detailsVisible"
            title="脚本详情"
            :visible="detailsVisible"
            dialog-class="web-url-modal"
            :footer="null"
            @cancel="detailsVisible = false"
            :width="1000"
        >
            <div v-if="!!detailsData">
                <h3>脚本内容：</h3>
                <a-textarea
                    disabled
                    v-model="detailsData.script_text"
                    placeholder="请输入脚本内容，多于100字的脚本评分会更有价值"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                />
                <div style="margin-top: 10px">
                    <h3>评分结果展示：</h3>
                    <div
                        style="width: 100%; border: 1px solid #d9d9d9; border-radius: 4px; display: flex; padding: 5px"
                    >
                        <span style="font-size: 30px; font-weight: 700; margin-right: 20px">
                            {{ detailsData.script_level == 1 ? '优' : detailsData.script_level == 2 ? '良' : '低质' }}
                        </span>
                        <div>
                            <p style="margin-bottom: 0px">
                                该脚本评分为：{{ detailsData.script_score ? detailsData.script_score : '-' }}分
                            </p>
                            <p>
                                使用该脚本后，素材累计消耗达到2W+概率为：{{
                                    (detailsData.high_quality_prob * 100).toFixed(2) + '%'
                                }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
import qs from 'qs'
import { mapGetters } from 'vuex'
import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
import keyWord from './components/keyWord.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 TTcolumns = [
    {
        title: '关键字',
        dataIndex: 'query_word',
        scopedSlots: { customRender: 'query_word' },
        align: 'center',
        key: 'query_word',
    },
    {
        title: '推荐词',
        dataIndex: 'recommended_word',
        scopedSlots: { customRender: 'recommended_word' },
        align: 'center',
        key: 'recommended_word',
    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        scopedSlots: { customRender: 'create_time' },
        align: 'center',
        key: 'create_time',
    },
    {
        title: '创建人',
        dataIndex: 'operator',
        scopedSlots: { customRender: 'operator' },
        align: 'center',
        key: 'operator',
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        key: 'action',
    },
]

let KScolumns = [
    {
        title: '来源',
        dataIndex: 'source_name',
        scopedSlots: { customRender: 'source_name' },
        align: 'center',
        key: 'source_name',
    },
    {
        title: '关键字',
        dataIndex: 'query_word',
        scopedSlots: { customRender: 'query_word' },
        align: 'center',
        key: 'query_word',
    },
    {
        title: '时间',
        dataIndex: 'stat_date',
        scopedSlots: { customRender: 'stat_date' },
        align: 'center',
        key: 'stat_date',
    },
    {
        title: '数据量级',
        dataIndex: 'script_num',
        scopedSlots: { customRender: 'script_num' },
        align: 'center',
        key: 'script_num',
    },
    {
        title: '状态',
        dataIndex: 'task_status',
        scopedSlots: { customRender: 'task_status' },
        align: 'center',
        key: 'task_status',
    },
]

let scriptColumns = [
    {
        title: '脚本id',
        dataIndex: 'script_hash',
        scopedSlots: { customRender: 'script_hash' },
        align: 'center',
        key: 'script_hash',
    },
    {
        title: '时间',
        dataIndex: 'start_time',
        scopedSlots: { customRender: 'start_time' },
        align: 'center',
        key: 'start_time',
    },
    {
        title: '脚本内容',
        dataIndex: 'script_text',
        scopedSlots: { customRender: 'script_text' },
        align: 'center',
        key: 'script_text',
        // width: 500,
    },
    {
        title: '上传人',
        dataIndex: 'user_name',
        scopedSlots: { customRender: 'user_name' },
        align: 'center',
        key: 'user_name',
    },
    {
        title: '评分等级',
        dataIndex: 'script_level',
        // scopedSlots: { customRender: 'script_level' },
        align: 'center',
        key: 'script_level',
        customRender: function (text) {
            if (text === 1) {
                return '优'
            } else if (text === 2) {
                return '良'
            } else {
                return '低质'
            }
        },
    },
    {
        title: '操作',
        dataIndex: 'scriptActive',
        scopedSlots: { customRender: 'scriptActive' },
        align: 'center',
        key: 'scriptActive',
    },
]

export default {
    components: {
        ACol,
        ARow,
        checkBoxGroup,
        selectCheckAll,
        selectTreeAccount,
        keyWord,
    },

    data() {
        return {
            addScriptVisible: false,
            scriptLabel: [],
            creativeTag: [],
            selectedRowKeys: [],
            selectedRowKeysAll: [],
            selectionRows: [],
            selectionRowsAll: [],
            downLoading: false,
            config_id: null,
            appIds: [],
            appOptions: [],
            materialVisible: false,
            materialLoading: false,
            scheduleTimeData: [{ scheduleTime: '' }],
            indexAll: 0,
            spinning: false,
            form: this.$form.createForm(this),
            priceForm: this.$form.createForm(this),
            variableForm: this.$form.createForm(this),
            variableLoading: false,
            exportloading: false,
            dateRange: [moment().subtract(1, 'weeks'), moment()],
            noImg: require('@/assets/noImg.png'),
            scoreData: [
                {
                    score: '素材消耗达到2W+的概率',
                    you: '19.05%',
                    liang: '43.30%',
                    cha: '69.16%',
                },
            ],
            scoreValue: undefined,
            scoreResults: undefined,
            scoreLoading: false,
            validationRules: {
                bid: [
                    {
                        required: true,
                        message: '出价信息必须填写',
                        // validator: this.validateBid,
                    },
                ],
            },
            dateRanges: {
                昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                近三天: [moment().subtract(2, 'days'), moment()],
                近一周: [moment().subtract(6, 'days'), moment()],
                近14天: [moment().subtract(13, 'days'), moment()],
                近一月: [moment().subtract(1, 'months'), moment()],
            },
            rowClick: (record) => {
                return {
                    on: {
                        click: () => {
                            if (this.tabKey == 1) {
                                this.tabKey = 2
                                this.config_id = record.config_id
                                this.tabChange(this.tabKey)
                            }
                        },
                    },
                }
            },
            ipagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current
                    this.ipagination.pageSize = pageSize
                },
            },
            value: 'valid',
            KSaccountList: [],
            TTaccountList: [],

            KSdesignList: [],
            TTdesignList: [],

            operateDisabled: false,
            duration: 1000,
            //treeselect的参数
            treeValue: [],
            treeData: [],
            SHOW_PARENT,

            type: 3,
            dateValue: [moment().subtract(30, 'days'), moment()],

            operate: '',
            designList: [],

            tabKey: 1,

            loading: false,
            TTcolumns,
            KScolumns,
            scriptColumns,
            columns: [...TTcolumns],
            dataSource: [],

            dataVideoList: [],
            checkVideo: [],
            checkPersonOne: '',
            checkPersonElse: [],
            sumContent: 0,
            tableTab: 1,

            newPlan: 0,
            effectPlan: 0,

            openOptions: false,

            target: 'createTime',
            order: 'descend',
            projectId: undefined,
            projectIdAll: undefined,
            dataLoading: false,
            url: process.env.VUE_APP_BASE_SCRIPT_URL + '/get_script_config_lst/',
            modifyPriceVisible: false,
            modifyPriceLoading: false,
            modifyPriceDetail: null,
            accountVisible: false,
            againLoading: false,
            accountProjectDetail: null,
            regionData: [{ label: '不限', value: 'unlimited' }],
            ageData: [{ label: '不限', value: 'unlimited' }],
            scoreVisible: false,
            detailsVisible: false,
            detailsData: undefined,
        }
    },
    methods: {
        moment,
        ...mapGetters(['userInfo']),
        deleteScript(item) {
            let that = this
            this.$confirm({
                title: '确定要删除此条脚本?',
                content: '',
                onOk() {
                    var params = {}
                    params.config_id = item.config_id
                    params.user_id = item.user_id
                    params.operator = item.operator
                    that.postDataAction(process.env.VUE_APP_BASE_SCRIPT_URL + '/delete_script_config/', params).then(
                        (res) => {
                            if (res.success) {
                                const paramsData = that.form.getFieldsValue()
                                that.handleGetTableList(paramsData)
                            }
                        }
                    )
                },
                onCancel() {},
            })
        },
        deleteScriptScore(item) {
            let that = this
            this.$confirm({
                title: '确定要删除此条脚本评分信息?',
                content: '',
                onOk() {
                    var params = {}
                    params.unique_id = item.unique_id
                    params.user_id = item.user_id
                    params.user_name = item.user_name

                    that.postDataAction(process.env.VUE_APP_BASE_SCRIPT_URL + '/delete_script_score', params).then(
                        (res) => {
                            if (res.success) {
                                const paramsData = that.form.getFieldsValue()
                                that.handleGetTableList(paramsData)
                            }
                        }
                    )
                },
                onCancel() {},
            })
        },
        handleOkDownLoad() {
            this.selectionRows = tqFun(this.selectionRowsAll)
            if (this.selectionRows.length > 0) {
                this.downLoading = true
                let params = this.selectionRows.map((item) => {
                    return {
                        source_code: item.source_name == '内部创意' ? 1 : item.source_name == '巨量创意' ? 2 : 3,
                        query_word: item.query_word,
                        stat_date: item.stat_date,
                    }
                })

                downFilePost(process.env.VUE_APP_BASE_SCRIPT_URL + '/export_script_file/', params).then((res) => {
                    this.downLoading = false
                    let blob = new Blob([res], {
                        type: 'application/vnd.openxmlformats-officedocument.spre1adsheetml.sheet',
                    })
                    let downloadElement = document.createElement('a')
                    let href = window.URL.createObjectURL(blob) //创建下载的链接
                    downloadElement.href = href
                    downloadElement.download = '脚本.xlsx' //下载后文件名
                    document.body.appendChild(downloadElement)
                    downloadElement.click() //点击下载
                    document.body.removeChild(downloadElement) //下载完成移除元素
                    window.URL.revokeObjectURL(href) //释放掉blob对象
                })
            } else {
                this.$message.error('请选择导出的脚本')
            }
        },
        disabledDateThen(current) {
            // console.log(current)
            return current && (current > moment() || current < moment().subtract(32, 'days'))
        },
        disabledDate(current) {
            // console.log(current)
            return current && current > moment()
        },
        newCreat(id) {
            this.addScriptVisible = true
        },
        handleCancelAll() {
            this.addScriptVisible = false
            this.creativeTag = []
            this.scriptLabel = []
        },
        handleEnterChang(value) {
            this.creativeTag.push(...value)
            this.creativeTag = [...new Set(this.creativeTag)]
            if (this.creativeTag.length > 50) {
                this.$message.error('视频脚本每次最多创建五十个，超过的已清除')
                this.creativeTag.pop()
            } else {
                for (let i = 0; i < this.creativeTag.length; i++) {
                    if (this.creativeTag[i].length > 10) {
                        this.creativeTag.splice(i, 1)
                        this.$message.error('视频脚本最多只能十个字符，超过的已清除')
                    }
                }
            }

            this.scriptLabel = []
        },
        handleBudgetSure() {
            if (this.creativeTag.length == 0) {
                this.$message.error('请输入关键字')
            } else {
                var params = {}
                params.query_word_pair = this.creativeTag
                params.operator = this.userInfo().realname
                params.user_id = this.userInfo().id
                this.postDataAction(process.env.VUE_APP_BASE_SCRIPT_URL + '/add_script_config/', params).then((res) => {
                    if (res.success) {
                        this.handleCancelAll()
                        this.creativeTag = []
                        this.scriptLabel = []
                        const paramsData = this.form.getFieldsValue()
                        this.handleGetTableList(paramsData)
                    }
                })
            }
        },
        handleTagsClose(removedTag) {
            const tags = this.creativeTag.filter((tag) => tag !== removedTag)
            this.creativeTag = tags
        },
        getData(className) {
            return this.priceForm.getFieldValue(className)
        },
        getElseData(className) {
            return this.variableForm.getFieldValue(className)
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectionRows = selectionRows

            for (let i = 0; i < this.ipagination.current; i++) {
                this.selectedRowKeysAll.push([])
                this.selectionRowsAll.push([])
            }
            this.selectedRowKeysAll[this.ipagination.current - 1] = selectedRowKeys
            this.selectionRowsAll[this.ipagination.current - 1] = selectionRows
            console.log(this.selectedRowKeysAll, this.selectionRowsAll)
        },
        getDataSource(current, pageSize) {
            console.log(pageSize)
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.$nextTick(() => {
                this.ipagination.current = current
                this.ipagination.pageSize = pageSize
                for (let i = 0; i < this.ipagination.current; i++) {
                    this.selectedRowKeysAll.push([])
                    this.selectionRowsAll.push([])
                }
                this.selectedRowKeys = this.selectedRowKeysAll[current - 1]
                this.selectionRows = this.selectionRowsAll[current - 1]
                const paramsData = this.form.getFieldsValue()
                this.handleGetTableList(paramsData)
            })
        },
        handleQueryList(event) {
            this.ipagination.current = 1
            this.selectedRowKeys = []
            this.selectionRows = []
            this.selectedRowKeysAll = []
            this.selectionRowsAll = []
            event.preventDefault()
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleClose() {
            this.config_id = null
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleResetForm() {
            this.ipagination.current = 1
            this.selectedRowKeys = []
            this.selectionRows = []
            this.selectedRowKeysAll = []
            this.selectionRowsAll = []
            this.form.resetFields()
            if (this.tabKey == 1) {
                this.projectId = undefined
                this.projectIdAll = undefined
            }
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleGetTableList(data) {
            let paramsData = {
                ...data,
                start_date:
                    data.timeRange && data.timeRange.length === 2
                        ? moment(data.timeRange[0]).format('YYYY-MM-DD')
                        : null,
                end_date:
                    data.timeRange && data.timeRange.length === 2
                        ? moment(data.timeRange[1]).format('YYYY-MM-DD')
                        : null,
                page_num: this.ipagination.current,
                page_size: this.ipagination.pageSize,
                // userId: this.userInfo().id
            }
            if (this.tabKey == 2 && this.config_id) {
                paramsData.config_id = this.config_id
            }
            this.dataSource = []
            this.dataLoading = true
            this.postDataAction(this.url, paramsData)
                .then((result) => {
                    this.dataLoading = false
                    if (result.success) {
                        this.dataSource = result.result || []
                        // if (result.result.total) {
                        //     this.dataSource.unshift(result.result.total)
                        // }

                        this.ipagination.total = result.total_num || 0

                        // result.result.total
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch((error) => {
                    this.dataLoading = false
                    console.log(error, 'eeee')
                })
        },
        score() {},
        getScore() {
            if (!!this.scoreValue) {
                this.scoreLoading = true
                var params = {}
                params.user_name = this.userInfo().realname
                params.user_id = this.userInfo().id
                params.script = this.scoreValue
                this.postDataAction(process.env.VUE_APP_BASE_SCRIPT_URL + '/get_script_score', params).then((res) => {
                    this.scoreLoading = false
                    if (res.success) {
                        this.scoreResults = res.result
                    }
                })
            } else {
                this.$message.error('请输入脚本')
            }
        },
        getAccountNoProject() {
            this.projectId = undefined
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        dateChange(date, dateString) {
            // console.log(date,dateString)
        },

        filterOption(input, option) {
            // console.log(input, option)
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },

        // 快手头条的切换
        tabChange(key) {
            this.ipagination.current = 1
            this.ipagination.pageSize = 10
            this.form.resetFields()
            this.columns = this.tabKey == 1 ? [...TTcolumns] : this.tabKey == 2 ? [...KScolumns] : [...scriptColumns]
            this.url =
                this.tabKey == 1
                    ? process.env.VUE_APP_BASE_SCRIPT_URL + '/get_script_config_lst/'
                    : this.tabKey == 2
                    ? process.env.VUE_APP_BASE_SCRIPT_URL + '/get_query_word_task_info_lst/'
                    : process.env.VUE_APP_BASE_SCRIPT_URL + '/get_script_score_lst/'
            if (this.tabKey == 1) {
                this.config_id = null
            }
            this.selectedRowKeys = []
            this.selectionRows = []

            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        operateChange(value) {
            console.log(value)
            if (value) {
                this.accountDisabled = true
                this.accountId = ''
            } else {
                this.accountDisabled = false
            }
        },
    },
    watch: {
        dateValue(newName, oldName) {
            this.search()
        },
        scoreVisible(n, o) {
            if (!n) {
                this.tabChange(3)
            }
        },
    },
    computed: {
        newDate() {
            var myDate = new Date()
            myDate.getYear() //获取当前年份(2位)
            var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
            var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
            var d = myDate.getDate() //获取当前日(1-31)
            var day = myDate.getHours()
            return day
        },
    },
    mounted() {
        const paramsData = this.form.getFieldsValue()
        this.handleGetTableList(paramsData)
    },
    activated: function () {},

    filters: {
        toPercentage(val) {
            if (typeof val != 'string') {
                return (val * 100).toFixed(2) + '%'
            } else {
                return val
            }
        },
        //保留两位小数并且变成货币格式
        decimalsHandle(val) {
            if (val && typeof val != 'string') {
                if (val >= 0) {
                    val = parseFloat(val).toFixed(2)
                    let numberStr = val.toString()
                    let str = numberStr.split('.')

                    let str0 = str[0].split('').reverse()
                    for (let i = 0; i < str0.length; i++) {
                        if ((i + 1) % 4 === 0) {
                            str0.splice(i, 0, ',')
                        }
                    }
                    str0.reverse()
                    let handleResult = ''
                    for (let j = 0; j < str0.length; j++) {
                        handleResult += str0[j]
                    }

                    return handleResult + '.' + str[1]
                } else {
                    val = parseFloat(val).toFixed(2)
                    let numberStr = val.toString()
                    let str = numberStr.split('.')

                    let str0 = str[0].substr(1).split('').reverse()
                    for (let i = 0; i < str0.length; i++) {
                        if ((i + 1) % 4 === 0) {
                            str0.splice(i, 0, ',')
                        }
                    }
                    str0.reverse()
                    let handleResult = ''
                    for (let j = 0; j < str0.length; j++) {
                        handleResult += str0[j]
                    }

                    return '-' + handleResult + '.' + str[1]
                }
            } else if (typeof val == 'string') {
                return val
            } else {
                return 0
            }
        },
        //变成货币格式
        formatCurrency(val) {
            if (val) {
                let numberStr = val.toString()
                let str = numberStr.split('').reverse()
                for (let i = 0; i < str.length; i++) {
                    if ((i + 1) % 4 === 0) {
                        str.splice(i, 0, ',')
                    }
                }
                str.reverse()
                let handleResult = ''
                for (let j = 0; j < str.length; j++) {
                    handleResult += str[j]
                }
                return handleResult
            } else {
                return '-'
            }
        },
    },
}
</script>
