<template>
    <div v-loading="loading" class="addbillboard">
        <div class="head-title">
            <span @click="CommonJump('billboardList')" class="blue point">榜单管理</span>
            / 编辑榜单
        </div>
        <div class="content">
            <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width: 70%">
                <el-form-item label="榜单类型" class="is-required" prop="billboardType">
                    <el-select class="w400" v-model="addMsg.billboardType" size="small" placeholder="请选择">
                        <el-option v-for="item in billboardTYpeList" :key="item.Id" :label="item.Name" :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="面向群体" class="is-required" prop="groupType">
                    <el-select class="w400" multiple v-model="addMsg.groupType" size="small" placeholder="请选择">
                        <el-option v-for="item in grouporientedList" :key="item.Id" :label="item.Name" :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主办方" prop="Sponsor" class="is-required" size="small">
                    <el-input v-model="addMsg.Sponsor" class="w600" placeholder="请输入品牌全名" maxlength="100" />
                </el-form-item>
                <el-form-item label="榜单名称" prop="Name" class="is-required" size="small">
                    <el-input v-model="addMsg.Name" class="w600" placeholder="请输入品牌全名" maxlength="100" />
                </el-form-item>


                <el-form-item label="封面图" class="is-required" prop="CoverImage" size="small">
                    <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
                    <div class="app-gallery-item" style="position: relative; width: 100px; margin-top: 10px">
                        <img v-if="!addMsg.CoverImage || addMsg.CoverImage == ''" src="../../assets/img/default.png"
                            style="width: 80px; height: 80px" alt="" />
                        <el-image v-else style="width: 80px; height: 80px" :src="addMsg.CoverImage"
                            :preview-src-list="logoList">
                        </el-image>
                    </div>
                </el-form-item>
                <el-form-item label="报名截止时间" class="is-required" prop="Endtime">
                    <el-date-picker class="w300" v-model="addMsg.Endtime" type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="报名截止时间">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="公示日期" class="is-required" prop="publicitytime">
                    <el-date-picker class="w300" value-format="yyyy-MM-dd" v-model="addMsg.publicitytime" type="date" size="small"
                      placeholder="公示日期">
                    </el-date-picker>
                  </el-form-item>
                <el-form-item label="入围名额" prop="Finalists"  size="small">
                    <el-input v-model="addMsg.Finalists" class="w600" :min='0' placeholder="请输入数量" type='number' />
                </el-form-item>


                <el-form-item label="是否启用排名" class="is-required">
                    <el-radio v-model="addMsg.rankingType" :label="1">是</el-radio>
                    <el-radio v-model="addMsg.rankingType" :label="0">否</el-radio>
                </el-form-item>





                <el-form-item label="详细内容" class="ue-style">
                    <UE style="width: 700px" :defaultMsg="Advertising" :config="config" :IsMultiple="true" ref="ue">
                    </UE>
                </el-form-item>

            </el-form>
        </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 {
                addMsg: {
                    ID: 0,
                    billboardType: '',
                    groupType: '',//面向群体
                    Sponsor:'',//主办方
                    Name:"",//榜单名称
                    CoverImage:'',//封面图
                    Endtime:'',//报名截止时间
                    publicitytime:'',//公示日期
                    rankingType:1,//是否启用排名
                    Finalists:0,//入围名额
                    content:'',//详情内容

                },

                Advertising: "",
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 200,
                },
                rules: {
                    billboardType: [
                        {
                            required: true,
                            message: "请选择榜单类型",
                            trigger: "blur",
                        },
                    ],
                    groupType: [
                        {
                            required: true,
                            message: "请选择面向群体",
                            trigger: "blur",
                        },
                    ],
                    Sponsor: [
                        {
                            required: true,
                            message: "请输入主办方",
                            trigger: "blur",
                        },
                    ],
                    Name: [
                        {
                            required: true,
                            message: "请输入榜单名称",
                            trigger: "blur",
                        },
                    ],
                    CoverImage: [
                        {
                            required: true,
                            message: "请选择封面图",
                            trigger: "blur",
                        },
                    ],
                    Finalists: [
                        {
                            required: true,
                            message: "请输入入围名额",
                            trigger: "blur",
                        },
                    ],
                    Endtime:[
                    {
                            required: true,
                            message: "请选择报名截止时间",
                            trigger: "blur",
                        },
                    ],
                    publicitytime:[
                    {
                            required: true,
                            message: "请选择公示日期",
                            trigger: "blur",
                        },
                    ]
                },
                loading: false,
                changeState: false,
                imgType: 0,
                billboardTYpeList: [{ Name: '招引贡献', Id: 1 }, { Name: '首发', Id: 2 }, { Name: '首秀', Id: 3 }, { Name: '首展', Id: 4 }], //榜单类型列表
                grouporientedList: [{ Name: '载体', Id: 1 }, { Name: '品牌', Id: 2 }, { Name: '服务商', Id: 3 }],//面向群体
                logoList: [],
                ShopWish: 1,
            };
        },
        created() {
        },
        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.addMsg.CoverImage = url;
                }
                this.changeState = false;
            },

            openChangeDig(num) {
                this.changeState = true;
                this.imgType = num;
            },


            //保存品牌
            Save(formName) {
                //广告
                let advertising = this.$refs.ue.getUEContent();
                this.addMsg.content = advertising;


                if (this.addMsg.BuiltUpArea === '' || this.addMsg.EndBuiltUpArea === '') {
                    this.Error('请输入建筑面积')
                    return
                }
                if (this.addMsg.AreaRequirement === '' || this.addMsg.EndAreaRequirement === '') {
                    this.Error('请输入需求面积')
                    return
                }
                if (this.ShopWish == 0) {
                    this.addMsg.OpenShopWish = -1
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.apipost("/api/Trade/GetSetBrand", this.addMsg, (res) => {
                            if (res.data.resultCode == 1) {
                                this.CommonJump("brandManagement");
                                this.Success(res.data.message);
                            } else {
                                this.Error(res.data.message);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //获取详情
            getData(ID) {
                this.loading = true;
                this.apipost(
                    "/api/Trade/GetBrandDetails",
                    {
                        ID: ID,
                    },
                    (res) => {
                        this.loading = false;
                        if (res.data.resultCode == 1) {
                            this.addMsg = res.data.data;
                            if (this.addMsg.content && this.addMsg.content != "") {
                                this.Advertising = this.addMsg.content;
                            }

                            if (this.addMsg.OpenShopWish == -1) {
                                this.ShopWish = 0
                            }
                            this.logoList = [];
                            this.logoList.push(this.addMsg.Logo);
                        }
                    }
                );
            },
        },
    };
</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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .addbillboard .w600 {
        width: 600px;
    }

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

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