<template>
  <div class="billboardList">
    <div class="head-title">
      榜单管理
      <div style="float: right; margin-top: 5px">
        <el-button style="float: right; margin-top: -5px" size="small" type="primary"
          @click="CommonJump('addbillboard')">新增
        </el-button>
        <el-button style="float: right; margin-top: -5px; margin-right: 10px" size="small" type="primary"
          :disabled="multipleSelection.length === 0" @click="downloadMultipleExcel">批量下载榜单报名
        </el-button>
        <el-button style="float: right; margin-top: -5px; margin-right: 10px" size="small" type="primary"
          :disabled="multipleSelection.length === 0" @click="getDownloadMultiplefujianTag" :loading="fujianLoading"
          v-if="!showfujianbtn">{{ fujianText }}
        </el-button>
        <el-button style="float: right; margin-top: -5px; margin-right: 10px" size="small" type="primary"
          @click="downloadFujian" v-if="showfujianbtn">下载附件
        </el-button>
      </div>
    </div>
    <div class="content">
      <div>
        <span style="margin-left: 10px">主办方</span>
        <div class="searchInput" style="width: 250px">
          <el-input @keyup.enter.native="(msg.pageIndex = 1), getList()" @clear="(msg.pageIndex = 1), getList()"
            style="display: inline-block; width: 225px; height: 30px" placeholder="主办方" v-model="msg.Sponsor"
            size="small" clearable>
          </el-input>
          <span @click="(msg.pageIndex = 1), getList()" class="el-icon-search" style="
              color: #979dad;
              font-size: 14px;
              position: relative;
              top: 1px;
            "></span>
        </div>
        <span style="margin-left: 10px">榜单名称</span>
        <div class="searchInput" style="width: 250px">
          <el-input @keyup.enter.native="(msg.pageIndex = 1), getList()" @clear="(msg.pageIndex = 1), getList()"
            style="display: inline-block; width: 225px; height: 30px" placeholder="榜单名称" v-model="msg.ListName"
            size="small" clearable>
          </el-input>
          <span @click="(msg.pageIndex = 1), getList()" class="el-icon-search" style="
              color: #979dad;
              font-size: 14px;
              position: relative;
              top: 1px;
            "></span>
        </div>
        <span style="margin-left: 10px">榜单类型</span>
        <el-select size="small" v-model="msg.ListType" filterable @change="(msg.pageIndex = 1), getList()"
          placeholder="请选择">
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in ListType" :key="item.Id" :label="item.Name" :value="item.Id">
          </el-option>
        </el-select>
        <span style="margin-left: 10px">面向群体</span>
        <el-select size="small" v-model="msg.ObjectTypeId" filterable @change="(msg.pageIndex = 1), getList()"
          placeholder="请选择">
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in ListObjectType" :key="item.Id" :label="item.Name" :value="item.Id">
          </el-option>
        </el-select>
        <span style="margin-left: 10px">榜单状态</span>
        <el-select size="small" v-model="msg.ListState" filterable @change="(msg.pageIndex = 1), getList()"
          placeholder="请选择">
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in ListState" :key="item.Id" :label="item.Name" :value="item.Id">
          </el-option>
        </el-select>
      </div>

      <el-table :data="tableData" v-loading="loading" border style="width: 100%; margin: 20px 0"
        @selection-change="handleSelectionChange">
        >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="UserName" label="榜单信息" width="200">
          <template slot-scope="scope">
            <el-image class="app-image" :src="scope.row.CoverImage" :preview-src-list="[scope.row.CoverImage]">
            </el-image>
            <div flex="dir:left cross:center">
              {{ scope.row.ListName }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="Sponsor" label="主办方"> </el-table-column>
        <el-table-column prop="ListTypeName" label="榜单类型">
        </el-table-column>
        <el-table-column prop="ObjectTypeList" label="面向群体">
          <template slot-scope="scope">
            <span v-for="(x, y) in scope.row.ObjectTypeList">{{ x
              }}{{ scope.row.ObjectTypeList.length - 1 == y ? "" : "、" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="DeadlineDate" label="报名时间">
          <template slot-scope="scope">
            <div>开始:{{ scope.row.StartDate }}</div>
            <div>结束:{{ scope.row.EndDate }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="FinishDate" label="公示日期"> </el-table-column>
        <el-table-column prop="EnableRank" label="是否启用排名">
          <template slot-scope="scope">
            <span v-if="scope.row.EnableRank == 1" style="color: green">启用</span>
            <span v-else style="color: #e95252">不启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="ListStateName" label="状态"> </el-table-column>

        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <div style="height: 32px; display: flex; align-items: center">
              <el-tooltip class="item" effect="dark" content="报名列表" placement="top" style="margin: 0 5px">
                <img src="../../assets/img/userman/baoming.png" alt="" class="imgstyle" @click="getItem(scope.row)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="编辑" placement="top" style="margin: 0 5px" v-if="
                  scope.row.ListState == 5 ||
                  scope.row.ListState == 1 ||
                  scope.row.ListState === 4
                ">
                <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="EditgoUrl(scope.row)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top" style="margin: 0 5px"
                v-if="scope.row.ListState === 5 || scope.row.ListState === 4">
                <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="放榜" placement="top" style="margin: 0 5px"
                v-if="scope.row.ListState === 2">
                <img src="../../assets/img/userman/bangdan1.png" alt="" class="imgstyle" @click="fangbang(scope.row)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="放榜详情" placement="top" style="margin: 0 5px"
                v-if="scope.row.ListState === 3">
                <img src="../../assets/img/userman/bangdan2.png" alt="" class="imgstyle"
                  @click="fangbangDetail(scope.row)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="下载榜单报名" placement="top" style="margin: 0 5px">
                <img src="../../assets/img/userman/status_1_active.png" alt="" class="imgstyle"
                  @click="downloadSingerExcel(scope.row)" />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right" background :current-page.sync="msg.pageIndex"
        @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[15, 30, 45, 60, 75, 90]"
        :page-size="msg.pageSize" layout="sizes,total,prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- 报名人数的展示 -->
    <el-dialog title="报名信息" :visible.sync="dialogTableVisible">
      <el-table :data="joinData">
        <el-table-column property="LinkMan" label="联系人" width="150"></el-table-column>
        <el-table-column property="LinkTel" label="联系电话" width="200"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        dialogTableVisible: false,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Sponsor: "", //	主办方
          ListName: "", //榜单名称
          ListType: 0, //榜单类型 枚举
          ObjectTypeId: 0, //面向群体 枚举
          ListState: 0, //榜单状态 枚举
        },
        total: 0,
        tableData: [], //数据列表
        joinData: [],
        ListType: [], //榜单类型 枚举
        ListState: [], //榜单状态 枚举
        ListObjectType: [], //面向群体 枚举
        multipleSelection: [], //多选
        fujianLoading: false,
        fujianText: "榜单附件导出",
        fujianUrl: "",
        timer: null,
        showfujianbtn: false,
      };
    },
    created() {
      let tag = localStorage.getItem("fujianTag");
      if (tag) {
        this.fujianLoading = true;
        this.fujianText = "附件准备中，请等待";
      }
      this.getListType(); //榜单类型 枚举
      this.getListState(); //榜单状态 枚举
      this.getListObject(); //面向群体 枚举
      this.getList();
    },
    methods: {
      getListType() {
        this.apipost("/api/Trade/GetListTypeEnumList", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.ListType = res.data.data;
          }
        });
      },
      getListState() {
        this.apipost("/api/Trade/GetListStateEnumList", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.ListState = res.data.data;
          }
        });
      },
      getListObject() {
        this.apipost("/api/Trade/GetListObjectTypeEnumList", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.ListObjectType = res.data.data;
          }
        });
      },
      getList() {
        this.loading = true;
        this.apipost(
          "/api/Trade/GetFirstShopPrizeListPageList",
          this.msg,
          (res) => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.total = res.data.data.count;
              let pageData = res.data.data.pageData;
              this.tableData = pageData;
            }
          }
        );
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      handleSizeChange(val) {
        this.msg.pageSize = val;
        this.getList();
      },
      delete_b(row) {
        let that = this;
        that.Confirm("是否删除?", function () {
          that.apipost(
            "/api/Trade/DelFistShopPrizeListInfo", {
              ListId: row.Id,
            },
            (res) => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            }
          );
        });
      },
      EditgoUrl(row) {
        this.$router.push({
          name: "addbillboard",
          query: {
            Id: row.Id,
            blank: "y",
          },
        });
      },
      guanlianbrand(UserId) {
        this.$router.push({
          name: "brandManagement",
          query: {
            UserId: UserId,
            blank: "y",
          },
        });
      },
      getItem(row) {
        //跳转到报名列表
        this.$router.push({
          name: "listRegistration",
          query: {
            Id: row.Id,
            status: row.ListState,
          },
        });
      },
      goadd() {
        //新增修改
        this.$router.push({
          name: "addbillboard",
        });
      },
      fangbang(row) {
        //放榜功能
        this.$router.push({
          name: "publishAlist",
          query: {
            Id: row.Id,
            PrizeNum: row.PrizeNum,
            isRank: row.EnableRank,
          },
        });
      },
      fangbangDetail(row) {
        //放榜详情
        this.$router.push({
          name: "publishAlist",
          query: {
            Id: row.Id,
            PrizeNum: row.PrizeNum,
            isRank: row.EnableRank,
            readonly: true,
          },
        });
      },
      // 导出单个excel
      downloadSingerExcel(item) {
        this.GetLocalFile(
          "/api/Trade/GetFirstShopListEnrollToExcel", {
            ListId: item.Id,
          },
          "榜单报名列表.xls"
        );
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 导出多个excel
      downloadMultipleExcel() {
        let ids = this.multipleSelection.map((e) => e.Id).toString();
        this.GetLocalFile(
          "/api/Trade/GetFirstShopMoreListEnrollToExcel", {
            ListIds: ids,
          },
          "批量下载榜单报名列表.xls"
        );
      },
      // 导出榜单附件准备
      getDownloadMultiplefujianTag() {
        let that = this;
        this.fujianLoading = true;
        let ids = this.multipleSelection.map((e) => e.Id).toString();
        this.apipost(
          "/api/Trade/GetNewFirstShopEnrollZipExport", {
            ListIds: ids,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.fujianText = "附件准备中，请等待";
              localStorage.setItem("fujianTag", res.data.data);
              that.downloadMultiplefujian(res.data.data);
              clearInterval(this.timer);
              this.timer = setInterval(() => {
                setTimeout(() => {
                  that.downloadMultiplefujian(res.data.data);
                }, 0);
              }, 10000);
              this.$bus.$emit("startLoad", this.downloadMultiplefujian);
            } else {
              this.fujianLoading = false;
              this.$message.error(res.data.message);
            }
          }
        );
      },
      // 获取附件url
      downloadMultiplefujian(tag) {
        this.apipost(
          "/api/Trade/GetFirstShopEnrollResultUrl", {
            UserFlag: tag,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              if (res.data.data) {
                this.fujianText = "附件准备完成";
                localStorage.removeItem("fujianTag");
                clearInterval(this.timer);
                localStorage.setItem("fujianUrl", res.data.data);
                this.fujianUrl = res.data.data;
                this.showfujianbtn = true;
                if (this.$route.path == "/billboardList") {
                  this.$alert("下载文件准备完成", {
                    confirmButtonText: "确定",
                    callback: (action) => {},
                  });
                } else {
                  this.$confirm("有下载文件准备完成, 前往下载?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "info",
                  }).then(() => {
                    this.$router.push("/billboardList");
                    // this.downloadFujian(this.fujianUrl);
                  });
                }
              }
            } else {
              this.$message.error(res.data.message);
            }
          }
        );
      },
      downloadFujian() {
        let url = localStorage.getItem("fujianUrl");
        let a = document.createElement("a");
        a.href = this.domainManager().DomainUrl + "/" + url;
        a.download = "榜单附件.zip";
        a.click();
        setTimeout(() => {
          this.delDownloadMultiplefujian(url);
        }, 10000);
      },
      //删除附件
      delDownloadMultiplefujian(url) {
        this.apipost(
          "/api/Trade/DelFirstShopEnrollZipExport", {
            Url: url,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              localStorage.removeItem("fujianUrl");
              this.fujianLoading = false;
              this.fujianText = "榜单附件导出";
              this.showfujianbtn = false;
            } else {
              this.$message.error(res.data.message);
            }
          }
        );
      },
    },
    mounted() {
      let url = localStorage.getItem("fujianUrl");
      if (url) {
        this.fujianLoading = true;
        this.fujianText = "附件准备完成";
        this.showfujianbtn = true;
      }
    },
  };

</script>
<style>
  .billboardList .content .searchInput {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .billboardList .app-image {
    background-position: center center;
    width: 50px;
    height: 50px;
    border-radius: 0%;
    float: left;
    margin-right: 8px;
  }

  .billboardList .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .billboardList .content .searchInput {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;
  }

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

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .imgstyle {
    width: 24px;
    height: 24px;
    object-fit: cover;
  }

</style>