<template>
    <div class="keep-person-main">
        <div class="keep-person-header">
            <div class="person-header-left">
                <div class="header-left-img"><img src="@/assets/touxiang.png" alt=""></div>
                <div>
                    <div class="header-left-title">你好，{{ personData ? personData.realName : 'admin' }}，祝你开心每一天</div>
                    <div class="header-left-title">
                        <span>今日消耗：</span>
                        <span>{{ personData ? personData.charge : '-' }}</span>
                        <span class="left-title-radio" v-if="personData && personData.grew < 0">
                            <img class="title-radio-img" src="@/assets/up.png" alt="">
                            {{ personData.grew ? personData.grew + '%' : '-' }}
                        </span>
                        <!-- TODO 这个是下降的样式，后续优化  -->
                        <span class="left-title-radio-down" v-else-if="personData && personData.grew >= 0">
                            <img class="title-radio-img" src="@/assets/down.png" alt="">
                            {{personData.grew ? personData.grew + '%':'-'}}
                        </span>
                        <a-tooltip>
                            <template slot="title">
                            截止此时今日与昨日的消耗同比
                            </template>
                            <a-icon type="question-circle" />
                        </a-tooltip>
                    </div>
                </div>
            </div>
            <div class="person-header-right">
                <div class="header-right-msg">
                    <div class="right-msg-class">周消耗环比
                        <a-tooltip>
                            <template slot="title">
                            本周与上周的消耗环比
                            </template>
                            <a-icon type="question-circle" />
                        </a-tooltip>
                    </div>
                    <div class="right-msg-class msg-class-up" v-if="personData && personData.weekGrew < 0">
                        <img class="title-radio-img" src="@/assets/up.png" alt="">
                        {{ personData.weekGrew ? personData.weekGrew + '%' : '-' }}
                    </div>
                    <div class="right-msg-class msg-class-down" v-else-if="personData && personData.weekGrew >= 0">
                        <img class="title-radio-img" src="@/assets/down.png" alt="">
                        {{ personData.weekGrew ? personData.weekGrew + '%' : '-' }}
                    </div>
                </div>
                <div class="header-right-msg">
                    <div class="right-msg-class">本周消耗</div>
                    <div class="right-msg-class">{{ personData ? personData.weekCharge : '-' }}</div>
                </div>
                <div class="header-right-msg">
                    <div class="right-msg-class">上周消耗</div>
                    <div class="right-msg-class">{{ personData ? personData.lweekCharge : '-' }}</div>
                </div>
                <div class="header-right-msg">
                    <div class="right-msg-class">团队内排名</div>
                    <div class="right-msg-class">
                        <span class="msg-ranking">{{ personData ? personData.rank : '-' }}</span> 
                        /{{ personData ? personData.total : '-' }}
                    </div>
                </div>
            </div>
        </div>
        <a-card title="账户列表">
            <div class="keep-person-content" slot="extra">
                <div class="person-content-title" >
                    <div class="content-title-acount"></div>
                    <div class="content-title-checkout">
                        <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
                        <span class="title-checkout-time">
                            <a-range-picker
                            v-model="dateValue"
                            :ranges="dateRanges"
                            :disabled-date="disabledDate"
                            @change="getPersonList()"
                            />
                        </span>
                    </div>
                </div>

            </div>
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="dataSource"
                bordered
                id="outTable"
                :pagination="ipagination"
                :scroll="{ x: scrollX }"
                :loading="loading"
                ref="accountTable"
                @change="sort"
            >
            <!-- style="word-break: break-all; font-size: 16px; font-weight: 600" -->
                <a slot="authName" slot-scope="text,records" @click="toDetail(records)">{{ text }}</a>
                <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="photoClick" slot-scope="photoClick">{{ photoClick | 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="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="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</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>
            </a-table>
        </a-card>

        <customColumn
            :visible="visible"
            :listNum="listNum"
            :fiexColumn="columnsFixd"
            :mediaType="2"
            @closeCustomColumn="closeCustomColumn"
            @changeColumn="changeColumn"
        />
    </div>
</template>
<script>
import customColumn from '@/views/modules/Statistics/components/customColumn.vue'
import keepPersonData from './keep-person-data';
import { mapGetters } from 'vuex';
import moment from 'moment'
export default {
    name: 'keep-person',
    components: {
        customColumn
    },
    data() {
        return {
            isCustomVisible: false,
            loading: false,
            totalAll: 100,
            dataSource: [],
            listNum: [],
            visible: false,
            columns: [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()],
            columnsFixd: keepPersonData.setNoDeleteColumns(),
            scrollX: 1500,
            personData: null,
            dateValue: [moment(), moment()],
            dateRanges: keepPersonData.setTimeRange(),
            target: 'cost',
            order: 'descend',
            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
                },
            },
        };
    },
    watch: {
        'ipagination.current':function(n,o) {
            if(n !== o) {
                this.getPersonList()
            }
        }
    },
    methods: {
        ...mapGetters(["userInfo"]),
        //点击跳转盯盘详情页
        toDetail(item) {
            let params = {};
            params.accountId = item.accountId;
            params.timeRange = this.dateValue;
            localStorage.setItem('stockWatchAccountId',JSON.stringify(params));
            this.$nextTick(() => {
                this.$router.push('/modules/stockWatch/accountPage');
            })
            
        },
        sort(pagination, filters, sorter, { currentDataSource }) {
            // console.log(pagination, filters, sorter)
            this.ipagination.current = pagination.current
            this.ipagination.pageSize = pagination.pageSize
            if (sorter.order) {
                this.order = sorter.order ? sorter.order : 'descend'
                this.target = sorter.columnKey
                this.getPersonList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
            }
        },
        disabledDate(current) {
            return current && current > moment().endOf('day')
        },
        handleDataPicker(date, dateString) {
            console.log(date, dateString, '-------');
        },
        handleCustomClick () {
            this.visible = true
            this.listNum = [...this.columns]
        },
        onShowSizeChange(current, pageSize) {
            console.log(current, pageSize, 'current, pageSize');
        },
        handleCauseSizeChange(current, pageSize) {
            console.log(current, pageSize, 'size-size');
        },
        handleCancelClick(status) {
            this.isCustomVisible = status;
        },
        //自定义列相关
        closeCustomColumn() {
            this.visible = false
        },
        changeColumn(val) {
            this.columns = [...val]
            if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
                this.columns.forEach((element, index) => {
                if (index < this.columns.length - 1) {
                   
                    element.width = 'auto'
                    element.fixed = false
                    
                }
                })

                this.scrollX = 0
            } 
            else if (this.columns.length >= 8) {
                this.columns.forEach((element, index) => {
                    if (index < this.columnsFixd.length) {
                        element.width = 150
                        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)
            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                json: arr,
                columnType: 13,
            }).then((res) => {
                // console.log(res)
            })
        },
        showColumn() {
            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                columnType: 13,
            }).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 >= this.columnsFixd.length) {
                        columns.map((item, index) => {
                        if (index > this.columnsFixd.length - 1) {
                            item.sorter = function (a, b) {}
                        }
                        })
                        columns = columns.slice(this.columnsFixd.length)
                        this.columns = [...this.columnsFixd, ...columns]

                        // this.tableHandle()
                    }

                    // console.log(this.columns)
                    }
                }

                this.changeColumn(this.columns)
                }
            })
        },
        //自定义列结束

        //获取个人绩效
        getPersonAchievements() {
            let params = {}
            params.userId = this.$route.query.person ? this.$route.query.person : this.userInfo().id;
            this.getAction('/etl/reportAccountHourly/personalAchievements', params).then(res => {
                if(res.success) {
                    this.personData = res.result
                }
                else {
                    this.$message.error(res.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },

        //获取列表
        getPersonList(data) {
            this.loading = true;
            let params = {};
            params.userId = this.$route.query.person ? this.$route.query.person : this.userInfo().id;;
            params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null;
            params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null;
            params.pageNo = this.ipagination.current;
            params.pageSize = this.ipagination.pageSize;

            if (data) {
                params.sortCode = data.target
                if (data.order == 'descend') {
                    params.sortType = 'DESC'
                } 
                else {
                    params.sortType = 'ASC'
                }
            } 
            else {
                params.sortCode = this.target
                params.sortType = this.order == 'descend' ? 'DESC' : 'ASC'
            }
            this.postDataAction('/etl/reportAccountHourly/accountPageList',params).then(res => {
                this.loading = false;
                if(res.success) {
                    this.dataSource = res.result.list
                    this.ipagination.total = res.result.total
                }
            })
        }
    },
    mounted() {
        this.$nextTick(() => {
            if(localStorage.getItem('stockWatchUserId')&&this.$route.query.person) {
                let data = JSON.parse(localStorage.getItem('stockWatchUserId'));
                this.dateValue = [moment(data.timeRange[0]),moment(data.timeRange[1])];
            }
            this.showColumn();
            this.getPersonAchievements();
            this.getPersonList();
        })
    }
};
</script>
<style lang="less" scoped>
    @import "keep-person";
</style>
