<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"
            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: null, //公示日期
        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>