<template>
    <!-- 广告位详情 -->
    <div>
        <!--表格内容 start------------------------------------------------------------>
        <div class="layerBox">
            <tableTitle :name="tableDivTitle" />
            <el-table class="my-table" :data="tableData" style="width: 100%">
                <el-table-column fixed prop="id" label="编号" width="90">
                </el-table-column>
                <el-table-column prop="website_name" label="网站名称" width="">
                </el-table-column>
                <el-table-column prop="name" label="广告名称" width="">
                </el-table-column>
                <!-- <el-table-column prop="image_src" label="广告图" width="">
                </el-table-column> -->
                <el-table-column label="广告图" width="">
                    <template slot-scope="scope">
                        <img :src="scope.row.image_src" alt="" class="uploadImage">
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="status" label="尺寸" width="">
                </el-table-column> -->
                <el-table-column prop="image_url" label="广告链接" width="">
                </el-table-column>
                <el-table-column prop="fromtime" label="开始时间" width="">
                </el-table-column>
                <el-table-column prop="totime" label="结束时间" width="">
                </el-table-column>
                <el-table-column prop="day" label="剩余时间 (天)" width="">
                </el-table-column>
            </el-table>
        </div>
        <!--分页 start------------------------------------------------------------>
        <div class="alignBox">
            <el-row>
                <el-col :span="24">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <!--分页 end------------------------------------------------------------>
        <!--表格内容 end------------------------------------------------------------>
    </div>

</template>

<script>
//表格标题
import tableTitle from './components/tableTitle'

//引入公用样式
import '@/styles/global.less';
import { getAdList } from '@/api/advertise'
export default {
    components: {
        tableTitle,//表格标题
    },
    data() {
        return {
            tableDivTitle: "广告位详情",  //列表标题

            tableData: [],//表格数据

            //活动id
            activeid: "",

            // 分页相关
            page: 1,
            pageSize: 10,
            total: 0,

        }
    },

    methods: {
        //1.1 开始请求列表信息方法
        getData() {
            getAdList({
                pid: this.activeid,
                page: this.page,
                pageSize: this.pageSize
            }).then(data => {
                console.log(data);
                this.tableData = data.data.rows
            })

        },
        //1.2 列表内容分页
        //直接跳转
        handleSizeChange(val) {
            this.page = val;
            this.getData();
        },
        //1.3 点击分页
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
    },
    mounted() {
        this.activeid = this.$route.query.id
        console.log(this.activeid);

        this.getData()


    },
}
</script>

<style scoped lang="less">
.layerBox {
    padding: 30px 20px;
}
</style>