<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>甲方：第17届“逻辑狗杯”全国儿童思维魔法嘉年华组委会</view>
              <view>乙方：________________________________________</view>
              <view
                >本协议一经甲乙双方签署，乙方即成为甲方‘第17届“逻辑狗杯”全国儿童思维魔法嘉年华’2022年4月1日至7月1日_______赛区承办单位，负责组织、运营赛事在该地区的园所海选赛，表明双方同意本协议所列全部内容。本协议签署之前双方的任何口头或书面交流及沟通与本协议不一致的，均以本协议为准。</view
              >
              <view>参赛资格：</view>
              <view
                >1、乙方须为甲方签约合作教育机构，以此共同行动纲领为赛事准则，负责当地赛区初赛与复赛组织工作；</view
              >
              <view>2、参赛选手须为甲方出品的所有产品的直接使用用户；</view>
              <view>3、当地参赛选手人数须200人起。</view>
              <view
                >为明确甲乙双方在赛事运营上的责任权利和义务关系，在自愿、平等、互利的基础上,甲乙双方本着精诚合作、共同发展的原则，特制定本协议，以期甲乙双方共同遵守：</view
              >
              <view>一、本届赛事统一名称</view>
              <view>统一名称：</view>
              <view>第17届“逻辑狗杯”全国儿童思维魔法嘉年华</view>
              <view>地区名称：</view>
              <view>第17届“逻辑狗杯”全国儿童思维魔法嘉年华——XXX地区·分站</view>
              <view>二、本届赛事主办单位：</view>
              <view>中国儿童思维训练网 www.zaojiao.net</view>
              <view>逻辑狗·一起成长APP</view>
              <view>逻辑狗·家园共育APP</view>
              <view>三、本届赛事承办单位：</view>
              <view>北京中德智慧教育文化有限公司</view>
              <view>北京思维魔法教育科技有限公司</view>
              <view>四、本届赛事协办单位：</view>
              <view>全国各地签约合作教育机构</view>
              <view>五、双方权利与义务</view>
              <view>（一）甲方的权利与义务</view>
              <view
                >1、甲方拥有与赛事相关的一切权利，并有权通过合法程序将其中的部分或全部权利授权给其他单位、团体或个人。</view
              >
              <view
                >2、甲方负责赛事整体方案的制定和赛事的监督、管理与指导。</view
              >
              <view
                >3、甲方拥有对赛事合作单位与所承办赛事有关一切活动的管理监督权。</view
              >
              <view>4、甲方负责制定赛事招标方案、竞赛规程等相关规定。</view>
              <view
                >5、甲方可根据实际情况决定比赛项目设置；指定比赛奖励形式。</view
              >
              <view
                >6、甲方负责赛事组织物料的设计、制作和各授权赛区的赛事物料配发。</view
              >
              <view>7、甲方负责全国总决赛的组织和承办。</view>
              <view
                >8、甲方负责赛事商业宣传、推广，有义务通过商业活动、公益活动、广告宣传提高赛事的知名度和美誉度，维护赛事品牌形象。</view
              >
              <view
                >9、甲方拥有第17届“逻辑狗杯”全国儿童思维魔法嘉年华的最终解释权。</view
              >
              <view>（二）乙方的权利与义务</view>
              <view
                >1、乙方尽全力组织本届比赛，积极发动3~7岁儿童广泛参与，每个参赛地区组织一定规模的赛事，掀起儿童思维训练的热潮，传播国际化思维教育科学理念及其教育内容。
              </view>
              <view
                >2、乙方自行负责当地比赛的宣传、组织、实施、赛事安全等，并有义务告知参赛家庭相关法律责任由参赛家庭全权负责。</view
              >
              <view
                >3、乙方对当地的赛事结果负全责，参加全国总决赛，须派领队一名带队来京参赛，参加总决赛地区选手及陪同家长的一应事宜，由领队负责管理，同时，选手家长负责参赛人员及家长在来京路途和比赛现场之外的一切安全问题。</view
              >
              <view
                >4、乙方地区海选比赛于2022年4月1日—7月1日举行，赛事结束后向组织单位提交详细的赛事工作总结，并将比赛结果在三日内告知甲方；2022年7月底在北京举行全国总决赛，乙方派出各年龄组冠军1名参加在北京的全国总决赛及参加全国赛事的相关活动。</view
              >
              <view
                >5、乙方区域参赛选手需在甲方提供的全国统一报名通道进行线上登记报名，获得官方认可的唯一选手识别码，并凭此编码参加区域海选赛、区域决赛和全国总决赛。</view
              >
              <view
                >6、乙方组织的区域海选赛和区域决赛需按照甲方制定的赛制进行，具体赛制要求请查阅附件。如有特殊情况需调整赛制需以书面形式向甲方呈报，经甲方审议通过后方可执行。</view
              >
              <view
                >7、乙方决选出参加全国总决赛赛事的幼儿，须提供符合参赛岁段的户口簿证明，同时出具该选手在区域决赛中最终排名的公示证明材料，如排名第一的选手主动放弃参加全国总决赛资格，则需该选手监护人出具书面弃赛证明。</view
              >
              <view
                >8、乙方分赛区的赛事费用由社会赞助或乙方自筹解决。全国总决赛收取相应赛务费用（包含每位参赛小选手的赛务费和一名监护人的会务费），由甲方统一提供的唯一指定报名入口缴纳。</view
              >
              <view
                >9、乙方征集的赛事各级赞助商企业及品牌不得与组织单位赞助商相冲突，征集前需将潜在赞助商名称和赞助意向书面报组织单位批准，获得组织单位批准后方可与赞助商签订赞助协议。</view
              >
              <view
                >10、在本届赛事整体活动中，如乙方未与甲方沟通擅自改动本纲领中规定的相关规定，则甲方有权取消本年度乙方呈报选手参赛资格并取消下一年度乙方在所在地区承办赛事的权利。</view
              >
              <view>六、双方赛事承诺</view>
              <view
                >本着公平、公正、公开原则，绝不在赛事中参杂任何营私舞弊行为，保证全国赛事的透明性与公正性，给每个孩子一个平等的挑战自我的机会。
              </view>
              <view>七、协议的变更与解除</view>
              <view
                >（一）甲、乙双方经协商一致的，可以变更或者解除本协议。</view
              >
              <view
                >（二）乙方违反本协议约定的任何一项义务，甲方有权单方解除本协议,甲方所收参赛费和赛务费不予退还。因此造成的损失，有权继续向乙方追偿。
              </view>
              <view>八、争议解决</view>
              <view
                >因本合同引起的或与本合同有关的任何争议，双方应友好协商解决，如协商不成，可向北京市朝阳区人民法院法院提起诉讼。</view
              >
              <view>九、协议生效、终止及续约</view>
              <view
                >本协议自甲乙双方加盖公章（自然人须签字），且乙方按照协议签署之日起生效，本协议约定期限届满之日终止。</view
              >
              <view
                >本协议一式三份，甲方执两份，乙方执一份，双方所执具有同等法律效力，本协议未尽事宜双方另订补充协议，补充协议与本协议具有同等法律效力。</view
              >
              <view>甲方：</view>
              <view>乙方：</view>
              <view>第17届“逻辑狗杯”全国儿童思维魔法嘉年华组委会 </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;
    }
  }
}
</style>  