<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>
          <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="EnterpriseName" label="报名企业">
                </el-table-column>
                <el-table-column prop="UserName" label="参与对象">
                    <template slot-scope="scope">
                        <div class="app-image"
                            :style="{backgroundImage:'url(' + scope.row.Logo + ')',backgroundSize:'cover'}">
                        </div>
                        <div flex="dir:left cross:center">
                            {{scope.row.Name}}
                        </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="description" width='400' label="参与说明">
                </el-table-column>
                <el-table-column prop="Telephone" width='100' label="联系电话">
                </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,
                    UserId: 0, //	用户id
                    BranchName: '', //	品牌
                    CarrierName: '', //	对标载体

                },
                total: 0,
                tableData: [{
                    EnterpriseName:'四川和平旅行社',
                    Name:"旅游",
                    Logo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616557590000_450.png',
                    images:['https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616557590000_450.png'],
                    video:'http://192.168.20.214:8130/Upload/Video/202108301146507760000000003.mp4',
                    description:'我们呢撒洪都拉斯看家里的积分劳动局两地分居登录；发几个了打飞机给；的了房价高；东方丽景；东哥房间个；来得及高；砥砺奋进；哦给大家发；了京东方；老规矩的；发链接给对方；链接给对方',
                    Telephone:'12112131231',
                    Status:1,//1入榜（第x名），2淘汰，3未评比
                }], //数据列表
                joinData:null
            };
        },
        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();
            },
            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>