<template>
  <div id="userInfoS">
    <el-dialog
      :visible.sync="dialogBox"
      width="1080px"
      :show-close="false"
      :destroy-on-close="true"
      :before-close="closeBefore"
      :fullscreen="fullscreen"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">详情</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Max@2x.png"
            alt=""
            @click="fullscreen = !fullscreen"
          />
          <img src="@/assets/images/Close@2x.png" alt="" @click="closeBefore" />
        </div>
      </div>
      <el-row class="contentBox" :gutter="30">
        <el-col :span="5">
          <div>
            <div style="width: 100%; margin-bottom: 20px">
              <img
                style="width: 100%"
                :src="$methodsTools.splitImgHost(propData.avatar)"
                alt="加载失败"
              />
            </div>
            <p style="text-align: center">
              姓名：<span>{{ propData.realname }}</span>
            </p>
          </div>
        </el-col>
        <el-col :span="19">
          <table
            class="trList"
            border="1px"
            cellpadding="0"
            cellspacing="0"
            style="
              width: 100%;
              border-color: rgb(249, 250, 252);
              margin-bottom: 20px;
            "
          >
            <tr>
              <th colspan="4">基本信息</th>
            </tr>
            <tr>
              <td class="label">性别</td>
              <td class="flex">{{ propData.sex === 1 ? "男" : "女" }}</td>
              <td class="label">户口/国籍</td>
              <td class="flex">
                {{
                  propData.houseProvince +
                  propData.houseCity +
                  propData.houseDistrict
                }}
              </td>
            </tr>
            <tr>
              <td class="label">身份证</td>
              <td class="flex">{{ propData.idCard }}</td>
              <td class="label">婚姻状况</td>
              <td class="flex">{{ propData.marry === 1 ? "已婚" : "未婚" }}</td>
            </tr>
            <tr>
              <td class="label">手机号</td>
              <td class="flex">{{ propData.telphone }}</td>
              <td class="label">所在城市</td>
              <td class="flex">
                {{ propData.province + propData.city + propData.district }}
              </td>
            </tr>
            <tr>
              <td class="label">年龄</td>
              <td class="flex">
                {{ $methodsTools.computedAge(propData.userBirth) }}
              </td>
              <td class="label">注册时间</td>
              <td class="flex">
                {{ $methodsTools.onlyForma(propData.createTime) }}
              </td>
            </tr>
            <tr>
              <td class="label">邮箱</td>
              <td class="flex">{{ propData.email }}</td>
              <td class="label">出生日期</td>
              <td class="flex">{{ propData.userBirth }}</td>
            </tr>
            <tr>
              <td class="label">政治面貌</td>
              <td class="flex">{{ propData.politic }}</td>
              <td class="label"></td>
              <td class="flex"></td>
            </tr>
            <tr>
              <td class="label">学信网学籍证明</td>
              <td class="flex">
                <img
                  style="width: 100%"
                  :src="
                    $methodsTools.splitImgHost(propData.studentCertificateImg)
                  "
                  alt=""
                />
              </td>
              <td class="label">一寸照片</td>
              <td class="flex">
                <img
                  style="width: 100%"
                  :src="$methodsTools.splitImgHost(propData.oneInchPhotos)"
                  alt=""
                />
              </td>
            </tr>
            <tr>
              <td class="label">身份证人像面</td>
              <td class="flex">
                <img
                  style="width: 100%"
                  :src="$methodsTools.splitImgHost(propData.idCardImg1)"
                  alt=""
                />
              </td>
              <td class="label">身份证国徽面</td>
              <td class="flex">
                <img
                  style="width: 100%"
                  :src="$methodsTools.splitImgHost(propData.idCardImg2)"
                  alt=""
                />
              </td>
            </tr>
          </table>
          <table
            class="trList"
            border="1px"
            cellpadding="0"
            cellspacing="0"
            style="
              width: 100%;
              border-color: rgb(249, 250, 252);
              margin-bottom: 20px;
            "
          >
            <tr>
              <th colspan="4">教育信息</th>
            </tr>
            <tr>
              <td class="label">学校名称</td>
              <td class="flex">{{ education.schoolName }}</td>
              <td class="label">学位</td>
              <td class="flex">
                {{ education.academicDegree }}
              </td>
            </tr>
            <tr>
              <td class="label">全日制</td>
              <td class="flex">{{ education.fullTimeSchool }}</td>
              <td class="label">学制</td>
              <td class="flex">{{ education.educationalSystem }}</td>
            </tr>
            <tr>
              <td class="label">入学时间</td>
              <td class="flex">{{ education.admissionTime }}</td>
              <td class="label">院系</td>
              <td class="flex">
                {{ education.department }}
              </td>
            </tr>
            <tr>
              <td class="label">毕业时间</td>
              <td class="flex">{{ education.graduationTime }}</td>
              <td class="label">专业</td>
              <td class="flex">{{ education.major }}</td>
            </tr>
            <tr>
              <td class="label">学历</td>
              <td class="flex">{{ education.education }}</td>
              <td class="label">班级</td>
              <td class="flex">{{ education.grade }}</td>
            </tr>
          </table>
          <p style="margin: 20px 0px">统计信息</p>
          <table
            class="trList"
            border="1px"
            cellpadding="0"
            cellspacing="0"
            style="
              width: 100%;
              border-color: rgb(249, 250, 252);
              margin-bottom: 20px;
              text-align:center;
            "
          >
            <tr class="trLists">
              <td>消费金额</td>
              <td>订单数量</td>
              <td>折扣券</td>
              <td>优惠券</td>
              <td>等级名称</td>
              <td>经验值</td>
            </tr>
            <tr>
              <td>{{cjInfo.price}}</td>
              <td>{{cjInfo.orderNum}}</td>
              <td>{{cjInfo.couponDiscount}}</td>
              <td>{{cjInfo.coupon}}</td>
              <td>{{cjInfo.userLevel}}</td>
              <td>{{cjInfo.integral}}</td>
            </tr>
            <tr class="trLists">
              <td>学习时长</td>
              <td>课程</td>
              <td>题库</td>
              <td>收藏课程</td>
              <td>收藏题库</td>
              <td>参加活动场数</td>
            </tr>
            <tr>
              <td>{{cjInfo.studyNum}}</td>
              <td>{{cjInfo.courseNum}}</td>
              <td>{{cjInfo.bankNum}}</td>
              <td>{{cjInfo.collectBankNum}}</td>
              <td>{{cjInfo.collectCourseNum}}</td>
              <td>{{cjInfo.activityNum}}</td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeBefore">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullscreen: false,
      dialogBox: false,
      propData: {},
      education: {},
      cjInfo: {},
    };
  },
  methods: {
    async getInfos(v) {
      const waits1 = await this.$api.obtainappuser(v);
      this.propData = waits1.data;
      const waits2 = await this.$api.obtainappuserschoolinfo(v);
      this.education = waits2.data;
      const waits3 = await this.$api.orderlistUserOrder({userId: v});
      this.cjInfo = waits3.data;
      this.dialogBox = true;
    },
    closeBefore() {
      this.dialogBox = false;
    },
  },
};
</script>

<style lang="less" scoped>
.trLists {
  td {
    background-color: rgb(249, 250, 252);
    font-weight: 600;
  }
}
td {
  padding: 10px;
}
th {
  padding: 10px;
  background-color: rgb(249, 250, 252);
}
.label {
  text-align: right;
  background-color: rgb(249, 250, 252);
  width: 15%;
}
.flex {
  width: 35%;
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>