<style lang="less" scoped>
@import 'kuaishouReport';
::v-deep.vue-treeselect__control {
    line-height: 20px !important;
}
::v-deep .table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control {
    height: auto !important;
    line-height: 20px !important;
}
</style>
<template>
    <div class="video-report">
        <div class="directional-content">
            <div class="table-page-search-wrapper">
                <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
                    <a-row :gutter="24">
                        <a-col :md="16" :sm="16" :xxl="16">
                            <a-form-item label="账户名称">
                                <selectTreeAccount
                                    v-decorator="['accountIds', { initialValue: [] }]"
                                    multiple
                                    style="display: inline-block;position: relative;margin-left: 0px;width:100%;"
                                    :limit="1"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <!-- v-decorator="[
                                        'dateValue',
                                        { initialValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')] }
                                    ]" -->
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="时间选择">
                                <a-range-picker
                                    v-model="dateValue"
                                    :ranges="dateRanges"
                                    :disabled-date="disabledDate"
                                />
                            </a-form-item>
                        </a-col>

                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="设计负责人">
                                <a-select
                                    v-decorator="['leaderId']"
                                    allowClear
                                    show-search
                                    :filter-option="filterOption"
                                >
                                    <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
                                        {{ item.companyName + '_' + item.userName }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="剪辑">
                                <a-select v-decorator="['clipId']" allowClear show-search :filter-option="filterOption">
                                    <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
                                        {{ item.companyName + '_' + item.userName }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="拍摄">
                                <a-select v-decorator="['shotId']" allowClear show-search :filter-option="filterOption">
                                    <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
                                        {{ item.companyName + '_' + item.userName }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="编导">
                                <a-select v-decorator="['planId']" allowClear show-search :filter-option="filterOption">
                                    <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
                                        {{ item.companyName + '_' + item.userName }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="6" :xxl="6">
                            <a-form-item label="素材渠道">
                                <a-select v-decorator="['channelType']" allowClear>
                                    <a-select-option :value="0">内部</a-select-option>
                                    <a-select-option :value="1">素造</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>

                        <a-col :md="12" :sm="12" :xxl="12" style="display: flex;justify-content: flex-end;">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" icon="search" @click="handleQueryList"  :loading="loading">查询</a-button>
                                <!-- <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
                                    >重置</a-button
                                > -->
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </div>

        <a-modal v-model="relevantPeopleVisible" title="相关人员" :footer="null" :centered="true">
            <p>编导：{{ relevantPeopleData.planName || '暂无数据' }}</p>
            <p>剪辑：{{ relevantPeopleData.clipName || '暂无数据' }}</p>
            <p>拍摄：{{ relevantPeopleData.shotName || '暂无数据' }}</p>
        </a-modal>
        <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
            <video @click.stop class="video" :src="videoUrl" controls="controls" style="height:600px;width:100%">
                您的浏览器不支持 video 标签。
            </video>
        </a-modal>

        <!-- 报表区域 -->

        <div class="tableBox">
            <div class="tableTop">
                <a-button type="primary" @click="customColumns">自定义列</a-button>
                <a-button
                    type="default"
                    style="float:right"
                    @click="exportExcel('exportTable')"
                    id="mybtn"
                    :disabled="!!!getFormData('accountIds') || getFormData('accountIds').length == 0"
                    :loading="exportLoading"
                    >导出报表</a-button
                >
            </div>
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="data"
                bordered
                id="outTable"
                :pagination="ipagination"
                :scroll="{ x: scrollX }"
                :loading="loading"
                ref="accountTable"
                :width="tableWidth"
                @change="sort"
                style="word-break: break-all;font-size:16px;font-weight:600"
                @customHeaderCell="customHeaderCell(columns)"
            >
                <span slot="statDate" slot-scope="text, records">
                    {{
                        text
                            ? ('' + text).substr(0, 4) + '-' + ('' + text).substr(4, 2) + '-' + ('' + text).substr(6, 2)
                            : '-'
                    }}
                </span>
                <span slot="createTime" slot-scope="text, records">
                    {{
                        text
                            ? ('' + text).substr(0, 4) + '-' + ('' + text).substr(4, 2) + '-' + ('' + text).substr(6, 2)
                            : '-'
                    }}
                </span>

                <div slot="coverUrl" slot-scope="test, records">
                    <!-- {{test}} -->
                    <img :src="test" alt style="width:80px" @click="openVideo(records.url)" />
                </div>
                <span slot="operation" slot-scope="text, record">
                    <a href="javascript:;" @click="opendetail(text, record)" style="margin-right:5px">查看明细</a>
                </span>

                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
                <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
                <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
                <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
                <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
                <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
                <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
                <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{
                    play100FeedBreak | formatCurrency
                }}</span>
                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
                <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
                <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
                <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
                <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
                <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
                <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
                <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
                <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
                <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
                <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
                <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
                <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
                    eventCreditGrantLandingPage | formatCurrency
                }}</span>
                <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
                <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
                    eventCreditGrantLandingPageCost | decimalsHandle
                }}</span>
                <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
                <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
                    eventCreditGrantLandingPageRate | toPercentage
                }}</span>
                <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
                    play25FeedBreakRate | toPercentage
                }}</span>
                <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
                <!-- 新加数据 -->

                <span slot="clickRate" slot-scope="clickRate">{{ clickRate | toPercentage }}</span>
                <span slot="bClickRate" slot-scope="bClickRate">{{ bClickRate | toPercentage }}</span>

                <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
                <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
                <span slot="installFinishRate" slot-scope="installFinishRate">{{
                    installFinishRate | toPercentage
                }}</span>
                <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
                <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
                <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
                <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
                <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
                    gameAddictionCost | decimalsHandle
                }}</span>
                <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
                    downloadFinishCost | decimalsHandle
                }}</span>
                <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
                    downloadStartCost | decimalsHandle
                }}</span>
                <span slot="installFinishCost" slot-scope="installFinishCost">{{
                    installFinishCost | decimalsHandle
                }}</span>
                <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>

                <!--  -->
                <span slot="downloadStartRate" slot-scope="downloadStartRate">{{
                    downloadStartRate | toPercentage
                }}</span>
                <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
                    downloadFinishRate | toPercentage
                }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
                    activeRegisterRate | toPercentage
                }}</span>
                <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{
                    gameAddictionRate | toPercentage
                }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                <span slot="eventCreditGrantAppRate" slot-scope="eventCreditGrantAppRate">{{
                    eventCreditGrantAppRate | toPercentage
                }}</span>
                <span slot="play3sRate" slot-scope="play3sRate">{{ play3sRate | toPercentage }}</span>
                <span slot="formCountRate" slot-scope="formCountRate">{{ formCountRate | toPercentage }}</span>

                <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
                <!-- <span
                  slot="downloadFinishRate"
                  slot-scope="downloadFinishRate"
                >{{ downloadFinishRate | toPercentage }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span
                  slot="activeRegisterRate"
                  slot-scope="activeRegisterRate"
                >{{ activeRegisterRate | toPercentage }}</span> -->
                <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{
                    gameAddictionRate | toPercentage
                }}</span>
                <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
                <span slot="relativePeople" slot-scope="text, record">
                    <!-- <a href="javascript:;" @click.stop="showRelevantPeople(record)">查看相关人员</a> -->
                    <p>负责人：{{ record.designLeader || '无' }}</p>
                    <p>剪辑：{{ record.clip || '无' }}</p>
                    <p>拍摄：{{ record.shot || '无' }}</p>
                    <p>编导：{{ record.plan || '无' }}</p>
                </span>
            </a-table>
        </div>
        <customColumn
            :visible="visible"
            :listNum="listNum"
            :fiexColumn="columnsFixd"
            :mediaType="2"
            @closeCustomColumn="closeCustomColumn"
            @changeColumn="changeColumn"
        />

        <!-- 明细表 -->

        <a-modal v-model="visibleDetail" title="详细信息" width="50%" :footer="null">
            <a-button type="default" @click="exportExcel('exportDetail')" id="mybtn">导出报表</a-button>
            <a-table
                :columns="detailColumn"
                :data-source="detailData"
                bordered
                tableLayout="auto"
                :pagination="false"
                :loading="detailLoading"
                style="word-break: break-all;"
            >
                <!-- <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span> -->

                <span slot="advertiserName" slot-scope="text">{{ text || '暂未填写该数据' }}</span>
                <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
            </a-table>
        </a-modal>
    </div>
</template>

<script>
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/ipagination'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import selectComponent from './components/selectComponent'
import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
import DatePicker from '@/components/DatePicker'
import customColumn from '../components/customColumn.vue'
import { mapGetters } from 'vuex'
const columnsFixd = [
    {
        title: '视频',
        dataIndex: 'coverUrl',
        align: 'center',
        width: 100,
        fixed: 'left',
        key: 'coverUrl',
        scopedSlots: { customRender: 'coverUrl' }
    },
    {
        title: '视频名称',
        dataIndex: 'materialName',
        align: 'center',
        width: 130,
        fixed: 'left'
    },
    {
        title: '视频ID',
        dataIndex: 'signature',
        align: 'center',
        width: 150,
        fixed: 'left'
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
        align: 'center',
        width: 150,
        fixed: 'left'
    },
    {
        title: '渠道',
        dataIndex: 'channel',
        scopedSlots: { customRender: 'channel' },
        align: 'center',
        width: 150,
        fixed: 'left'
    },
    {
        title: '相关人员',
        dataIndex: 'relativePeople',
        key: 'relativePeople',
        scopedSlots: { customRender: 'relativePeople' },
        align: 'center',
        width: 150,
        fixed: 'left'
    },

    {
        title: '创建时间',
        dataIndex: 'createTime',
        scopedSlots: { customRender: 'createTime' },
        align: 'center',
        sorter: () => {}
    }
]
let show = 0

const initVariableColimns = [
    {
        title: '消耗(元)',
        dataIndex: 'cost',

        tip: '广告在投放期间的花费总额',
        align: 'center',
        scopedSlots: { customRender: 'cost' },
        sorter: () => {}
    },
    // {
    //     title: '折后消耗(元)',
    //     dataIndex: 'discountCost',
    //     width:150,
    //     tip: '广告在投放期间的花费总额',
    //     align: 'center',
    //     scopedSlots: { customRender: 'discountCost' },
    //     sorter: () => {}
    // },
    {
        title: '封面曝光数',
        dataIndex: 'photoShow',
        tip: '广告在瀑布流被观看次数',
        align: 'center',
        scopedSlots: { customRender: 'photoShow' },
        sorter: () => {}
    },
    {
        title: '封面点击数',
        dataIndex: 'photoClick',
        tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
        align: 'center',

        scopedSlots: { customRender: 'photoClick' },
        sorter: () => {}
    },
    {
        title: '封面点击率',
        dataIndex: 'clickRate',
        tip: '封面点击数占封面展示数百分比',
        align: 'center',
        scopedSlots: { customRender: 'clickRate' },
        sorter: () => {}
    },
    {
        title: '素材曝光数',
        dataIndex: 'aClick',
        tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
        align: 'center',

        scopedSlots: { customRender: 'aClick' },
        sorter: () => {}
    },
    {
        title: '行为数',
        dataIndex: 'bClick',
        tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
        align: 'center',

        scopedSlots: { customRender: 'bClick' },
        sorter: () => {}
    },

    {
        title: '行为率',
        dataIndex: 'bClickRate',
        tip: '行为数占素材曝光数百分比',
        align: 'center',
        scopedSlots: { customRender: 'bClickRate' },
        sorter: () => {}
    },
    {
        title: '平均千次封面曝光花费（元）',
        dataIndex: 'cpm',
        tip: '花费/封面曝光数*1000',
        align: 'center',
        scopedSlots: { customRender: 'cpm' },
        sorter: () => {}
    },
    {
        title: '平均封面点击单价（元）',
        dataIndex: 'cpc',
        tip: '花费／封面点击数',
        align: 'center',
        scopedSlots: { customRender: 'cpc' },
        sorter: () => {}
    },
    {
        title: '平均行为单价（元）',
        dataIndex: 'cpb',
        tip: '总花费/行为数',
        align: 'center',
        scopedSlots: { customRender: 'cpb' },
        sorter: () => {}
    },
    {
        title: '3s播放数',
        dataIndex: 'play3sCount',
        tip: '总花费/行为数',
        align: 'center',
        scopedSlots: { customRender: 'play3sCount' },
        sorter: () => {}
    },
    {
        title: '3s播放率',
        dataIndex: 'play3sRate',
        tip: '总花费/行为数',
        align: 'center',
        scopedSlots: { customRender: 'play3sRate' },
        sorter: () => {}
    }
]

let detailColumn = [
    {
        title: '客户',
        dataIndex: 'advertiserName',
        align: 'center',
        scopedSlots: { customRender: 'advertiserName' }
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
        align: 'center',
        width: 150
    },
    {
        title: '时间',
        dataIndex: 'statDate',
        align: 'center',
        width: 120
    },
    {
        title: '消耗',
        dataIndex: 'cost',
        scopedSlots: { customRender: 'cost' },
        align: 'center'
    }
]

export default {
    data() {
        return {
            material: '',
            searchLoading: false,

            designList: [],
            detailLoading: false,
            clip: undefined,
            shot: undefined,
            plan: undefined,
            leaderId: undefined,
            //明细数据
            visibleDetail: false,
            detailColumn,
            detailData: [],

            exportLoading: false,
            target: 'cost',
            order: 'desc',
            type: 0,
            dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'day')],
            openOptions: false,
            relevantPeopleVisible: false,
            relevantPeopleData: {},
            roleCode: localStorage.getItem('roleCode'),
            //下拉选择框的数据
            projectArr: [],
            selectValue: '',
            appId: [],
            //设置表格的列宽
            tableWidth: '',

            //gudinglie
            columnsFixd: columnsFixd,

            //是否打开视频
            Videovisible: false,
            videoUrl: '',

            //是否显示导出按钮
            exportExcelIsOk: true,
            consumeValue: 0,

            columns: [...columnsFixd, ...initVariableColimns], //table的表头
            addColumns: [],
            data: [],
            totalSelect: 0,
            daysFlag: false,
            dateRange: [],
            dataElse: [],
            loading: false,
            visible: false,
            //自定义列的搜索框
            searchInput: '',
            //弹出框中现实的选中列数
            scrollX: 0,
            listNum: [],
            //
            form: this.$form.createForm(this),
            videoID: '',
            timedata: [],
            ipagination: {
                current: 1,
                pageSize: 10,

                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
                }
            },
            videoUrl: process.env.VUE_APP_BASE_REPORT_URL + '/material/report/kuaishou/list',
            dateRanges: {
                昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
                近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
                近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
                近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
                近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
            }
        }
    },
    mixins: [JeecgListMixin],
    components: {
        selectComponent,
        selectTreeAccount,
        DatePicker,
        customColumn
    },
    watch: {},
    methods: {
        ...mapGetters(['userInfo']),

        handleQueryList() {
            // this.ipagination.current = 1
            // event.preventDefault()
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleResetForm() {
            // this.ipagination.current = 1
            this.form.resetFields()
            this.handleGetTableList({})
        },
        handleGetTableList(data) {
            if (data.accountIds && data.accountIds.length > 0) {
                this.loading = true
                const params = {
                    ...data,
                    startDate: this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
                    endDate: this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
                    userId: this.userInfo().id,
                    target: this.target, //默认消耗排序
                    order: this.order, //默认降序
                    pageNo: this.ipagination.current,
                    pageSize: this.ipagination.pageSize
                }
                postAction(this.videoUrl, params).then(res => {
                    if (res.success) {
                        // let result = res.result
                        // this.data.push({ ...result, key: 1 })
                        // result.map((item, index) => {
                        //   item.key = index
                        // })
                        this.data = res.result.list.map((item, index) => {
                            return {
                                ...item,
                                key: index
                            }
                        })
                        this.ipagination.total = res.result.total
                        this.loading = false
                    } else {
                        this.loading = false
                        this.$message.error(res.message)
                    }
                })
            } else {
                this.$message.error('请选择账户')
            }
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        //点击查看明细按钮的事件
        opendetail(text, record) {
            // console.log(text, record)
            this.visibleDetail = true
            this.detailData = []
            this.detailLoading = true
            this.signature = record.signature
            // console.log(this.signature)
            postAction('/ctop/kuaishou/videoReport/detail', {
                startDate: this.dateValue[0].format('YYYY-MM-DD'),
                endDate: this.dateValue[1].format('YYYY-MM-DD'),
                signature: record.signature,
                accountIds: this.getFormData('accountIds')
            }).then(res => {
                // console.log(res)
                this.detailLoading = false
                if (res.success) {
                    let result = res.result
                    // this.detailData.push({ ...result, key: 1 })
                    result.map((item, index) => {
                        item.key = index
                    })
                    this.detailData = result
                    console.log(this.detailData, 'detail----detail')
                }
            })
        },
        closeCustomColumn() {
            this.visible = false
        },
        //自定义之后修改父元素表头
        changeColumn(val) {
            console.log(val)
            this.columns = [...val]
            if (this.columns.length > this.columnsFixd.length && this.columns.length < 9) {
                this.scrollX = 0
                this.columns.forEach((element, index) => {
                    if (index < this.columnsFixd.length) {
                        element.width = 'auto'
                        element.fixed = false
                    }
                })

                // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
            } else if (this.columns.length >= 9) {
                this.columns.forEach((element, index) => {
                    if (index < this.columnsFixd.length - 1) {
                        element.width = 120
                        element.fixed = 'left'
                    }
                })

                this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
            } else {
                this.scrollX = 0
                this.columns.forEach(element => {
                    element.width = 'auto'
                    element.fixed = false
                })
            }
            let arr = JSON.stringify(this.columns)
            postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                json: arr,
                columnType: 4
            }).then(res => {
                // console.log(res)
            })
        },
        // 日期的开关
        //打开日期框
        opendate() {
            this.openOptions = !this.openOptions
            //  console.log(this.openOptions)
        },
        opendateClose() {
            this.openOptions = false
            //  console.log(this.openOptions)
        },

        // 查看相关人员
        showRelevantPeople(record) {
            this.relevantPeopleVisible = true
            getAction('/ctop/materialAscription/getDetail', {
                code: record.signature
            }).then(res => {
                console.log(res)
                this.relevantPeopleData = []
                if (res.result && res.success) {
                    this.relevantPeopleData = res.result
                }
            })
        },
        getFormData(className) {
            return this.form.getFieldValue(className)
        },
        sort(pagination, filters, sorter, { currentDataSource }) {
            if (this.getFormData('accountIds') && this.getFormData('accountIds').length > 0) {
                this.ipagination.current = pagination.current
                this.ipagination.pageSize = pagination.pageSize
                if (sorter.order == 'ascend') {
                    this.order = 'asc'
                    this.target = sorter.columnKey
                } else if (sorter.order == 'descend') {
                    this.order = 'desc'
                    this.target = sorter.columnKey
                } else {
                    ;(this.target = 'cost'), (this.order = 'desc')
                }
                this.handleQueryList()
            }
        },
        moment,
        //select切换---项目
        selectChange(key) {
            this.selectValue = key
        },
        //打开视频
        openVideo(val) {
            this.Videovisible = true
            this.videoUrl = val
        },
        videoOk() {
            this.Videovisible = false
        },

        disabledDate(current) {
            // console.log(current)
            return current && current > moment()
        },

        consumeOnChange() {},
        //查询按钮
        searchRes() {
            this.date = []
            this.ipagination.current = 1

            this.HttpPost()
        },
        //网络请求table数据函数
        HttpPost() {
            this.loading = true
            this.searchLoading = true
            show = 0
            postAction('/ctop/kuaishou/videoReport/list', {
                userId: this.userInfo().id,
                startDate: this.dateValue[0].format('YYYY-MM-DD'),
                endDate: this.dateValue[1].format('YYYY-MM-DD'),
                pageNo: this.ipagination.current,
                pageSize: this.ipagination.pageSize,
                accountIds: this.getFormData('accountIds'),
                target: this.target,
                order: this.order,
                clipId: this.clip ? this.clip : '',
                shotId: this.shot ? this.shot : '',
                planId: this.plan ? this.plan : '',
                leaderId: this.leaderId ? this.leaderId : '',
                channelType: this.material ? Number(this.material) : ''
            }).then(res => {
                let resArr = []
                this.data = []
                this.loading = false
                this.searchLoading = false
                if (res.success) {
                    // let result = res.result
                    // this.data.push({ ...result, key: 1 })
                    // result.map((item, index) => {
                    //   item.key = index
                    // })
                    this.data = res.result.list.map((item, index) => {
                        return {
                            ...item,
                            key: index
                        }
                    })
                    this.ipagination.total = res.result.total
                    this.loading = false
                } else {
                    this.loading = false
                    this.$message.error(res.message)
                }
            })
        },
        //导出报表
        exportExcel(exportType) {
            this.exportLoading = true
            let columns = []
            if (exportType == 'exportTable') {
                let column = this.columns.map((item, index) => {
                    return item.dataIndex
                })
                columns = column.splice(this.columnsFixd.length)
            }
            downFilePost('/ctop/kuaishou/videoReport/excelV2', {
                columns,
                userId: this.userInfo().id,
                target: this.target,
                order: this.order,
                startDate: this.dateValue[0].format('YYYY-MM-DD'),
                endDate: this.dateValue[1].format('YYYY-MM-DD'),
                accountIds: this.getFormData('accountIds'),
                exportType,
                signature: this.signature,
                clipId: this.clip ? this.clip : '',
                shotId: this.shot ? this.shot : '',
                planId: this.plan ? this.plan : '',
                leaderId: this.leaderId ? this.leaderId : '',
                channelType: this.material ? Number(this.material) : ''
            }).then(res => {
                this.exportLoading = false
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                })
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = `${this.dateValue[0].format('YYYY-MM-DD')}~${this.dateValue[1].format(
                    'YYYY-MM-DD'
                )}视频汇总.xlsx` //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            })
        },

        //日期选择回调
        dateChange(data, dataString) {
            if (data.length) {
                this.timedata = dataString
                this.dateRange[0] = data[0]
                this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
                this.daysFlag = true
                if (this.totalSelect > 92) {
                    this.$message.error('时间跨度太长啦，选小一点好嘛？')
                    this.daysFlag = false
                    this.dateRange = []
                }
            } else {
                this.daysFlag = false
                this.dateRange = []
            }
        },

        //弹出框打开，自定义列
        customColumns() {
            this.visible = true
            this.listNum = [...this.columns]
            console.log(this.listNum, 'this.listNum-this.listNum')
        },

        tableHandle() {
            // this.listNum = [...this.columns]
            //   console.log(this.listNum.length, this.columns)
            // if (this.listNum.length >= 9 || this.columns.length >= 9) {
            //   this.tableWidth = 160
            //   this.scrollX = this.columns.length * 160
            //   // console.log(this.scrollX)
            // } else {
            //   this.scrollX = 2000
            // }
        },

        //弹出框确定
        handleOk(e) {
            this.loading = false

            this.visible = false

            if (this.listNum.length >= 10) {
                let newlist = this.listNum.slice(columnsFixd.length)
                console.log(newlist)
                this.columns = [...columnsFixd, ...newlist]
            } else {
                this.columns = [...this.listNum]
            }

            if (this.listNum.length == 4) {
                // console.log(this.listNum.length)
                this.scrollX = 0
                this.columns.map((item, index) => {
                    item.width = 500
                })
                // console.log(1)
            } else {
                this.columns.map((item, index) => {
                    if (index == 2 || index == 0) {
                        item.width = 150
                    } else if (index == 1 || index == 2) {
                        item.width = 100
                    }
                })
                // console.log(2)
            }

            this.tableHandle()
        },
        //弹出框取消按钮
        handleCancel(e) {
            this.visible = false
        },
        loadShow() {
            show++
            if (this.data.length > 0) {
                if (show == this.data.length * 2) {
                    this.data = [...this.data]
                }
            }
        },

        // 获取设计人员
        getDesignList() {
            postAction('/ctop/kuaishou/videoReport/getDesignList').then(res => {
                console.log(res, '设计人员')
                if (res.success) {
                    this.designList = res.result
                }
            })
        }
    },

    activated() {
        console.log('activated')
        // this.getParticipateList()
        this.statDate = moment().subtract(1, 'day')

        moment().format('YYYY-MM-DD_HH:mm')

        postAction('/toutiao/videoReportDaily/getColumnJson', {
            columnType: 4
        }).then(res => {
            if (res.success) {
                if (res.result) {
                    let columns = JSON.parse(res.result)
                    if (columns.length) {
                        if (columns.length >= columnsFixd.length) {
                            columns.map((item, index) => {
                                if (index > columnsFixd.length - 1) {
                                    item.sorter = function(a, b) {}
                                }
                            })
                            columns = columns.slice(columnsFixd.length)
                            this.columns = [...columnsFixd, ...columns]

                            // this.tableHandle()
                        }

                        // console.log(this.columns)
                    }
                }
                this.changeColumn(this.columns)
            }
        })
    },
    // deactivated() {
    //   let arr = JSON.stringify(this.columns)
    //   console.log(arr)
    //   postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
    //     json: arr,
    //     columnType: 4
    //   }).then(res => {
    //     // console.log(res)
    //   })
    // },
    beforeDestroy() {
        let arr = JSON.stringify(this.columns)
        postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
            json: arr,
            columnType: 4
        }).then(res => {
            // console.log(res)
        })
    },
    filters: {
        toshowTime(val) {
            // console.log(val, this.timedata)
            // return this.timedata[0] + '~' + this.timedata[1]
            return val
        },
        toPercentage(val) {
            if (val) {
                if (typeof val != 'string') {
                    return (val * 100).toFixed(2) + '%'
                } else {
                    return val
                }
            } else if (typeof val == 'string') {
                return val
            } else {
                return 0
            }
        },
        //保留两位小数并且变成货币格式
        decimalsHandle(val) {
            // console.log(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 || val == 0) && typeof val != 'string') {
                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 if (typeof val == 'string') {
                return val
            } else {
                return '-'
            }
        }
    },

    mounted() {
        this.getDesignList()
        //请求自定义列的数据
        postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then(res => {
            if (res.success) {
                if (res.result) {
                    this.exportExcelIsOk = true
                } else {
                    this.exportExcelIsOk = false
                }
            }
        })

        //进入页面默认展示昨天到今天的数据
        this.dateRange = [moment().subtract(7, 'days'), moment()]
        this.timedata = [
            moment()
                .subtract(7, 'days')
                .format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
        ]
        // this.loading=true;

        postAction('/toutiao/videoReportDaily/getColumnJson', {
            columnType: 4
        }).then(res => {
            // console.log(res)
            if (res.success) {
                // console.log(JSON.parse(res.result))
                if (res.result) {
                    let columns = JSON.parse(res.result)
                    if (columns.length) {
                        if (columns.length >= columnsFixd.length) {
                            columns.map((item, index) => {
                                if (index > columnsFixd.length - 1) {
                                    item.sorter = function(a, b) {}
                                }
                            })
                            columns = columns.slice(columnsFixd.length)
                            this.columns = [...columnsFixd, ...columns]

                            // this.tableHandle()
                        }

                        // console.log(this.columns)
                    }
                }
                this.changeColumn(this.columns)
            }
        })
    }
}
</script>
<style lang="less">
// .ant-table .ant-table-fixed-left .ant-table-thead {
//   height: 108px !important ;
// }
.vsummary {
    .ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title {
        // display:block;
        white-space: normal;
        word-break: break-all;
    }
}
</style>

<style lang="scss" scoped>
.vsummary {
    width: 100%;
    height: 100%;
    background: white;
    padding: 15px 30px;
    .tableBox {
        background-color: #fff;
        margin: 15px 0px;
        padding: 15px 0px;
        .tableTop {
            position: relative;
            padding-bottom: 15px;
            border-bottom: 1px solid #e0e0e0;
            .selectTime {
                margin-right: 20px;
            }
            .add {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }
}
.xiangmuxuanze {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.timeDiv {
    display: flex;
    justify-content: space-between;
}
span {
    margin-left: 5px;
}
.myinput {
    width: 40%;
}

.addlist {
    float: left;
    width: 70%;
    border: 1px solid #eee;
    .selectionList {
        padding: 10px 15px;
        height: 450px;
        overflow: auto;
        .leibie {
            .leiName {
                font-size: 26px;
                text-align: left;
            }
        }
        .jutixiang {
            display: inline-block;
            width: 32%;
            box-sizing: border-box;
            padding: 10px 3px;
        }
    }
}
.listNum {
    float: right;
    width: 28%;
    border: 1px solid #eee;
    position: relative;
}
.zhuti {
    margin-top: 15px;
    overflow: hidden;

    p {
        height: 40px;
        line-height: 20px;
        padding: 10px 15px;

        background: rgb(249, 250, 253);
        border-bottom: 1px solid #eee;
    }
    #btn {
        position: absolute;
        right: 0;
        top: 5px;
    }
    .selectlist {
        width: 100%;
        list-style: none;
        margin: 0;
        height: 450px;
        padding: 0 15px 10px;
        overflow: auto;

        li {
            width: 100%;
            padding: 5px 8px;
            margin: 6px 0;
            border-radius: 10px;
            background: rgb(248, 248, 248);
            height: 32px;
            position: relative;
            span {
                width: 80%;
                height: 100%;
                display: inline-block;
                margin: 0 10px;
                // overflow:hidden;
                // text-overflow:ellipsis;
                // white-space: nowrap;
            }
            .listText {
                position: absolute;
                top: 2;
                left: 10;
                width: 40%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            #closeStyle {
                position: absolute;
                top: 9px;
                right: 7px;
            }
        }
    }
}
#mybtn {
    margin: 0 10px 15px 0;
}
</style>
