<template>
  <view class="my-register">
    <view class="competiton-title">
      <image class="competiton-title-image" :src="staticImg.competitionTitle" />
    </view>

    <view class="informtion-list">
      <view class="area-information">
        <view class="informtion-title"> 地区负责人信息（承办人） </view>
        <view class="informtion-card">
          <view class="informtion-card-item">
            <view class="informtion-card-label">承办人地址</view>
            <view class="informtion-card-content">{{
              detailData.district
            }}</view>
          </view>
          <view class="informtion-card-item">
            <view class="informtion-card-label">详细地址</view>
            <view class="informtion-card-content">{{
              detailData.detailAddress
            }}</view>
          </view>
          <view class="informtion-card-item">
            <view class="informtion-card-label">承办单位</view>
            <view class="informtion-card-content">{{ detailData.unit }}</view>
          </view>
          <view class="informtion-card-item">
            <view class="informtion-card-label">承办人</view>
            <view class="informtion-card-content">{{
              detailData.unitPrincipal
            }}</view>
          </view>
        </view>
      </view>
      <view class="school-infomation" @click="handleLookAgent">
        <view class="informtion-title"> 参赛园所信息 </view>
        <view class="school-button">
          <text>参赛园所</text>
          <text>({{ detailData.totalSchool }})</text>
          <image :src="staticImg.arrow" class="arrow" />
        </view>
      </view>

      <view class="pre-matrial-package">
        <view class="informtion-title"> 预定材料包数量 </view>
        <view class="informtion-card">
          <view
            class="pre-matrial-package-item"
            v-for="item in detailData.materialList"
            :key="item.id"
          >
            <view class="pre-matrial-package-item-label">
              赛事标准物料包<text>（{{ item.materialName }}）</text>
            </view>
            <view class="pre-matrial-package-item-content"
              >{{ item.number }}套</view
            >
          </view>
        </view>
      </view>

      <view class="tabbar">
        <view class="school">
          <view class="title">合计参赛园所：</view>
          <view class="number">{{ detailData.totalSchool }}</view>
        </view>
        <view class="school">
          <view class="title">合计初赛人数预估：</view>
          <view class="number">{{ detailData.totalPerson }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAgentRegisterDetail } from "@/api/competition";
import Tip from "@/utils/tip.js";
const staticImg = {
  competitionTitle: require("@/static/competitionRegister/common/competition-title.png"),
  arrow: require("@/static/competitionRegister/common/arrow.png"),
};

export default {
  name: "my-register",
  data() {
    return {
      staticImg,
      id: "",
      detailData: {},
    };
  },
  async onLoad(options) {
    this.id = options.id;
    await this.getAgentRegisterDetail();
  },
  methods: {
    handleLookAgent() {
      uni.navigateTo({
        url: `/pages/competitionRegister/schoolInformation?id=${this.id}`,
      });
    },
    // 报名详情
    async getAgentRegisterDetail() {
      const params = {
        id: this.id,
      };
      const { data, msg, status } = await getAgentRegisterDetail(params);
      if (status === 200) {
        // console.log(data, "getAgentRegisterDetail");
        this.detailData = data;
      } else {
        Tip.error(msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.my-register {
  width: 100%;
  min-height: 100vh;
  padding: 0 32rpx;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 62rpx;
  padding-bottom: 250rpx;
  .competiton-title {
    width: 552rpx;
    height: 52rpx;
    margin-bottom: 10rpx;
    margin: 0 auto;
    .competiton-title-image {
      width: 552rpx;
      height: 52rpx;
    }
  }
  .informtion-list {
    .area-information {
    }
    .informtion-card {
      width: 686rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
      border-radius: 20rpx;
      padding: 40rpx 30rpx;
      box-sizing: border-box;
      .informtion-card-item:first-child {
        margin-top: 0;
      }
      .informtion-card-item {
        display: flex;
        justify-content: space-between;
        margin-top: 28rpx;
        .informtion-card-label {
          width: 150rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #777777;
        }
        .informtion-card-content {
          width: 424rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #353535;
        }
      }
    }

    .school-infomation {
      .school-button {
        width: 686rpx;
        height: 108rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4679ff;
        text {
          margin-right: 20rpx;
          height: 34rpx;
          line-height: 34rpx;
        }
        .arrow {
          width: 18rpx;
          height: 28rpx;
          object-fit: cover;
        }
      }
    }

    .pre-matrial-package {
      .pre-matrial-package-item:first-child {
        margin-top: 0;
      }

      .pre-matrial-package-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40rpx;
        .pre-matrial-package-item-label {
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
          text {
            font-size: 28rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #4679ff;
          }
        }
        .pre-matrial-package-item-content {
          font-size: 30rpx;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #4679ff;
        }
      }
    }

    .tabbar {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 9999;
      padding: 32rpx;
      width: 100vw;
      height: 212rpx;
      background: #ffffff;
      box-shadow: 0rpx -14rpx 20rpx 0rpx rgba(152, 152, 152, 0.05);
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      box-sizing: border-box;
      .school {
        display: flex;
        align-items: center;
        .title {
          height: 42rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 42rpx;
        }
        .number {
          height: 42rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #4e78fc;
          line-height: 42rpx;
        }
      }
    }

    .informtion-title {
      font-size: 44rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-top: 48rpx;
      margin-bottom: 40rpx;
    }
  }
}
</style>


