<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;
      },
      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 {
          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>
