<template>
  <view class="competition-register">
    <!-- 注册步骤条 -->
    <step-register isStepOne />

    <view class="program-text">
      <view class="program-title"> 签署纲领 </view>
      <view class="program-content">
        第17届“逻辑狗杯”全国儿童思维魔法嘉年华《共同行动纲领》，在线下载-打印-签署、盖章-邮寄。
      </view>
    </view>

    <!-- 邮寄地址 -->
    <view class="express-adress">
      <view class="express-adress-header">
        <view class="express-adress-text">邮寄地址</view>
        <view class="copy-button" @click="setClipboardData">
          <image class="copy-icon" :src="staticImg.copyIcon" />
          <view class="copy-text">一键复制</view>
        </view>
      </view>
      <view class="express-adress-content">
        <view class="express-adress-content-item">
          <view class="title">收件人：</view>
          <view class="content">{{ addressInfo.recipient }}</view>
        </view>
        <view class="express-adress-content-item">
          <view class="title">联系电话：</view>
          <view class="content">{{ addressInfo.phone }}</view>
        </view>
        <view class="express-adress-content-item">
          <view class="title">收货地址：</view>
          <view class="content">{{ addressInfo.address }}</view>
        </view>
      </view>
    </view>
    <view class="customer-service" @click="handleOpenFile">
      下载《共同行动纲领》
    </view>

    <step-tabbar isStepOne submitIsShow :competitionId="competitionId" />

    <!-- 纲领弹窗 -->
    <van-overlay :show="programShow">
      <view class="wrapper">
        <view class="block">
          <image
            :src="staticImg.closeBtn"
            class="closeBtn"
            @click="handleReturnHome"
          />
          <view class="programContent">
            <view class="programTitle">
              第17届“逻辑狗杯”全国儿童思维魔法嘉年华——联办协议
            </view>
            
            <scroll-view scroll-y="true" class="programText">
              <view class="em2">为了给儿童成长提供良好的环境，打造智能+体能游戏新空间，营造教育新生态，第17届“逻辑狗杯”全国儿童思维魔法嘉年华，首创“科体融合，智体共育”的活动模式，以锻炼强健体魄，培养最强大脑，成就具有文化自信的中华宝贝为目标，唤醒孩子的好奇心，培养孩子乐群能力，团队协调能力，让孩子拥有开放热情的性格，带着想象与热爱去探究世界，成就有梦想的未来。</view>
              <view>甲方：第17届“逻辑狗杯”全国儿童思维魔法嘉年华组委会</view>
              <view>乙方：</view>
              <view class="em2"
                >本协议一经甲乙双方签署，乙方即成为甲方【第17届“逻辑狗杯”全国儿童思维魔法嘉年华】2022年5月15日至7月10日_______站（城市）承办单位，负责组织、运营在该地区的园所/专柜嘉年华，表明双方同意本协议所列全部内容。本协议签署之前双方的任何口头或书面交流及沟通与本协议不一致的，均以本协议为准。</view
              >
              <view class="em2">参与资格：</view>
              <view class="em2"
                >1、乙方须为甲方签约合作教育机构，以此联合协议为活动准则，负责当地园所/专柜与地区活动组织工作；</view
              >
              <view class="em2">2、报名选手须为甲方出品的所有产品的直接使用用户；</view>
              <view class="em2">3、当地报名选手人数须200人起。</view>
              <view class="em2">4、统一报名方式：</view>
              <view class="em2">1)	扫码进入思维芯精英俱乐部</view>
              <view class="em2">2)	进入教学俱乐部，点击“逻辑狗杯”全国儿童思维魔法嘉年华报名入口</view>
              <view class="em2">3)	点击进入第17届报名入口</view>
              <view class="em2">4)	报名第一步-签署《联办协议》下载/签署</view>
              <view class="em2">5)	报名第二步-填写地区承办信息，填写完成后点击“提交”按钮，完成报名</view>
              <view class="em2"
                >为明确甲乙双方在活动运营上的责任权利和义务关系，在自愿、平等、互利的基础上,甲乙双方本着精诚合作、共同发展的原则，特制定本协议，以期甲乙双方共同遵守：</view
              >
              <view>一、本届活动统一名称</view>
              <view class="em2">统一名称：</view>
              <view class="em2">第17届“逻辑狗杯”全国儿童思维魔法嘉年华</view>
              <view class="em2">地区名称：</view>
              <view class="em2">第17届“逻辑狗杯”全国儿童思维魔法嘉年华——站（城市）</view>
              <view>二、活动组织</view>
              <view class="em2">1、本次活动由北京中德智慧教育文化有限公司全程支持，北京思维魔法教育科技有限公司全程提供技术支持与服务。</view>
              <view class="em2">2、全国各地签约合作教育机构</view>
              <view>三、双方权利与义务</view>
              <view class="em2">（一）甲方的权利与义务</view>
              <view class="em2">1、甲方拥有与活动相关的一切权利，并有权通过合法程序将其中的部分或全部权利授权给其他单位、团体或个人；</view>
              <view class="em2">2、甲方负责活动整体方案的制定和活动的监督、管理与指导；</view>
              <view class="em2">3、甲方拥有对活动合作单位与所承办活动有关一切活动的管理监督权；</view>
              <view class="em2">4、甲方可根据实际情况决定活动项目设置，制定活动奖励形式；</view>
              <view class="em2">5、甲方负责活动组织物料的设计、制作和各授权地区的活动物料配发；</view>
              <view class="em2">6、甲方负责全国嘉年华的组织和承办；</view>
              <view class="em2">7、甲方负责活动商业宣传、推广，有义务通过商业活动、公益活动、广告宣传提高活动的知名度和美誉度，维护活动品牌形象；</view>
              <view class="em2">8、甲方拥有第17届“逻辑狗杯”全国儿童思维魔法嘉年华的最终解释权。</view>
              <view class="em2">（二）乙方的权利与义务</view>
              <view class="em2">1、乙方积极推动3~7岁儿童广泛参与并有规模地组织开展本届活动，全力传播国际化思维教育科学理念及其教育内容；</view>
              <view class="em2">2、乙方自行负责当地活动的宣传、组织、实施、活动安全等，并对当地的活动结果负责，有义务告知参与家庭注意事项及其所承担的责任；</view>
              <view class="em2">3、参加全国嘉年华，乙方须派领队一名带队参加全国嘉年华活动，参加全国嘉年华地区选手及陪同家长的一应事宜，由领队负责管理，同时，选手家长负责参与活动人员及家长在途和全国嘉年华现场之外的一切安全问题；</view>
              <view class="em2">4、乙方地区嘉年华于2022年5月15日—7月10日举行，活动结束后向组织单位提交详细的活动工作成果物（文字、照片及视频）用于本次活动宣传与推广，须将活动结果在三日内告知甲方；乙方派出各年龄组晋级选手1名参加2022年7月底举行的全国嘉年华及相关活动；</view>
              <view class="em2">5、乙方参与选手须在甲方提供的全国统一报名通道进行线上登记报名，获得官方认可的唯一选手识别码，并凭此识别码参加园所/专柜嘉年华、地区嘉年华和全国嘉年华；</view>
              <view class="em2">6、乙方组织的园所/专柜嘉年华和地区嘉年华须按照甲方制定的活动方案进行，具体活动规则要求请查阅附件。如有特殊情况需调整活动规则须以书面形式向甲方呈报，经甲方审议通过后方可执行；</view>
              <view class="em2">7、乙方决选出参加全国嘉年华活动的选手，须提供符合参加活动岁段的身份证明，同时出具该选手在地区嘉年华中最终晋级的公示证明材料，如晋级选手主动放弃参加全国嘉年华资格，则须该选手监护人出具书面证明表示弃权；</view>
              <view class="em2">8、各城市站的活动费用由乙方负责。全国嘉年华收取相应活动物料费用（包含每位选手的活动费和一名监护人的会务费），由甲方统一提供的唯一指定报名入口缴纳；</view>
              <view class="em2">9、乙方征集的活动各级赞助商企业及品牌不得与组织单位赞助商相冲突，征集前须将潜在赞助商名称和赞助意向书面报组织单位批准，获得组织单位批准后方可与赞助商签订赞助协议；</view>
              <view class="em2">10、在本届嘉年华整体活动中，如乙方未与甲方沟通擅自改动本协议中的相关规定，则甲方有权取消本年度乙方呈报选手活动资格并取消下一年度乙方在所在地区承办活动的权利；</view>
              <view class="em2">11、疫情当前，乙方须严格遵守当地防疫防控相关政策，如乙方自行违背政策，乙方须全权承担相应法律后果。</view>
              <view>四、双方承诺</view>
              <view class="em2">本着公平、公正、公开原则，保证全国嘉年华的透明性与公正性，给每个孩子一个平等的挑战自我的机会。</view>
              <view>五、协议的变更与解除</view>
              <view class="em2">甲、乙双方经友好协商达成一致，如需变更须征得双方同意，如协商不成，可向北京市朝阳区人民法院法院提起诉讼。</view>
              <view>六、协议生效、终止及续约</view>
              <view
                >本协议须甲乙双方签字及加盖公章后，即具法律效力，双方约定本协议有效期为2022年5月1日起-7月31日止。</view
              >
              <view>本协议一式二份，双方各执一份，均具有同等法律效力，本协议未尽事宜可另订附件，附件与本协议具有同等法律效力。</view>
              <view>第17届“逻辑狗杯”全国儿童思维魔法嘉年华组委会</view>
              <view>甲方：</view>
              <view>乙方：</view>
              <view>2022年____月____日</view>
            </scroll-view>
            <view class="programCondition">
              <image
                class="programConditionBtn"
                :src="agreeOrNot ? staticImg.selectBtn : staticImg.noSelectBtn"
                @click.stop="handleChangeAgreeImg"
              />
              <view class="programConditionContent">
                我已阅读第17届“逻辑狗杯”全国儿童思维魔法嘉年华
                <view>《共同行动纲领》</view>
              </view>
            </view>
            <view
              :class="['agreeAndGoBtn', agreeOrNot ? '' : 'op3']"
              @click.stop="handleAgree"
            >
              同意并继续
            </view>
          </view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
import { getAgentProgramAddress } from "@/api/competition.js";
import Tip from "@/utils/tip.js";
import StepRegister from "./component/step-register.vue";
import StepTabbar from "./component/step-tabbar.vue";
const staticImg = {
  closeBtn: require("@/static/competitionRegister/common/closeBtn.png"),
  copyIcon: require("@/static/competitionRegister/index/copy-button.png"),
  selectBtn: require("@/static/competitionRegister/index/selectBtn.png"),
  noSelectBtn: require("@/static/competitionRegister/index/noSelectBtn.png"),
};

export default {
  name: "competition-register",
  components: {
    StepRegister,
    StepTabbar,
  },
  data() {
    return {
      // 这个信息是从接口获取的
      addressInfo: {},
      staticImg,
      competitionId: "",
      programShow: true,
      agreeOrNot: false,
    };
  },
  onLoad(options) {
    this.competitionId = options.competitionId;
    this.getAgentProgramAddress();
    uni.removeStorage({
      key: "formData",
      success: function (res) {
        console.log("已经移除内存中的schoolList");
      },
    });
  },
  methods: {
    handleChangeAgreeImg() {
      this.agreeOrNot = !this.agreeOrNot;
    },
    // 同意并继续
    handleAgree() {
      if (!this.agreeOrNot) return;
      this.programShow = false;
    },
    // 返回首页
    handleReturnHome() {
      uni.reLaunch({
        url: "/pages/user/index",
      });
      this.programShow = false;
    },
    // 打开纲领文件
    handleOpenFile() {
      uni.downloadFile({
        url: this.addressInfo.program,
        success: function (res) {
          const filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log("打开文档成功");
            },
          });
        },
      });
    },
    // 获取纲领地址
    async getAgentProgramAddress() {
      const { data, msg, status } = await getAgentProgramAddress();
      if (status == 200) {
        this.addressInfo = data;
      } else {
        Tip.error(msg);
      }
    },
    // 打开逻辑狗商城小程序
    handlePickUp() {
      uni.navigateToMiniProgram({
        appId: "wx01e79cb36b9436ee",
        path: "pages/contact/index",
        extraData: {},
        success(res) {
          // 打开成功
          console.log(res, "成功");
        },
      });
    },
    // 复制内容到剪切板
    setClipboardData() {
      const address = `邮寄地址：收件人：${this.addressInfo.recipient}，联系电话：${this.addressInfo.phone}，收货地址：${this.addressInfo.address}。`;
      uni.setClipboardData({
        data: address,
        success: function () {
          // Tip.success("复制成功！");
          console.log("复制成功！");
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.competition-register {
  width: 100vw;
  height: 100vh;
  background-color: rgb(251, 252, 254);
  .program-text {
    margin-top: 60rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    .program-title {
      font-size: 44rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .program-content {
      width: 686rpx;
      height: 144rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-top: 40rpx;
      line-height: 48rpx;
    }
  }

  .express-adress {
    width: 686rpx;
    height: 450rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
    border-radius: 20rpx;
    margin: 0 auto;
    margin-top: 36rpx;
    padding: 36rpx 30rpx 40rpx 30rpx;
    box-sizing: border-box;
    .express-adress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .express-adress-text {
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .copy-button {
        display: flex;
        align-items: center;
        .copy-icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 10rpx;
        }
        .copy-text {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4c75ff;
        }
      }
    }
    .express-adress-content {
      margin-top: 32rpx;
      .express-adress-content-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24rpx;
        .title {
          width: 150rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
        .content {
          width: 476rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 50rpx;
        }
      }
    }
  }

  .customer-service {
    margin: 0 auto;
    margin-top: 64rpx;
    width: 586rpx;
    height: 88rpx;
    background: #638afd;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.block {
  position: relative;
  background: #ffffff;
  border-radius: 20rpx;
  .closeBtn {
    position: absolute;
    top: 40rpx;
    right: 40rpx;
    z-index: 999;
    width: 24rpx;
    height: 24rpx;
    object-fit: cover;
  }
  .programContent {
    width: 686rpx;
    // height: 1154rpx;
    background: #ffffff;
    border-radius: 24rpx;
    box-sizing: border-box;
    .programTitle {
      margin: 74rpx auto 0;
      width: 614rpx;
      font-size: 38rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 550;
      color: #333333;
      line-height: 52rpx;
      text-align: center;
    }
    .programText {
      margin: 26rpx auto 32rpx;
      width: 590rpx;
      height: 672rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #181818;
      line-height: 48rpx;
    }
    .programCondition {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 590rpx;
      .programConditionBtn {
        width: 32rpx;
        height: 32rpx;
        object-fit: cover;
      }
      .programConditionContent {
        width: 542rpx;
        height: 68rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 34rpx;
        text-align: center;
        view {
          display: inline;
          color: #547ffc;
        }
      }
    }
    .agreeAndGoBtn {
      margin: 34rpx auto 56rpx;
      width: 282rpx;
      height: 76rpx;
      line-height: 76rpx;
      background: linear-gradient(130deg, #466efc 0%, #84bdfc 100%);
      border-radius: 42rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
    }
    .op3 {
      opacity: 0.3;
    }
    
  }

  .em2 {
    text-indent: 2em;
  }
}
</style>  