<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; white-space: nowrap"
        >
          <span
            v-if="dataobj.rankingType != 1"
            style="line-height: 32px; margin-right: 15px"
            >{{ y + 1 }}:</span
          >
          <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($event, y)"
            clearable
            :disabled="readonly"
          >
            <el-option
              v-for="item in enterpriseList"
              :key="item.Id"
              :label="item.CompanyNameObj"
              :value="item.Id"
              :disabled="item.disabled"
            >
              <div>{{ item.CompanyName }}-{{ item.ObjectName }}</div>
            </el-option>
          </el-select>
          <span style="margin-left: 15px; line-height: 32px">小奖章</span>
          <div style="margin-left: 5px">
            <el-upload
              class="avatar-uploader"
              action
              :show-file-list="false"
              :http-request="UploadSmall"
              :data="{ index: y }"
              :disabled="readonly"
            >
              <i
                v-if="!x.MedalImage || x.MedalImage == ''"
                class="el-icon-plus avatar-uploader-icon"
              ></i>
              <img v-else :src="x.MedalImage" class="avatar" />
            </el-upload>
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            content="奖章同步"
            placement="top"
            v-if="!readonly"
          >
            <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"
            maxlength="20"
            :rows="2"
            placeholder="请输入内容"
            v-model="x.Reviews"
            class="w400"
            style="margin-left: 15px"
            :disabled="readonly"
          >
          </el-input>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px" v-if="!readonly">
      <el-button size="small" type="primary" @click="Save(1)">暂存</el-button>
      <el-button size="small" type="primary" @click="Save(2)">放榜</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: 0, // 1排名， 2为不排名
        Finalists: 6,
      },
      msgList: [],
      enterpriseList: [], //入围企业
      msgListindex: 0,
      sort: 0,
      msg: {
        Type: 0,
        ListId: 0,
        List: [],
      },
      readonly: false, //页面只读
    };
  },
  created() {
    if (this.$route.query.Id) {
      this.msg.ListId = this.$route.query.Id;
      this.getData(this.$route.query.Id);
      this.GetFirstShopEnrollCandidateList(this.$route.query.Id);
    }
    if (this.$route.query.readonly) {
      this.readonly = this.$route.query.readonly;
    }
    if (this.$route.query.PrizeNum) {
      this.dataobj.Finalists = this.$route.query.PrizeNum;
    }
    if (this.$route.query.isRank) {
      this.dataobj.rankingType = this.$route.query.isRank;
    }
    this.msgList = [];
    for (let i = 0; i < this.dataobj.Finalists; i++) {
      let obj = {
        Id: "", //企业ID
        UserId: "", //用户ID
        Reviews: "", //评语
        MedalImage: "", //小奖章
        // MedalImageBig: "", //大奖章
        Rank: i + 1, //排名
      };
      this.msgList.push(obj);
    }
  },
  mounted() {},
  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) {
      this.$confirm("后面所有奖章都将同步为当前奖章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //奖章同步
          let Small = "";
          let Grand = "";
          this.msgList.forEach((x, y) => {
            if (y == index) {
              Small = x.MedalImage;
              // Grand = x.MedalImageBig;
            }
            if (y > index) {
              //之后同步数据
              x.MedalImage = Small;
              // x.MedalImageBig = Grand;
            }
          });
          this.$message({
            type: "success",
            message: "同步成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消同步",
          });
        });
      return;
    },
    selectdis(val, index) {
      this.enterpriseList.forEach((e) => {
        if ((val = e.Id)) {
          this.msgList[index].UserId = e.UserId;
        }
      });
      //企业下拉禁止选择处理
      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(type) {
      this.msg.Type = type;
      let pass = this.msgList.every((e) => {
        return e.Id > 0 && e.MedalImage != "" && e.Reviews != "";
      });
      this.msg.List = this.msgList;
      if (pass) {
        this.apipost(
          "/api/Trade/SetFirstShopConfirmListInfo",
          this.msg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.$message.success("操作成功");
              this.getData();
            } else {
              this.$message.error(res.data.message);
            }
          }
        );
      } else {
        this.$message.error("请完善所有内容");
      }
    },
    //获取详情
    getData(ID) {
      this.apipost(
        "/api/Trade/GetFirstShopConfirmListList",
        {
          ListId: ID,
        },
        (res) => {
          if (res.data.resultCode == 1) {
            if (res.data.data.length > 0) {
              this.msgList = res.data.data;
            }
          }
        }
      );
    },
    //获取候选报名的列表
    GetFirstShopEnrollCandidateList(ID) {
      this.apipost(
        "/api/Trade/GetFirstShopEnrollCandidateList",
        {
          ListId: ID,
        },
        (res) => {
          if (res.data.resultCode == 1) {
            this.enterpriseList = [];
            this.enterpriseList = res.data.data;

            this.enterpriseList.forEach((e, i) => {
              e.CompanyNameObj = e.CompanyName + "-" + e.ObjectName;
              e.disabled = false;
            });
          }
        }
      );
    },
    //上传小奖章
    UploadSmall(file) {
      let imgSrc = window.URL.createObjectURL(file.file);
      let img = new Image();
      img.src = imgSrc;
      let this_ = this;
      img.onload = function () {};
      this.UploadFileToTencent(this.FileType().UserImg, file.file, (res) => {
        if (res.resultCode == 1) {
          let index = file.data.index;
          this.msgList[index].MedalImage = res.FileUrl;
        }
      });
    },
  },
};
</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%;
}
.publishAlist .avatar-uploader {
  margin: 0 10px 10px;
}
.publishAlist .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.publishAlist .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>