<template>
  <div class="content">
    <div class="d-flex mb20">
      <div class="content-box Info">
        <div style="width: 100%; height: 150px; position: relative">
          <img
            style="
              width: calc(100% - 42px);
              height: 128px;
              margin: 0 0 0 20px;
              position: absolute;
            "
            src="@/assets/bg.png"
            alt=""
          />
          <img
            style="
              width: 105px;
              height: 105px;
              border-radius: 105px;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -52px;
            "
            :src="jcxxInfo.xdx_sczp"
            alt=""
          />
        </div>
        <div style="text-align: center; margin-top: 50px">
          <p
            style="
              font-size: 20px;
              font-family: PingFangSC, PingFangSC-Semibold;
              font-weight: 600;
            "
          >
            {{ jcxxInfo.xdx_xsxm }}
          </p>
          <p
            style="
              font-size: 14px;
              font-family: PingFang, PingFang-Bold;
              font-weight: 700;
              color: #8083a3;
              margin-bottom: 10px;
            "
          >
            学籍号：{{ jcxxInfo.xdx_xsxh }}
          </p>
        </div>
        <div>
          <ul>
            <li>性别</li>
            <li>{{ jcxxInfo.xdx_xb_option_n }}</li>
          </ul>
          <ul>
            <li>民族</li>
            <li>{{ jcxxInfo.xdx_mz }}</li>
          </ul>
          <ul>
            <li>出生年月</li>
            <li>{{ jcxxInfo.xdx_csrq }}</li>
          </ul>
          <ul>
            <li>血型</li>
            <li>{{ jcxxInfo.xdx_xx }}</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>身份证号码</li>
            <li>{{ jcxxInfo.xdx_zjhm }}</li>
          </ul>
          <ul>
            <li>户籍所在地</li>
            <li>{{ jcxxInfo.xdx_jtzz }}</li>
          </ul>
          <ul>
            <li>家庭住址</li>
            <li>{{ jcxxInfo.xdx_xxdz }}</li>
          </ul>
        </div>
      </div>
      <div class="ml20 content-box student-body-health" style="height: 709px">
        <div>
          <span>学生体质健康</span>
          <!-- <a>查看更多</a> -->
        </div>
        <div>
          <div>
            <img src="@/assets/icon-heart.png" alt="" />
            <div>
              <span>{{ tzjkInfo.xtj_jcxl }}</span>
              <span>基础心率</span>
            </div>
          </div>
          <div>
            <img src="@/assets/icon-BMI.png" alt="" />
            <div>
              <span>{{ tzjkInfo.xtj_bmi }}</span>
              <span>BMI</span>
            </div>
          </div>
          <div>
            <img src="@/assets/icon-scale.png" alt="" />
            <div>
              <span>{{ tzjkInfo.xtj_tzl }}</span>
              <span>体脂率</span>
            </div>
          </div>
          <div>
            <img src="@/assets/icon-lung.png" alt="" />
            <div>
              <span>{{ tzjkInfo.xtj_fhl }}</span>
              <span>肺活量</span>
            </div>
          </div>
        </div>
        <div>
          <span></span>
          <div>
            <div class="tzjk-info">
              <img src="@/assets/icon-vision.png" />
              <span>{{ tzjkInfo.xtj_sl }}</span>
            </div>
            <div>视力</div>
          </div>
          <div>
            <div class="tzjk-info">
              <img src="@/assets/icon-backrun.png" />
              <span>{{ tzjkInfo.xtj_wfp }}</span>
            </div>
            <div>往返跑</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-longrun.png" />
              <span>{{ tzjkInfo.xtj_nlp }}</span>
            </div>
            <div>耐力跑成绩</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-shortrun.png" />
              <span>{{ tzjkInfo.xtj_50mp }}</span>
            </div>
            <div>50米跑</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-situp.png" />
              <span>{{ tzjkInfo.xtj_1fzywqz }}</span>
            </div>
            <div>1分钟仰卧起坐</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-jump.png" />
              <span>{{ tzjkInfo.xtj_ldty }}</span>
            </div>
            <div>立定跳远</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-skip.png" />
              <span>{{ tzjkInfo.xtj_1fzts }}</span>
            </div>
            <div>1分钟跳绳</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-pullup.png" />
              <span>{{ tzjkInfo.xtj_ytxs }}</span>
            </div>
            <div>引体向上</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-sit.png" />
              <span>{{ tzjkInfo.xtj_zwtqq }}</span>
            </div>
            <div>坐位体前屈</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-ball.png" />
              <span>{{ tzjkInfo.xtj_sxq }}</span>
            </div>
            <div>实心球</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { xjk_list, xslb_list, xjk_detail, xslb_detail } from "./api";
export default {
  name: "index",
  data() {
    return {
      limit: 10,
      total: 12,
      cur_page: 1,
      keyword: "",
      jcxxInfo: {},
      tzjkInfo: {},
      firstForm: {
        grade: "",
        class: "",
      },
      xtj_id: "",
      xtj_xsxh: "",
      xdx_xsxm: "",
      xdx_xsxh: "",
    };
  },
  methods: {
    jcxxData() {
      let data = {
        xdx_xsxh: this.xtj_xsxh,
      };

      xjk_detail(data).then((res) => {
        if (res.code == 1) {
          this.jcxxInfo = res.data.one_info;
          let a = this.jcxxInfo.xdx_sczp.indexOf("|");
          this.jcxxInfo.xdx_sczp = this.jcxxInfo.xdx_sczp.substring(0, a);
          console.log(this.jcxxInfo.xdx_sczp, "xdx_sczp");
        }
      });
    },

    tzjkData() {
      let data = {
        xtj_xsxh: this.xtj_xsxh,
      };

      xslb_detail(data).then((res) => {
        if (res.code == 1) {
          this.tzjkInfo = res.data.one_info;
        }
      });
    },
  },
  mounted() {
    if (this.$route.params.xtj_xsxh != "") {
      (this.xtj_xsxh = this.$route.params.xtj_xsxh), this.tzjkData();
      this.jcxxData();
    }
  },
};
</script>

<style lang="scss" scoped>
//基本信息
.Info div:nth-child(3) {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;

  ul {
    width: calc(50% - 47px);
    height: 50px;
    border: 1px dashed #dadada;
    border-radius: 12px;
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 0px 0 0 15px;
    & :nth-child(1) {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #9a9a9a;
      margin-bottom: 5px;
    }
    &:nth-child(2) {
      font-size: 14px;
      font-family: PingFang, PingFang-Medium;
      font-weight: 500;
      color: #000000;
    }
  }
}
.Info div:nth-child(4) {
  ul {
    width: calc(100% - 57px);
    height: 50px;
    border: 1px dashed #dadada;
    border-radius: 12px;
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 0 0 0 15px;
    & :nth-child(1) {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #9a9a9a;
      margin-bottom: 5px;
    }
    &:nth-child(2) {
      font-size: 14px;
      font-family: PingFang, PingFang-Medium;
      font-weight: 500;
      color: #000000;
    }
  }
}

//体质健康
.student-body-health {
  & > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px 15px 20px;
    border-bottom: 1px solid #e4e6e8;
    & :nth-child(1) {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #171721;
    }
    & :nth-child(2) {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #265cd4;
    }
  }
  & > div:nth-child(2) {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    & > div:nth-child(1) {
      margin-left: 20px;
      border-bottom: 1px solid #5f5f5f53;
      border-right: 1px solid #5f5f5f53;
    }
    & > div:nth-child(3) {
      margin-left: 20px;
    }
    & > div:nth-child(4) {
      border-top: 1px solid #5f5f5f53;
      border-left: 1px solid #5f5f5f53;
    }

    & > div {
      padding: 45px;
      display: flex;
      width: calc(50% - 112px);
      align-items: center;
      justify-content: center;
      div {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
        & :nth-child(1) {
          display: inline-block;
          width: 100px;
          font-size: 20px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          color: #171721;
        }
        & :nth-child(2) {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #8083a3;
        }
      }
    }
  }

  & > div:nth-child(3) {
    & > span {
      height: 1px;
      display: block;
      background-color: #5f5f5f53;
      width: 90%;
      margin: 0 5%;
    }
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    & > div:nth-child(even) {
      padding-left: 35px;
      & > div:nth-child(2) {
        padding-right: 20px;
        border-right: 1px solid #5f5f5f53;
      }
    }

    & > div {
      display: flex;
      flex-direction: row;
      padding: 20px 5px;
      justify-content: space-between;
      width: calc(50% - 45px);
      align-items: center;
      & > div:nth-child(1) {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        color: #171721;
      }
      & > div:nth-child(2) {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #8083a3;
      }
    }
  }
  .tzjk-info img {
    width: 30px;
    height: 30px;
    padding-right: 10px;
  }
}
//通用
.content {
  background: #f2f6fc;
  height: 700px;
  width: 100%;
  margin: -10px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.content-box {
  width: 100%;
  background: #fff;
  border-radius: 6px;

  .title {
    box-sizing: border-box;
    width: 100%;
    font-size: 18px;
    border-bottom: 1px solid #e4e6e8;
    padding: 15px 0 15px 20px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: #171721;
  }
}
//布局
.Info {
  width: 40%;
}
.student-body-health {
  width: 60%;
}
</style>
