<template>
  <div class="listRegistration">
    <div class="head-title">
      <span @click="CommonJump('billboardList')" class="blue point"
        >榜单管理</span
      >
      / 报名列表
      <div style="float: right">
        <!-- <el-button style="float:right;margin-top: -5px;" size="small" type="primary"
          @click="CommonJump('addbillboard')">导出
        </el-button> -->
      </div>
    </div>
    <div class="content">
      <div>
        <span style="margin-left: 10px">用户</span>
        <el-select
          size="small"
          v-model="msg.UserId"
          :filter-method="ChangeListName"
          filterable
          @change="(msg.pageIndex = 1), getList()"
          placeholder="请选择"
        >
          <el-option label="不限" :value="0"></el-option>
          <el-option
            v-for="item in userList"
            :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.ObjectType"
          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.CandidateState"
          filterable
          @change="(msg.pageIndex = 1), getList()"
          placeholder="请选择"
        >
          <el-option label="不限" :value="0"></el-option>
          <el-option label="未评比" :value="1"></el-option>
          <el-option label="候选" :value="2"></el-option>
          <el-option label="淘汰" :value="3"></el-option>
        </el-select>
      </div>

      <el-table
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%; margin: 20px 0"
      >
        <el-table-column prop="CompanyName" label="报名企业"> </el-table-column>
        <el-table-column prop="UserName" label="参与对象">
          <template slot-scope="scope">
            <div
              class="app-image"
              :style="{
                backgroundImage: 'url(' + scope.row.ObjectIcon + ')',
                backgroundSize: 'cover',
              }"
            ></div>
            <div flex="dir:left cross:center">
              {{ scope.row.ObjectName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="UserName" label="奖章">
          <template slot-scope="scope">
            <div
              class="app-image"
              :style="{
                backgroundImage: 'url(' + scope.row.MedalImage + ')',
                backgroundSize: 'cover',
              }"
            ></div>
          </template>
        </el-table-column>
        <el-table-column prop="Reviews" label="评语"> </el-table-column>

        <!-- <el-table-column prop="UserName" label="关联图片/视频">
                    <template slot-scope="scope">
                        <div class="app-image"
                            :style="{backgroundImage:'url(' + scope.row.images[0] + ')',backgroundSize:'cover'}">
                        </div>
                        <div flex="dir:left cross:center" @click="joinData = scope.row,dialogTableVisible=true"
                            style="margin-top:14px;cursor: pointer;color: blue;">
                            查看更多
                        </div>
                    </template>
                </el-table-column> -->
        <el-table-column prop="Mobile" label="联系电话"> </el-table-column>

        <el-table-column prop="Status" label="状态" width="140">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.CandidateState==1">报名中</span>
            <span v-if="scope.row.CandidateState==2">候选</span>
            <span v-if="scope.row.CandidateState==3">淘汰</span> -->

            <span v-if="scope.row.RankListState == 1"
              >上榜（第{{ scope.row.Rank }}名）</span
            >
            <span v-else-if="scope.row.CandidateState == 2">候选</span>
            <span v-else-if="scope.row.CandidateState == 3">淘汰</span>
            <span v-else>未评比</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="详情"
              placement="top"
            >
              <img
                src="../../assets/img/userman/icon-show.png"
                alt=""
                class="imgstyle"
                @click="seeDetail(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="淘汰"
              placement="top"
              v-if="scope.row.CandidateState == 1 && listStatus !== 3"
            >
              <img
                src="../../assets/img/userman/nopass.png"
                alt=""
                class="imgstyle"
                @click="eliminate(scope.row)"
              />
              v-if="scope.row.CandidateState==1" @click="eliminate(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="候选"
              placement="top"
              v-if="scope.row.CandidateState == 1 && listStatus !== 3"
            >
              <img
                src="../../assets/img/userman/pass.png"
                alt=""
                class="imgstyle"
                @click="candidate(scope.row)"
              />
              v-if="scope.row.CandidateState==1" @click="candidate(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="重置"
              placement="top"
              v-if="
                (scope.row.CandidateState == 3 ||
                  scope.row.CandidateState == 2) &&
                listStatus !== 3
              "
            >
              <img
                src="../../assets/img/userman/reset.png"
                alt=""
                class="imgstyle"
                v-if="
                  scope.row.CandidateState == 3 || scope.row.CandidateState == 2
                "
                @click="delete_b(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right"
        background
        @current-change="handleCurrentChange"
        :page-size="msg.pageSize"
        :current-page.sync="msg.pageIndex"
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="关联图片/视频" :visible.sync="dialogTableVisible">
      <div style="display: flex; flex-wrap: wrap" v-if="joinData">
        <div v-for="(x, y) in joinData.images" :key="y">
          <el-image
            style="
              width: 100px;
              height: 100px;
              margin-right: 10px;
              margin-bottom: 10px;
            "
            :src="x"
            :preview-src-list="joinData.images"
          >
          </el-image>
        </div>
      </div>
      <div v-if="joinData" style="margin-top: 15px">
        <video
          width="320"
          height="240"
          controls="controls"
          v-if="joinData.video != ''"
        >
          <source :src="joinData.video" type="video/mp4" />
          <source :src="joinData.video" type="video/ogg" />
        </video>
      </div>
    </el-dialog>
    <el-dialog title="报名详情" :visible.sync="detailDialog" width="800px">
      <div style="padding: 20px" v-if="seeData">
        <el-form label-width="150px">
          <div v-for="(x, y) in seeData" :key="y">
            <div
              v-if="
                x.CompKey == 'ImageUploadComp' && x.CompData.FileList.length > 0
              "
            >
              <el-form-item :label="x.CompData.Name + '：'">
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in x.CompData.FileList"
                    :key="index"
                    style="margin-right: 10px; margin-bottom: 10px"
                  >
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="item"
                      :preview-src-list="x.CompData.FileList"
                    >
                    </el-image>
                  </div>
                </div>
              </el-form-item>
            </div>
            <div
              v-if="
                x.CompKey == 'VideoUploadComp' && x.CompData.FileList.length > 0
              "
            >
              <el-form-item :label="x.CompData.Name + '：'">
                <div
                  v-for="(item, index) in x.CompData.FileList"
                  :key="index"
                  style="margin-bottom: 10px"
                >
                  <video width="260" height="180" controls="controls">
                    <source :src="item" type="video/ogg" />
                    <source :src="item" type="video/mp4" />
                    <source :src="item" type="video/webm" />
                  </video>
                </div>
              </el-form-item>
            </div>
            <div
              v-if="
                (x.CompKey == 'SingleLineText' ||
                  x.CompKey == 'MultiLineText') &&
                x.CompData.TextValue != ''
              "
            >
              <el-form-item :label="x.CompData.Name + '：'">
                <span>{{ x.CompData.TextValue }}</span>
              </el-form-item>
            </div>
            <div
              v-if="x.CompKey == 'DorpDownList' && x.CompData.OptionValue != ''"
            >
              <el-form-item :label="x.CompData.Name + '：'">
                <span>{{ getOptionValue(x.CompData) }}</span>
              </el-form-item>
            </div>
            <div
              v-if="
                x.CompKey == 'CommonUploadComp' &&
                x.CompData.FileList.length > 0
              "
            >
              <el-form-item :label="x.CompData.Name + '：'">
                <div
                  v-for="(item, index) in x.CompData.FileListName"
                  :key="index"
                  style="margin-bottom: 2px; cursor: pointer"
                  @click="showUpLoadFile(item, x.CompData.FileList[index])"
                >
                  {{ index + 1 }}、{{ item }}
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialog = false">取 消</el-button>
        <el-button type="primary" @click="detailDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      dialogTableVisible: false,
      msg: {
        pageIndex: 1,
        pageSize: 15,
        ListId: 0, //
        UserId: 0, //	用户
        ObjectType: 0,
        CandidateState: 0, //1报名中 2候选 3淘汰
      },
      total: 0,
      tableData: [], //数据列表
      joinData: null,
      userList: [],
      usermsg: {
        pageIndex: 1,
        pageSize: 20,
        Name: "",
        Source: 0,
        MemberGrade: 0,
        Id: 0,
        Moblie: "",
      },
      ListObjectType: [],
      listStatus: -1,
      detailDialog: false, //详情
      seeData: null,
    };
  },
  created() {
    if (this.$route.query.Id) {
      this.msg.ListId = this.$route.query.Id;
      this.getList();
    }
    if (this.$route.query.status) {
      this.listStatus = this.$route.query.status;
    }
    this.getuserList();
    this.getListObject(); //面向群体 枚举

    // this.getList();
  },
  methods: {
    getListObject() {
      this.apipost("/api/Trade/GetListObjectTypeEnumList", {}, (res) => {
        if (res.data.resultCode == 1) {
          this.ListObjectType = res.data.data;
        }
      });
    },
    ChangeListName(val) {
      this.usermsg.Name = val;
      this.getuserList();
    },
    getuserList() {
      this.apipost(
        "/api/user/GetMemberUserDropDownList",
        this.usermsg,
        (res) => {
          if (res.data.resultCode == 1) {
            let pageData = res.data.data.pageData;
            this.userList = pageData;
          }
        }
      );
    },
    getList() {
      this.loading = true;

      this.apipost("/api/Trade/GetFirstShopEnrollPageList", 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();
    },
    eliminate(row) {
      //淘汰对象
      let that = this;
      that
        .$confirm("你确定要将改对象淘汰吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.setFirstShop(row.Id, 1);
        })
        .catch(() => {});
    },
    setFirstShop(id, type) {
      let that = this;
      that.apipost(
        "/api/Trade/SetFirstShopEnrollState",
        { EnrollId: id, Type: type },
        (res) => {
          if (res.data.resultCode == 1) {
            that.Success(res.data.message);
            that.getList();
          } else {
            that.Error(res.data.message);
          }
        }
      );
    },

    candidate(row) {
      //候选对象
      let that = this;
      that
        .$confirm("你确定将该对象纳入为候选吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.setFirstShop(row.Id, 2);
        })
        .catch(() => {});
    },
    delete_b(row) {
      let that = this;
      that
        .$confirm("你确定重置状态?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.setFirstShop(row.Id, 3);
        })
        .catch(() => {});
    },
    EditgoUrl() {},
    seeDetail(row) {
      this.detailDialog = true;
      let data = JSON.parse(row.Content);
      this.seeData = data;
      console.log(data);
    },
    getOptionValue(row) {
      let value = row.OptionValue;
      let list = row.OptionList;
      let data = value.toString().split(",");
      let text = "";
      data.forEach((x, y) => {
        list.map((j) => {
          if (j.Id == x) {
            if (y + 1 == data.length) {
              text = text + j.Name;
            } else {
              text = text + j.Name + "、";
            }
            return;
          }
        });
      });
      return text;
    },
    showUpLoadFile(FileName, FilePath) {
      //文件显示
      // 文件类型进行判断
      if (
        FileName.substring(
          FileName.lastIndexOf(".") + 1,
          FileName.length
        ).toUpperCase() == "PDF" ||
        FileName.substring(
          FileName.lastIndexOf(".") + 1,
          FileName.length
        ).toUpperCase() == "TXT"
      ) {
        this.previewPDF(Url);
      } else {
        console.log(FilePath);
        window.open(
          "https://view.officeapps.live.com/op/view.aspx?src=" + FilePath
        );
      }
    },
  },
  mounted() {},
};
</script>
<style>
.listRegistration .content .searchInput {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

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

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

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

.listRegistration .content {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  box-sizing: border-box;
}
</style>