<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="ListType">
                    <el-select class="w400" v-model="addMsg.ListType" size="small" placeholder="请选择">
                        <el-option v-for="item in ListType" :key="item.Id" :label="item.Name" :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="面向群体" class="is-required" prop="ObjectTypeIds">
                    <el-select class="w400" multiple v-model="addMsg.ObjectTypeIds" size="small" placeholder="请选择">
                        <el-option v-for="item in ListObjectType" :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="20" />
                </el-form-item>
                <el-form-item label="榜单名称" prop="ListName" class="is-required" size="small">
                    <el-input v-model="addMsg.ListName" class="w600" placeholder="请输入品牌全名" maxlength="20" />
                </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">

                    <el-date-picker v-model="value" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="公示日期" class="is-required" prop="FinishDate">
                    <el-date-picker class="w300" value-format="yyyy-MM-dd HH:mm:ss" v-model="addMsg.FinishDate" type="datetime"
                        size="small" placeholder="公示日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="入围名额" prop="PrizeNum" size="small">
                    <el-input v-model="addMsg.PrizeNum" class="w600" :min='0' placeholder="请输入数量" type='number' />
                </el-form-item>


                <el-form-item label="是否启用排名" class="is-required">
                    <el-radio v-model="addMsg.EnableRank" :label="1">是</el-radio>
                    <el-radio v-model="addMsg.EnableRank" :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,
                    ListType: '',//类型
                    ObjectTypeIds: '',//面向群体 多选
                    Sponsor: '',//主办方
                    ListName: "",//榜单名称
                    CoverImage: '',//封面图
                    FinishDate: '',//公示日期
                    StartDate: '',//开始时间
                    EndDate: '',//结束时间
                    EnableRank: 1,//是否启用排名
                    PrizeNum: 0,//入围名额
                    Content: '',//详情内容

                },
                value: [],

                Advertising: "",
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 200,
                },
                rules: {
                    ListType: [
                        {
                            required: true,
                            message: "请选择榜单类型",
                            trigger: "blur",
                        },
                    ],
                    ObjectTypeIds: [
                        {
                            required: true,
                            message: "请选择面向群体",
                            trigger: "blur",
                        },
                    ],
                    Sponsor: [
                        {
                            required: true,
                            message: "请输入主办方",
                            trigger: "blur",
                        },
                    ],
                    ListName: [
                        {
                            required: true,
                            message: "请输入榜单名称",
                            trigger: "blur",
                        },
                    ],
                    CoverImage: [
                        {
                            required: true,
                            message: "请选择封面图",
                            trigger: "blur",
                        },
                    ],
                    PrizeNum: [
                        {
                            required: true,
                            message: "请输入入围名额",
                            trigger: "blur",
                        },
                    ],
                    DeadlineDate: [
                        {
                            required: true,
                            message: "请选择报名截止时间",
                            trigger: "blur",
                        },
                    ],
                    StartDate: [
                        {
                            required: true,
                            message: "请选择公示日期",
                            trigger: "blur",
                        },
                    ]
                },
                loading: false,
                changeState: false,
                imgType: 0,
                logoList: [],
                ShopWish: 1,
                ListType: [],//榜单类型 枚举
                ListObjectType: [],//面向群体 枚举
            };
        },
        created() {
            this.getListType()//榜单类型 枚举
            this.getListObject()//面向群体 枚举
        },
        mounted() {
            if (this.$route.query.Id) {
                this.getData(this.$route.query.Id);
            }
        },
        methods: {
            getListType() {
                this.apipost("/api/Trade/GetListTypeEnumList", {}, res => {
                    if (res.data.resultCode == 1) {
                        this.ListType = res.data.data
                    }
                })
            },
            getListObject() {
                this.apipost("/api/Trade/GetListObjectTypeEnumList", {}, res => {
                    if (res.data.resultCode == 1) {
                        this.ListObjectType = res.data.data
                    }
                })
            },

            //选择图片
            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;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let addMsg = JSON.parse(JSON.stringify(this.addMsg))
                        addMsg.ObjectTypeIds = addMsg.ObjectTypeIds.join(',')

                        if (this.value != '' && this.value != null) {
                            addMsg.StartDate = this.value[0];
                            addMsg.EndDate = this.value[1];
                        } else {
                            this.Error('请选择日期范围');
                        }
                        this.apipost("/api/Trade/SetFistShopPrizeListInfo", addMsg, (res) => {
                            if (res.data.resultCode == 1) {
                                this.CommonJump("billboardList");
                                this.Success(res.data.message);
                            } else {
                                this.Error(res.data.message);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //获取详情
            getData(ID) {
                this.loading = true;
                this.apipost(
                    "/api/Trade/GetFistShopPrizeListInfo",
                    {
                        ListId: 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;
                            }
                            let ids = this.addMsg.ObjectTypeIds.split(',')
                            if(ids.length>0){//下拉多选的额数据处理
                                this.addMsg.ObjectTypeIds=[];
                                ids.forEach(x=>{
                                    let num = Number(x)
                                    this.addMsg.ObjectTypeIds.push(num)

                                })
                            }                            
                            if(this.addMsg.StartDate && this.addMsg.EndDate ){
                                this.value = [this.addMsg.StartDate,this.addMsg.EndDate ]
                            }
                        }
                    }
                );
            },
        },
    };
</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>