<template>
    <div v-loading="loading" class="publishAlist">
        <div class="head-title">
            <span @click="CommonJump('billboardList')" class="blue point">榜单管理</span>
            / 放榜
        </div>
        <div class="content">
            <div v-for="(x,y) in msgList" :key='y' style="margin-bottom: 15px;border-bottom: 1px solid #e2e2e2;">
                <div style="display: flex;align-items: flex-start;">
                    <span v-if="dataobj.rankingType==1" style="line-height: 32px;margin-right: 15px;">{{y+1}}:</span>
                    <el-select class="w300" v-model="x.Id" size="small" placeholder="请选择" @change="selectdis()" clearable>
                        <el-option v-for="item in enterpriseList" :key="item.Id" :label="item.Name" :value="item.Id" :disabled="item.disabled" >
                        </el-option>
                    </el-select>
                    <span style="margin-left: 15px;line-height: 32px">小奖章</span>
                    <div style="margin-left: 5px">
                        <el-button @click="openChangeDig(1,y)" size="small">选择文件</el-button>
                        <div class="app-gallery-item" style="position: relative; width: 100px; margin-top: 10px">
                            <img v-if="!x.SmallMedal || x.SmallMedal == ''" src="../../assets/img/default.png"
                                style="width: 80px; height: 80px" alt="" />
                            <el-image v-else style="width: 80px; height: 80px" :src="x.SmallMedal">
                            </el-image>
                        </div>
                    </div>
                    <span style="margin-left: 15px;line-height: 32px;">大奖章</span>
                    <div style="margin-left: 5px">
                        <el-button @click="openChangeDig(2,y)" size="small">选择文件</el-button>
                        <div class="app-gallery-item" style="position: relative; width: 100px; margin-top: 10px">
                            <img v-if="!x.GrandMedal || x.GrandMedal == ''" src="../../assets/img/default.png"
                                style="width: 80px; height: 80px" alt="" />
                            <el-image v-else style="width: 80px; height: 80px" :src="x.GrandMedal">
                            </el-image>
                        </div>
                    </div>
                    <!-- <el-button @click="synchro()" size="small" type="primary" style="margin-left: 15px">奖章同步</el-button> -->
                    <el-tooltip class="item" effect="dark" content="奖章同步" placement="top">
                        <img src="../../assets/img/userman/reset.png" alt="" class="imgstyle"
                            @click="synchro(y)" />
                    </el-tooltip>
                    <span style="margin-left: 15px;line-height: 32px;">评语</span>
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="x.comment" class='w400' style='margin-left: 15px;'>
                    </el-input>

                </div>
                <!-- <div style="margin: 20px 0;display: flex;align-items: flex-start;">
                    评语:
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="x.comment" class='w400' style='margin-left: 15px;'>
                    </el-input>
                </div> -->
            </div>
        </div>
        <div style="margin-top: 20px">
            <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
        </div>
        <!-- 选择文件 -->
        <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
            <ChooseImg @SelectId="SelectId"></ChooseImg>
        </el-dialog>

    </div>
</template>
<script>
    import ChooseImg from "@/components/global/ChooseImg.vue";
    import UE from "@/components/global/UE.vue";
    export default {
        components: {
            ChooseImg,
            UE,
        },
        data() {
            return {
                loading: false,
                addMsg: {


                },
                imgType: 0,
                changeState: false,
                dataobj: {
                    rankingType: 1,// 1排名， 2为不排名
                    Finalists: 6
                },
                msgList: [],
                enterpriseList: [],//入围企业
                msgListindex:0

            };
        },
        created() {
            this.msgList = []
            this.enterpriseList = []
            for (let i = 0; i < this.dataobj.Finalists; i++) {
                let obj = {
                    Id: '',//企业ID
                    comment: '',//评语
                    SmallMedal: '',//小奖章
                    GrandMedal: '',//大奖章
                }
                let obj2 = {
                    Name: '企业' + i,
                    Id: i+1,
                    disabled:false
                }
                this.msgList.push(obj)
                this.enterpriseList.push(obj2)

            }
        },
        mounted() {
            if (this.$route.query.ID) {
                this.getData(this.$route.query.ID);
            }
        },
        methods: {

            //选择图片
            SelectId(msg) {
                let url = this.getIconLink(msg.url);
                if (this.imgType == 1) {
                    this.msgList[this.msgListindex].SmallMedal = url
                }else{
                    this.msgList[this.msgListindex].GrandMedal = url
                }
                this.changeState = false;
            },

            openChangeDig(num,index) {
                this.changeState = true;
                this.imgType = num;
                this.msgListindex = index
            },
            synchro(index){//奖章同步
                let Small='';
                let Grand='';
                this.msgList.forEach((x,y)=>{
                    if(y== index){
                        Small = x.SmallMedal
                        Grand = x.GrandMedal
                    }
                    if(y>index){//之后同步数据
                        x.SmallMedal =  Small 
                        x.GrandMedal =  Grand
                    }
                })
            },
            selectdis(){//企业下拉禁止选择处理
                this.enterpriseList.forEach((x,y)=>{
                    let ishow= false
                    this.msgList.map((j,ji)=>{
                        if(ishow == false){
                            if(x.Id== j.Id){
                                x.disabled = true;
                                ishow= true 
                                return
                            }else{
                                x.disabled = false;
                            }
                        }
                        
                    })
                })

            },


            //保存品牌
            Save(formName) {
                

            },
            //获取详情
            getData(ID) {
                this.loading = true;
                this.apipost(
                    "/api/Trade/GetBrandDetails",
                    {
                        ID: ID,
                    },
                    (res) => {
                        this.loading = false;
                        if (res.data.resultCode == 1) {
                            
                        }
                    }
                );
            },
        },
    };
</script>
<style>
    .app-add-cat .el-checkbox-group {
        font-size: 14px !important;
    }

    .app-add-cat .el-checkbox {
        margin-right: 0;
    }

    .app-add-cat .el-dialog__body {
        padding: 10px 20px !important;
    }

    .app-add-cat .tag-box .tag-item {
        margin-right: 5px;
    }

    .app-add-cat .tag-box {
        margin: 20px 0;
    }

    .app-add-cat .app-goods-cat-list .active {
        background: #fafafa;
    }

    .app-add-cat .app-goods-cat-list .cat-item {
        cursor: pointer;
        padding: 5px 10px;
    }

    .app-add-cat .app-goods-cat-list {
        border: 1px solid #e8eaee;
        border-radius: 5px;
        margin-top: -5px;
        padding: 10px 0;
        overflow: scroll;
        height: 400px;
    }

    .publishAlist .blue {
        color: #409eff;
    }

    .publishAlist .content {
        background: #fff;
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
    }

    .publishAlist .gez_list {
        /*width: 650px;*/
        margin-bottom: 12px;
        padding: 20px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        color: #303133;
    }

    .publishAlist .quyu {
        background-color: #f4f4f5;
        color: #909399;
        padding: 10px;
        line-height: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: 4px;
        white-space: nowrap;
        margin: 5px;
    }

    .publishAlist .el-tag+.el-tag {
        margin-left: 10px;
    }

    .publishAlist .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .publishAlist .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .publishAlist .ue-style .el-form-item__content {
        line-height: 0;
    }

    .publishAlist .app-gallery-item {
        border: none;
    }

    .publishAlist .nav_Main {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .publishAlist .nav_IconContent {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* .publishAlist .nav_IconContent div>div {
      display: inline-block;
    } */

    .publishAlist .colapp-image {
        background-size: cover;
        background-position: center center;
        width: 100px;
        height: 100px;
        border-radius: 0%;
    }

    .publishAlist .add-image-btn {
        width: 100px;
        height: 100px;
        line-height: 100px;
        color: #419efb;
        border: 1px solid #e2e2e2;
        cursor: pointer;
        text-align: center;
    }

    .publishAlist .delBtn {
        position: absolute;
        right: -8px;
        top: -8px;
        padding: 4px 4px !important;
    }

    .publishAlist .w600 {
        width: 600px;
    }

    .publishAlist .brandShuxing {
        display: flex;
        justify-content: space-between;
        width: 850px;
    }

    .publishAlist .brandShuxing_item {
        display: flex;
        justify-content: space-between;
        width: 50%;
    }
</style>