<template>
    <div class="content">
        <header>分享数据</header>
        <div class="chart">
            <div class="box">
                <div class="title-box">
                    <div class="title9">分享次数</div>
                    <el-radio-group v-model="tabPosition" style="margin-right:33px;" size="small"
                        @change="getLineChartOfShare">
                        <el-radio-button label="1">年</el-radio-button>
                        <el-radio-button label="2">月</el-radio-button>
                        <el-radio-button label="3">日</el-radio-button>
                    </el-radio-group>
                </div>
                <div id="container" style="width: calc(100% - 33px); height: 374px; margin-top: 40px;"></div>
            </div>
            <div class="box">
                <div class="title-box">
                    <div class="title9">分享渠道</div>
                </div>
                <div id="pie" style="width: calc(100% - 33px); height: 374px; margin-top: 40px;"></div>
            </div>
        </div>
        <div class="title-box">
            <div class="title9">分享数据</div>
            <exportExcel :tablecols="tablecols" :param="params" excelTitle="推广素材经销商分享数据表" />
        </div>
        <tableLayout style="margin-top:16px" :layout="tablecols" :data="tableList" :custom="true">
            <template v-slot:customcol="scope">
                <p v-if="scope.column.columnname == 'region'">
                    {{ scope.column.data['province'] }}{{ scope.column.data['city'] }}{{ scope.column.data['county'] }}
                </p>
                <p v-else-if="scope.column.columnname == 'operate'" style="color:#3874F6;">查看分享名单</p>
                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
            </template>
        </tableLayout>
        <div style="margin-top:16px;text-align:right">
            <el-pagination background small @current-change="handlCurrentChange" :current-page="params.pageNumber"
                :page-size="params.pageSize" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { Line, Pie } from '@antv/g2plot';
import exportExcel from "@/components/export_excel";

export default {
    name: "adShareData",
    components: { exportExcel },
    data() {
        return {
            tabPosition: 1,//年月日
            params: {
                "classname": "webmanage.saletool.sharematerial.statistics.share",
                "method": "getShareData",
                "content": {
                    "sat_sharematerialid": this.$route.query.id,
                    "isAll": true,
                    "pageNumber": 1,
                    "pageSize": 10
                }
            },
            tableList: [],
            total: 0
        }
    },
    created() {
        this.tablecols = this.tool.tabelCol('archives_adlist')[`shareDataTable`].tablecols;
    },
    mounted() {
        /* 折线图 */
        this.getLineChartOfShare();
        /* 饼状图 */
        this.getChannel();
        /* 表格 */
        this.getShareData();
    },
    methods: {
        getLineChartOfShare() {
            this.$api.requested({
                "classname": "webmanage.saletool.sharematerial.statistics.share",
                "method": "getLineChartOfShare",
                "content": {
                    "sat_sharematerialid": this.$route.query.id,
                    "date": (new Date()).toLocaleDateString(),
                    "type": this.tabPosition
                }
            }).then(res => {
                document.getElementById('container').innerHTML = ''
                const line = new Line('container', {
                    data: res.data,
                    padding: '0',
                    xField: 'time',
                    yField: 'sharecount',
                    xAxis: {
                        // type: 'timeCat',
                        tickCount: 12,
                    },
                    yAxis: {
                        tickCount: 9,
                    }
                });
                line.render();
            })
        },
        getChannel() {
            this.$api.requested({
                "classname": "webmanage.saletool.sharematerial.statistics.share",
                "method": "getChannel",
                "content": {
                    "sat_sharematerialid": this.$route.query.id
                }
            }).then(res => {
                const piePlot = new Pie('pie', {
                    appendPadding: 10,
                    data: res.data,
                    angleField: 'sharecount',
                    colorField: 'channel',
                    radius: 0.75,
                    color: ['#E263CD', '#F77655'],
                    legend: {
                        position: 'leftTop'
                    },
                    label: {
                        type: 'spider',
                        labelHeight: 28,
                        content: '{name}\n{percentage}',
                    },
                    interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
                });

                piePlot.render();
            })
        },
        getShareData() {
            let params = JSON.parse(JSON.stringify(this.params));
            params.content.isAll = false;
            console.log(this.params.content.isAll)
            this.$api.requested(params).then(res => {
                console.log("sdsdsds", res)
                this.tableList = res.data
                this.total = res.total
            })
        },
        handlCurrentChange(index) {
            this.params.pageNumber = index;
            this.getShareData();
        },
    }
}
</script>

<style scoped>
@import url('./public.css');

.chart {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 22rpx;
    height: 450px;
}

.chart .box {
    flex: 1;
    height: 50px;
}
</style>