<template>
    <div>
        <el-dialog title="推广记录" :visible.sync="dialog" center width="1000px" top="50px">
            <div>
                <div>推广链接：{{promotionUrl}} <el-button type="text" class="marginL-10" @click="doCopy">复制</el-button></div>
                <div>管理员邀请码1：{{`${exData.promotion_code}`}} <el-button type="text" class="marginL-10" @click="copyCode">复制</el-button></div>
                <div class="marginB-10">备注：{{exData.remark}}</div>
                <div class="marginB-10">创建时间：{{exData.create_time}}</div>
                <div class="marginB-10" v-permission="'refresh-promote'">
                    <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
                </div>
                <el-table :data="tableData" v-loading="tableLoading" border fit>
                    <el-table-column prop="date" label="日期"></el-table-column>
                    <el-table-column prop="uvs" label="页面浏览量UV"></el-table-column>
                    <el-table-column prop="pvs" label="页面浏览量PV"></el-table-column>
                    <el-table-column prop="users_counts" label="注册用户"></el-table-column>
                    <el-table-column prop="recharge_counts" label="充值用户数"></el-table-column>
                    <el-table-column prop="recharge_moneys" label="累计充值金额"></el-table-column>
                </el-table>
                <el-pagination
                    class="marginT-20"
                    @current-change="handleCurrentChange"
                    :hide-on-single-page="false"
                    :current-page="pageNo"
                    :page-size="pageSize"
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                />
            </div>
            <div slot="footer" class="dialog-footer text-center">
                <el-button @click="dialog = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import page from '@/mixin/page'
export default {
    mixins: [page],
    props: {
        value: {
            type: Boolean,
            default: true,
        },
        exData: {
            type: Object,
            default: {},
        },
    },
    computed: {
        promotionUrl() {
            let isLastDel = this.exData.promotion_url[this.exData.promotion_url.length - 1] == '/'
            return `${this.exData.promotion_url}${isLastDel ? '' : '/'}?spm=${this.exData.promotion_code}`
        }
    },
    data() {
        return {
            tableData: [],
            searchForm: {
                id: undefined,
            },
            tableUrl: '/listPromoteDetail',
            dialog: !!this.value,
        }
    },
    methods: {
        doCopy() {
            this.messageCopy(this.promotionUrl)
        },
        copyCode() {
            this.messageCopy(this.promotionUrl)
        },
        async refreshData() {
            const data = await this.$fetch('/refreshPromote')
            if (data.code == 200) {
                this.$message.success('刷新成功')
                this.tableLoading = true
                setTimeout(() => {
                    this.init()
                }, 500)
            }
        },
        messageCopy(message) {
            this.$copyText(message)
            .then((e) => {
                this.$message.success('复制成功')
                console.log(e)
            }, function (e) {
                this.$message.error('复制失败')
                console.log(e)
            })
        }
        
    },
    mounted() {
        this.searchForm.id = this.exData.id
        this.init()
    },
    watch: {
        dialog(val) {
            if (!val) this.$emit('input', val)
        },
    },
}
</script>
<style lang="scss">

</style>
