<template>
    <div class="listRegistration">
        <div class="head-title">
            <span @click="CommonJump('billboardList')" class="blue point">榜单管理</span>
            / 报名列表
            <div style="float:right;">
                <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>
                <el-select size="small" v-model="msg.UserId" :filter-method="ChangeListName" filterable
                    @change="(msg.pageIndex = 1), getList()" placeholder="请选择">
                    <el-option label="不限" :value="0"></el-option>
                    <el-option v-for="item in userList" :key="item.Id" :label="item.Name" :value="item.Id">
                    </el-option>
                </el-select>
                <span style="margin-left: 10px">面向群体</span>
                <el-select size="small" v-model="msg.ObjectType"  filterable  @change="(msg.pageIndex = 1), getList()"
                    placeholder="请选择">
                    <el-option label="不限" :value="0"></el-option>
                    <el-option v-for="item in ListObjectType" :key="item.Id" :label="item.Name" :value="item.Id">
                    </el-option>
                </el-select>
                <span style="margin-left: 10px">状态</span>
                <el-select size="small" v-model="msg.CandidateState"  filterable  @change="(msg.pageIndex = 1), getList()"
                    placeholder="请选择">
                    <el-option label="不限" :value="0"></el-option>
                    <el-option label="报名中" :value="1"></el-option>
                    <el-option label="候选" :value="2"></el-option>
                    <el-option label="淘汰" :value="3"></el-option>
                    </el-option>
                </el-select>


            </div>

            <el-table :data="tableData" v-loading="loading" border style="width: 100%;margin:20px 0">
                <el-table-column prop="CompanyName" label="报名企业">
                </el-table-column>
                <el-table-column prop="UserName" label="参与对象">
                    <template slot-scope="scope">
                        <div class="app-image"
                            :style="{backgroundImage:'url(' + scope.row.ObjectIcon + ')',backgroundSize:'cover'}">
                        </div>
                        <div flex="dir:left cross:center">
                            {{scope.row.ObjectName}}
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="UserName" label="关联图片/视频">
                    <template slot-scope="scope">
                        <div class="app-image"
                            :style="{backgroundImage:'url(' + scope.row.images[0] + ')',backgroundSize:'cover'}">
                        </div>
                        <div flex="dir:left cross:center" @click="joinData = scope.row,dialogTableVisible=true"
                            style="margin-top:14px;cursor: pointer;color: blue;">
                            查看更多
                        </div>
                    </template>
                </el-table-column> -->

              




                <!-- <el-table-column prop="Status" label="状态" width='140'>
                    <template slot-scope="scope">
                        <span v-if="scope.row.Status==1">入榜（第x名）</span>
                        <span v-if="scope.row.Status==2">淘汰</span>
                        <span v-if="scope.row.Status==3">未评比</span>

                    </template>
                </el-table-column> -->

                <el-table-column label="操作" width="180">

                    <template slot-scope="scope">

                        <el-tooltip class="item" effect="dark" content="详情" placement="top">
                            <img src="../../assets/img/userman/icon-show.png" alt="" class="imgstyle" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="淘汰" placement="top">
                            <img src="../../assets/img/userman/nopass.png" alt="" class="imgstyle"
                                @click="eliminate(scope.row)" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="候选" placement="top">
                            <img src="../../assets/img/userman/pass.png" alt="" class="imgstyle"
                                @click="candidate(scope.row)" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="重置" placement="top">
                            <img src="../../assets/img/userman/reset.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">
            <div style="display: flex;flex-wrap: wrap;" v-if='joinData'>
                <div v-for="(x,y) in joinData.images" :key='y'>
                    <el-image style="width: 100px; height: 100px;margin-right: 10px;margin-bottom: 10px;" :src="x"
                        :preview-src-list="joinData.images">
                    </el-image>
                </div>
            </div>
            <div v-if='joinData' style="margin-top: 15px;">
                <video width="320" height="240" controls="controls" v-if="joinData.video!=''">
                    <source :src="joinData.video" type="video/mp4" />
                    <source :src="joinData.video" type="video/ogg">
                </video>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                loading: false,
                dialogTableVisible: false,
                msg: {
                    pageIndex: 1,
                    pageSize: 15,
                    ListId: 0, //
                    UserId: 0, //	用户
                    ObjectType: 0,
                    CandidateState: 0,//1报名中 2候选 3淘汰
                },
                total: 0,
                tableData: [], //数据列表
                joinData: null,
                userList: [],
                usermsg: {
                    pageIndex: 1,
                    pageSize: 20,
                    Name: '',
                    Source: 0,
                    MemberGrade: 0,
                    Id: 0,
                    Moblie: ''
                },
                ListObjectType:[]
                


            };
        },
        created() {
            if (this.$route.query.Id) {
                this.msg.ListId = this.$route.query.Id
                this.getList();
            }
            this.getuserList()
            this.getListObject()//面向群体 枚举

            // this.getList();
        },
        methods: {
            getListObject() {
                this.apipost("/api/Trade/GetListObjectTypeEnumList", {}, res => {
                    if (res.data.resultCode == 1) {
                        this.ListObjectType = res.data.data
                    }
                })
            },
            ChangeListName(val) {
                this.usermsg.Name = val;
                this.getuserList();
            },
            getuserList() {
                this.apipost("/api/user/GetMemberUserDropDownList", this.usermsg, res => {
                    if (res.data.resultCode == 1) {
                        let pageData = res.data.data.pageData;
                        this.userList = pageData;
                    }
                })
            },
            getList() {
                this.loading = true;

                this.apipost("/api/Trade/GetFirstShopEnrollPageList", 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();
            },
            eliminate(row) {//淘汰对象
                let that = this;
                that.Confirm("你确定要将改对象淘汰吗?", function () {
                    console.log('你确定要将改对象淘汰吗')
                });
            },
            candidate(row) {//候选对象
                let that = this;
                that.Confirm("你确定将该对象纳入为候选吗?", function () {
                    console.log('你确定将该对象纳入为候选吗')
                });
            },
            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() {

            },




        },
        mounted() { }
    };

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

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

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

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

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