<style>
.signList_Table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.signTableDiv {
  width: 100%;
  min-width: 800px;
  /* overflow: hidden; */
  overflow-x: auto;
}

.signList_Table th {
  border: 1px solid #EBEEF5;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: #909399;
  padding: 0 10px;
  text-align: left;
}

.signList_Table td {
  border: 1px solid #EBEEF5;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: #606266;
  font-size: 14px;
  padding: 0 10px;
  text-align: left;
}

.signList_Table tr:hover>td {
  background-color: #F5F7FA;
}
</style>
<template>
  <div class="signList tradeactivity">
    <div class="head-title">
      活动报名列表444
    </div>
    <div class="content">
      <div>
        <el-select size="small" v-model="msg.UserId" :filter-method="ChangeListName" filterable clearable
          @change="(msg.pageIndex = 1), getList()" placeholder="用户昵称" @clear="(msg.pageIndex = 1), getList()">
          <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>
        <div class="searchInput" style="width: 250px; margin-left: 20px">
          <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.CompanyName"
            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>
        <div class="searchInput" style="width: 250px; margin-bottom: 10px">
          <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.LinkMan"
            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>
        <div style="float:right;">
          <el-button style="float:right;margin-top: -5px;" size="small" type="primary" @click="Export()">导出</el-button>
        </div>
      </div>
      <div class="signTableDiv">
        <table class="signList_Table" cellpadding="0" cellspa>
          <thead>
            <tr>
              <th>
                用户昵称
              </th>
              <th>
                认证状态
              </th>
              <th>
                认证公司
              </th>
              <th>
                认证信息
              </th>
              <th>
                公司
              </th>
              <th>
                性质
              </th>
              <th>
                联系人
              </th>
              <th>
                联系电话
              </th>
              <th>
                职务
              </th>
              <th>
                地址
              </th>
              <th>
                操作
              </th>
            </tr>
          </thead>
          <tbody v-for="(item, index) in tableData" :key="index">
            <tr v-for="(sItem, sIndex) in item.SignUserList" :key="sIndex">
              <td :rowspan="item.SignUserList.length > 1 ? item.SignUserList.length : 0" v-if='sIndex == 0'>
                {{ item.UserName }}
              </td>
              <td :rowspan="item.SignUserList.length > 1 ? item.SignUserList.length : 0" v-if='sIndex == 0'>
                {{ item.CompanyStatusStr }}
              </td>
              <td :rowspan="item.SignUserList.length > 1 ? item.SignUserList.length : 0" v-if='sIndex == 0'>
                {{ item.CompanyName }}
              </td>
              <td :rowspan="item.SignUserList.length > 1 ? item.SignUserList.length : 0" v-if='sIndex == 0'>
                {{ item.AuthName }}
              </td>
              <td>
                {{ sItem.CompanyName }}
              </td>
              <td>
                {{ sItem.Nature }}
              </td>
              <td>
                {{ sItem.LinkMan }}
              </td>
              <td>
                {{ sItem.LinkTel }}
              </td>
              <td>
                {{ sItem.Post }}
              </td>
              <td>
                {{ sItem.CountryInfo }}
              </td>
              <td>
                <el-tooltip class="item" effect="dark" content="删除" placement="top" style="cursor:pointer;">
                  <img @click="delSign(sItem)" src="../../assets/img/userman/del.png" alt="" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="详情" placement="top">
                  <img src="../../assets/img/userman/icon-show.png" alt="" class="imgstyle"
                    @click="seeDetail(sItem, item.UserName, item)" />
                </el-tooltip>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <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="detailDialog" width="800px">
      <div style="padding: 20px">
        <el-form ref="form" label-width="400px">
          <div v-if="UserName" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>用户昵称：</div>
            <div style="margin-left: 25px;">{{ UserName }}</div>
          </div>
          <div v-if="information.CompanyStatusStr" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>认证状态：</div>
            <div style="margin-left: 25px;">
              {{ information.CompanyStatusStr }}
            </div>
          </div>
          <div v-if="information.CompanyName" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>认证公司：</div>
            <div style="margin-left: 25px;">
              {{ information.CompanyName }}
            </div>
          </div>
          <div v-if="information.AuthName" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>认证信息：</div>
            <div style="margin-left: 25px;">
              {{ information.AuthName }}
            </div>
          </div>
          <div v-if="seeData.CompanyName" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>公司：</div>
            <div style="margin-left: 25px;">
              {{ seeData.CompanyName }}
            </div>
          </div>
          <div v-if="seeData.Nature" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>性质：</div>
            <div style="margin-left: 25px;">
              {{ seeData.Nature }}
            </div>
          </div>
          <div v-if="seeData.LinkMan" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>联系人：</div>
            <div style="margin-left: 25px;">
              {{ seeData.LinkMan }}
            </div>
          </div>
          <div v-if="seeData.LinkTel" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>联系电话：</div>
            <div style="margin-left: 25px;">
              {{ seeData.LinkTel }}
            </div>
          </div>
          <div v-if="seeData.Post" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>职位：</div>
            <div style="margin-left: 25px;">
              {{ seeData.Post }}
            </div>
          </div>
          <div v-if="seeData.CountryInfo" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>地址：</div>
            <div style="margin-left: 25px;">
              {{ seeData.CountryInfo }}
            </div>
          </div>
          <div v-if="seeData.Age" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>年龄：</div>
            <div style="margin-left: 25px;">{{ seeData.Age }}</div>
          </div>
          <div v-if="seeData.IdCard" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>身份证：</div>
            <div style="margin-left: 25px;">{{ seeData.IdCard }}</div>
          </div>
          <div v-if="seeData.IsInoculate != null" style="display: flex; flex-wrap: wrap;padding-bottom: 25px;
          font-size: 16px;">
            <div>是否完成新冠病毒疫苗全程接种：</div>
            <div>
              <el-checkbox-group v-model="seeData.IsInoculate" disabled>
                <el-checkbox :true-label="1">是</el-checkbox>
                <el-checkbox :true-label="0">否</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <!-- 开始 -->
          <div v-if="seeData.IsGATLJ != null" style="padding-bottom: 25px;
          font-size: 16px;">
            <div>1、活动前21天有港台地区和国外旅居史：</div>
            <div style="margin-top: 10px;">
              <el-checkbox-group v-model="seeData.IsGATLJ" disabled>
                <el-checkbox :true-label="1">是</el-checkbox>
                <el-checkbox :true-label="0">否</el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="display: flex;
            margin-top: 10px;">
              <div>备注：</div>
              <div>
                <el-input disabled type="textarea" v-model="seeData.GATLJRemark"></el-input>
              </div>
            </div>
          </div>
          <!-- 结束 -->
          <!-- 开始 -->
          <div v-if="seeData.IsZGFX != null" style="padding-bottom: 25px;
            font-size: 16px;">
            <div>2、活动前14天内有境内中高风险地区及所在县（市、区）旅居史。</div>
            <div style="margin-top: 10px;">
              <el-checkbox-group v-model="seeData.IsZGFX" disabled>
                <el-checkbox :true-label="1">是</el-checkbox>
                <el-checkbox :true-label="0">否</el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="display: flex;margin-top: 10px;
              ">
              <div>备注：</div>
              <div>
                <el-input disabled type="textarea" v-model="seeData.ZGFXRemark"></el-input>
              </div>
            </div>
          </div>
          <!-- 结束 -->
          <!-- 开始 -->
          <div v-if="seeData.IsQZJC != null" style="padding-bottom: 25px;
           font-size: 16px;">
            <div>3、活动前14天有来自新冠肺炎确诊病例、无症状感染者报告社区的发热和/或有呼吸道症状患者接触史。</div>
            <div style="margin-top: 10px;">
              <el-checkbox-group v-model="seeData.IsQZJC" disabled>
                <el-checkbox :true-label="1">是</el-checkbox>
                <el-checkbox :true-label="0">否</el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="display: flex;margin-top: 10px;
             ">
              <div>备注：</div>
              <div>
                <el-input disabled type="textarea" v-model="seeData.QZJCRemark"></el-input>
              </div>
            </div>
          </div>
          <!-- 结束 -->
          <!-- 开始 -->
          <div v-if="seeData.IsJJGLGX != null" style="padding-bottom: 25px;
           font-size: 16px;">
            <div>4、活动前14天有居家隔离医学观察人员接触史。</div>
            <div style="margin-top: 10px;">
              <el-checkbox-group v-model="seeData.IsJJGLGX" disabled>
                <el-checkbox :true-label="1">是</el-checkbox>
                <el-checkbox :true-label="0">否</el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="display: flex;margin-top: 10px;
             ">
              <div>备注：</div>
              <div>
                <el-input disabled type="textarea" v-model="seeData.JJGLGXRemark"></el-input>
              </div>
            </div>
          </div>
          <!-- 结束 -->
          <!-- 开始 -->
          <div v-if="seeData.IsZYCYJCGL != null" style="padding-bottom: 25px;
           font-size: 16px;">
            <div>5、已治愈出院的确诊病例和已解除集中隔离医学观察的无症状感染者，尚在随访或医学观察期内。</div>
            <div style="margin-top: 10px;">
              <el-checkbox-group v-model="seeData.IsZYCYJCGL" disabled>
                <el-checkbox :true-label="1">是</el-checkbox>
                <el-checkbox :true-label="0">否</el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="display: flex;margin-top: 10px;
             ">
              <div>备注：</div>
              <div>
                <el-input disabled type="textarea" v-model="seeData.ZYCYJCGLRemark"></el-input>
              </div>
            </div>
          </div>
          <!-- 结束 -->
          <!-- 开始 -->
          <div v-if="seeData.IsMJ != null" style="padding-bottom: 25px;
           font-size: 16px;">
            <div>6、被判定为新冠肺炎病毒感染者（确诊病例或无症状感染者）的密切接触者和密接的密接。</div>
            <div style="margin-top: 10px;">
              <el-checkbox-group v-model="seeData.IsMJ" disabled>
                <el-checkbox :true-label="1">是</el-checkbox>
                <el-checkbox :true-label="0">否</el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="display: flex;margin-top: 10px;
             ">
              <div>备注：</div>
              <div>
                <el-input disabled type="textarea" v-model="seeData.MJRemark"></el-input>
              </div>
            </div>
          </div>
          <!-- 结束 -->
          <div v-if="seeData.IsFRGK != null" style="padding-bottom: 25px;
           font-size: 16px;">
            <div>7、有发热、干咳、乏力、咽痛、嗅（味）觉减退、腹泻等症状，且未排除传染病感染者</div>
            <div style="margin-top: 10px;">
              <el-checkbox-group v-model="seeData.IsFRGK" disabled>
                <el-checkbox :true-label="1">是</el-checkbox>
                <el-checkbox :true-label="0">否</el-checkbox>
              </el-checkbox-group>
            </div>
            <div style="display: flex;margin-top: 10px;
            ">
              <div>备注：</div>
              <div>
                <el-input disabled type="textarea" v-model="seeData.FRGKRemark"></el-input>
              </div>
            </div>
          </div>
          <!-- 结束 -->
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      checkList: [],
      seeData: {},
      UserName: '',
      information: {},
      detailDialog: false, //详情
      msg: {
        pageIndex: 1,
        pageSize: 10,
        ActivityId: 0,
        LinkMan: '', //联系人
        CompanyName: '', //公司
        UserId: '' //用户昵称
      },
      usermsg: {
        pageIndex: 1,
        pageSize: 20,
        Name: '',
        Source: 0,
        MemberGrade: 0,
        Id: 0,
        Moblie: ''
      },
      tableData: [],
      userList: [],
      total: 0,
    };
  },
  created() { },
  mounted() {
    if (this.$route.query.Id) {
      this.msg.ActivityId = this.$route.query.Id;
    }
    this.getList();
    this.getuserList();
  },
  methods: {
    // 详情
    seeDetail(row, UserName, item) {
      this.detailDialog = true;
      this.seeData = row;
      this.UserName = UserName
      this.information = item
    },
    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/GetConsultStaticPage", this.msg, res => {
        this.loading = false;
        if (res.data.resultCode == 1) {
          this.tableData = res.data.data.pageData;
          this.total = res.data.data.count;
        }
      })
    },
    //导出
    Export() {
      this.GetLocalFile(
        "/api/Trade/DownLoadConsultStaticNew", this.msg,
        "活动报名.xls"
      );
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    //删除报名
    delSign(item) {
      let that = this;
      that.Confirm("是否删除此报名人员?", function () {
        that.apipost(
          "/api/AppletTrade/DeleteTrdceConsult", {
          Id: item.Id,
        },
          (res) => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getList();
            } else {
              that.Error(res.data.message);
            }
          }
        );
      });
    }
  }
};

</script>
<style>
.signTable {
  border-collapse: collapse;
}

.signTable tr td {
  border: 1px solid grey;
}

.signList .remark_name {
  color: #888888;
  font-size: 12px;
  margin-left: 10px;
  float: right;
}

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

.signList .blue {
  color: #409EFF;

}

.signList .content .searchInput {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
}

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

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

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

.tradeactivity .el-form-item__content {
  line-height: 0;
}
</style>