<template>
  <div class="container">
    <div class="top-box">
      <img src="../../assets/bg_top.jpg" class="top-img" alt="" />
      <div class="card">
        <div class="info">
          <div class="title">{{ recordInfo.examinationName }}</div>
          <div class="address">
            <div class="text">
              南京市{{ recordInfo.district }}
              {{ recordInfo.examinationAddress }}
            </div>
          </div>
        </div>

        <div class="person-list">
          <div class="person" @click="call(recordInfo.examOwnerPhone)">
            <div class="name">考点负责人名称</div>
            <div class="content">
              <div class="text1">{{ recordInfo.examOwner }}</div>
              <div class="text1">{{ recordInfo.examOwnerPhone }}</div>
              <img src="../../assets/icon_dianhua.svg" alt="" />
            </div>
          </div>
          <div class="person" @click="call(recordInfo.securityOwnerPhone)">
            <div class="name">安全负责人名称</div>
            <div class="content">
              <div class="text1">{{ recordInfo.securityOwner }}</div>
              <div class="text1">{{ recordInfo.securityOwnerPhone }}</div>
              <img src="../../assets/icon_dianhua.svg" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <img
          class="icon left-icon"
          src="../../assets/icon_lianjie.svg"
          alt=""
        />
        <img
          class="icon right-icon"
          src="../../assets/icon_lianjie.svg"
          alt=""
        />
        <div class="card-info">
          <div class="name">
            考级活动时间
          </div>
          <div class="time">
            {{ recordInfo.examinationStartTime }}——{{
              recordInfo.examinationEndTime
            }}
          </div>
        </div>
        <div class="card-list">
          <div class="card-info">
            <div class="name">
              考场数量
            </div>
            <div class="text">{{ recordInfo.examCenterQuantity }}场</div>
          </div>
          <div class="card-info">
            <div class="name">
              考官数量
            </div>
            <div class="text">{{ recordInfo.examinerQuantity }}人</div>
          </div>
          <div class="card-info">
            <div class="name">
              报考人数
            </div>
            <div class="text">{{ recordInfo.examQuantity }}人</div>
          </div>
        </div>

        <div class="card-info">
          <div class="name">
            考级机构
          </div>
          <div class="text">
            {{ recordInfo.examinationAgency }}
          </div>
        </div>

        <div class="card-info">
          <div class="name">
            承办单位
          </div>
          <div class="text">
            {{ recordInfo.organizer }}
          </div>
        </div>

        <div class="card-info">
          <div class="name">
            统一社会信用代码
          </div>
          <div class="text">
            {{ recordInfo.uscc }}
          </div>
        </div>
      </div>

      <div class="card">
        <img
          class="icon left-icon"
          src="../../assets/icon_lianjie.svg"
          alt=""
        />
        <img
          class="icon right-icon"
          src="../../assets/icon_lianjie.svg"
          alt=""
        />
        <div class="card-name">
          考级专业
        </div>
        <div class="card-table">
          <div class="tr">
            <div class="th">
              专业名称
            </div>
            <div class="th">
              专业代码
            </div>
            <div class="th">
              总级数
            </div>
            <div class="th">
              考场数量
            </div>
            <div class="th">
              考官人数
            </div>
          </div>
          <div class="tr" v-for="item in recordSpecialtys" :key="item.id">
            <div class="td">{{ item.name }}</div>
            <div class="td">{{ item.code }}</div>
            <div class="td">{{ item.level }}</div>
            <div class="td">{{ item.numOfExam }}</div>
            <div class="td">{{ item.examinerQuantity }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="btn">
      <van-button
        @click="$router.go(-1)"
        round
        class="back"
        :color="$colors.text2"
        >返回</van-button
      >
      <van-button
        @click="$router.push('/recordCheck?recordId=' + recordInfo.id)"
        round
        :color="$colors.prim"
        >检索记录</van-button
      >
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "expertdetail",
  metaInfo() {
    return {
      title: "监管详情"
    };
  },
  data() {
    return {
      recordInfo: {},
      recordSpecialtys: []
    };
  },
  mounted() {
    this.getInfo(this.$route.query.id);
  },
  methods: {
    getInfo(id) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });

      this.$http
        .get("/record/get/" + id)
        .then(res => {
          this.recordInfo = res;
          return this.$http.post(
            "/recordSpecialty/all/",
            {
              query: {
                recordId: res.id
              }
            },
            { body: "json" }
          );
        })
        .then(res => {
          this.recordSpecialtys = res.content;
          this.$toast.clear();
        });
    },
    call(phone) {
      window.location.href = "tel:" + phone;
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  position: relative;
  padding-bottom: 100px;
}
.top-box {
  position: relative;
  padding: 134px 16px 16px;
  .top-img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .card {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    z-index: 1;
    .info {
      .title {
        font-size: 22px;
        font-weight: bold;
        color: #000000;
        line-height: 32px;
      }
    }
    .address {
      display: flex;
      .text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
      }
    }
    .img {
      display: flex;
      width: 16px;
      height: 16px;
      flex-direction: column;
      min-width: 24px;
      padding-left: 12px;
      font-size: 12px;
      color: #2c96ff;
      line-height: 22px;
    }
    hr {
      width: 100%;
      height: 1px;
      background: #f5f7fa;
      border: 0;
      margin: 20px 0;
    }
    .owner {
      .owner-item {
        display: flex;
        align-items: center;
        .text1 {
          font-size: 14px;
          color: #939599;
          line-height: 24px;
        }

        .text2 {
          font-size: 16px;
          color: #000000;
          line-height: 24px;
          min-width: 84px;
        }
        .text2 + .text2 {
          flex-grow: 1;
          margin-left: 5px;
        }
      }
    }
  }

  .left-icon,
  .right-icon {
    position: absolute;
    width: 10px;
    height: 54px;
    top: -30px;
  }
  .left-icon {
    left: 16px;
  }
  .right-icon {
    right: 16px;
  }
}
.person-list {
  .person {
    padding: 20px 0;
    .name {
      font-size: 15px;
      color: #00000020;
      line-height: 24px;
    }
    .content {
      display: flex;
      margin-top: 2px;
      .text1 {
        font-size: 16px;
        color: #000000;
        line-height: 24px;
        &:first-child {
          min-width: 84px;
        }
        &:nth-child(2) {
          flex-grow: 1;
        }
      }
    }
  }

  .person + .person {
    border-top: 1px solid #f5f7fa;
  }
}

.card + .card {
  margin-top: 20px;
}

.card {
  .icon {
    position: absolute;
    top: -35px;

    .left-icon {
      left: 11px;
    }

    .right-icon {
      right: 11px;
    }
  }
}
.card-list {
  display: flex;
  border-top: 1px solid #f5f7fa;
  .card-info {
    flex-grow: 1;
  }
  .card-info + .card-info {
    border-top-width: 0;
  }
}

.card-info {
  padding: 20px 0;
  .name {
    font-size: 15px;
    color: #00000020;
    line-height: 24px;
  }

  .text {
    font-size: 16px;
    color: #000000;
    line-height: 24px;
    margin-top: 2px;
  }

  .time {
    font-size: 16px;
    color: #2c96ff;
    line-height: 24px;
    margin-top: 2px;
  }
}

div + .card-info {
  border-top: 1px solid #f5f7fa;
}
.card-name {
  font-size: 16px;
  color: #000000;
  line-height: 24px;
  padding-top: 17px;
}
.card-table {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  .tr {
    flex-shrink: 0;
    background-color: #fff;
    div + div {
      border-top: 1px solid #f5f7fa;
    }

    &:last-child {
      flex-grow: 1;
    }

    &:first-child {
      position: sticky;
      left: 0;
    }
  }

  .th {
    font-size: 15px;
    color: #00000020;
    line-height: 24px;
    padding: 16px 30px 16px 0;
  }

  .td {
    font-size: 15px;
    color: #000000;
    line-height: 24px;
    padding: 16px 30px 16px 0;
  }
}

.btn {
  position: fixed;
  height: 60px;
  z-index: 20;
  background: #ffffff;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 26px;
  box-sizing: border-box;
  display: flex;
  .van-button {
    flex-grow: 1;
  }

  .back {
    max-width: 82px;
  }

  .van-button + .van-button {
    margin-left: 13px;
  }
}
</style>
