<template>
    <div class="billboardList">
        <div class="head-title">
            榜单管理
            <div style="float:right;margin-top:5px">
                <el-button style="float:right;margin-top: -5px;" size="small" type="primary" @click="CommonJump('addbillboard')">新增
                </el-button>
            </div>

        </div>
        <div class="content">
            <div>
                <!-- <span style="margin-left: 10px">品牌信息</span>
          <div class="searchInput" style="width:250px">
            <el-input @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()"
              style="display:inline-block;width:225px;height:30px" placeholder="品牌信息" v-model="msg.BranchName" size="small"
              clearable>
            </el-input>
            <span @click="msg.pageIndex=1,getList()" class="el-icon-search"
              style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
          </div>
          <span style="margin-left: 10px">对标载体</span>
          <div class="searchInput" style="width:250px">
            <el-input @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()"
              style="display:inline-block;width:225px;height:30px" placeholder="对标载体" v-model="msg.CarrierName" size="small"
              clearable>
            </el-input>
            <span @click="msg.pageIndex=1,getList()" class="el-icon-search"
              style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
          </div>
          -->
            </div>

            <el-table :data="tableData" v-loading="loading" border style="width: 100%;margin:20px 0">

                <el-table-column prop="UserName" label="榜单信息">
                    <template slot-scope="scope">
                        <div class="app-image"
                            :style="{backgroundImage:'url(' + scope.row.CoverImage + ')',backgroundSize:'cover'}">
                        </div>
                        <div flex="dir:left cross:center">
                            {{scope.row.Name}}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="Sponsor" label="主办方">
                </el-table-column>
                <el-table-column prop="TypeName" label="榜单类型">
                </el-table-column>
                <el-table-column prop="group" label="面向群体">
                </el-table-column>
                <el-table-column prop="Endtime" label="报名截止时间">
                </el-table-column>
                <el-table-column prop="publicitytime" label="公示日期">
                </el-table-column>
                <el-table-column prop="Area" label="是否启用排名">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rankingType==1" style="color:green;">启用</span>
                        <span v-if="scope.row.rankingType==2" style="color:#e95252;">不启用</span>
                    </template>
                </el-table-column>




                <el-table-column prop="Status" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Status==1">报名中</span>
                        <span v-if="scope.row.Status==2">评比中</span>
                        <span v-if="scope.row.Status==3">已放榜</span>
                        <span v-if="scope.row.Status==4">取消</span>
                    </template>
                </el-table-column>
                <el-table-column prop="JoinNum" label="报名人数">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getItem(scope.row)">
                            {{scope.row.JoinNum}} 人
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="130">

                    <template slot-scope="scope">

                        <el-tooltip class="item" effect="dark" content="放榜" placement="top">
                            <img src="../../assets/img/setup/fangbang.png" alt="" class="imgstyle" @click="fangbang(scope.row)"/>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                            <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle"
                                @click="EditgoUrl(scope.row)" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <img src="../../assets/img/setup/del.png" alt="" class="imgstyle"
                                @click="delete_b(scope.row)" />
                        </el-tooltip>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
                :page-size="msg.pageSize" :current-page.sync="msg.pageIndex" layout="total,prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
        <!-- 报名人数的展示 -->
        <el-dialog title="报名信息" :visible.sync="dialogTableVisible">
            <el-table :data="joinData">
                <el-table-column property="LinkMan" label="联系人" width="150"></el-table-column>
                <el-table-column property="LinkTel" label="联系电话" width="200"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                loading: false,
                dialogTableVisible: false,
                msg: {
                    pageIndex: 1,
                    pageSize: 15,
                    UserId: 0, //	用户id
                    BranchName: '', //	品牌
                    CarrierName: '', //	对标载体

                },
                total: 0,
                tableData: [{
                    CoverImage: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616557590000_450.png',
                    Name: '成都优质火锅',
                    Sponsor: "小龙坎",
                    TypeName: "招引贡献",
                    group: '服务商',
                    Endtime: '2021-10-01',
                    publicitytime: "2021-08-31",
                    rankingType: 1,//1启用  2不启用
                    Status: 1,//1报名中，2评比中，3已放榜，4取消
                    JoinNum: 2,
                }], //数据列表
                joinData: [],
            };
        },
        created() {
            // this.getList();
        },
        methods: {
            getList() {
                this.loading = true;

                this.apipost("/api/Trade/GetFirstShopWishPageList", this.msg, res => {
                    this.loading = false;
                    if (res.data.resultCode == 1) {
                        this.total = res.data.data.count;
                        let pageData = res.data.data.pageData;
                        this.tableData = pageData;
                    }
                })
            },
            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },

            delete_b(row) {
                let that = this;
                that.Confirm("是否删除?", function () {
                    that.apipost(
                        "/api/Trade/DelFirstShopWishInfo",
                        {
                            WishId: row.Id,
                        },
                        (res) => {
                            if (res.data.resultCode == 1) {
                                that.Success(res.data.message);
                                that.getList();
                            } else {
                                that.Error(res.data.message);
                            }
                        }
                    );
                });
            },
            EditgoUrl() {

            },
            guanlianbrand(UserId) {
                this.$router.push({
                    name: "brandManagement",
                    query: {
                        UserId: UserId,
                        blank: "y",
                    },
                });
            },
            getItem(row) {//跳转到报名列表
                this.$router.push({
                    name: "listRegistration",
                    query: {
                        UserId: 0,
                        blank: "y",
                    },
                });
            },
            goadd() {//新增修改
                this.$router.push({
                    name: "addbillboard",
                });
            },
            fangbang(){//放榜功能
                this.$router.push({
                    name: "publishAlist",
                    query: {
                        UserId: 0,
                    },
                });
            },

        },
        mounted() { }
    };

</script>
<style>
    .billboardList .content .searchInput {
        border: 1px solid #DCDFE6;
        border-radius: 4px;
    }

    .billboardList .app-image {
        background-position: center center;
        width: 50px;
        height: 50px;
        border-radius: 0%;
        float: left;
        margin-right: 8px;
    }

    .billboardList .content .searchInput .el-input__inner {
        border: none;
        outline: none;
        height: 30px;
        line-height: 30px;
    }

    .billboardList .content .searchInput {
        line-height: normal;
        display: inline-table;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        width: 250px;
        margin-right: 20px;
    }

    .billboardList .content {
        background: #fff;
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
    }
</style>