<template>
  <div
    :class="[
      'login-wrapper',
      ['', 'login-form-right', 'login-form-left'][direction]
    ]"
  >
    <el-form
      ref="form"
      size="large"
      :model="form"
      :rules="rules"
      class="login-form ele-bg-white"
      @keyup.enter.native="doSubmit"
    >
      <h4>{{ PROJECT_NAME }} &middot; 账号绑定</h4>
      <el-form-item prop="userName">
        <el-input
          clearable
          v-model="form.userName"
          prefix-icon="el-icon-user"
          placeholder="请输入真实姓名"
        />
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
          clearable
          v-model="form.phone"
          placeholder="请输入绑定手机号"
          prefix-icon="el-icon-mobile-phone"
        />
      </el-form-item>
      <el-form-item prop="userCode">
        <el-input
          clearable
          v-model="form.userCode"
          placeholder="请输入工号"
          prefix-icon="el-icon-cloudy"
        />
      </el-form-item>
      <el-form-item prop="code">
        <div class="login-input-group">
          <el-input
            clearable
            v-model="form.code"
            placeholder="请输入验证码"
            prefix-icon="el-icon-_vercode"
          />
          <el-button
            size="large"
            :disabled="!!countdownTimer"
            style="margin-left: 10px"
            @click="sendCode"
          >
            <span v-if="!countdownTimer">发送验证码</span>
            <span v-else>已发送 {{ countdownTime }} s</span>
          </el-button>
        </div>
      </el-form-item>
      <el-form-item prop="agreement" class="agreement">
        <el-radio label="1" v-model="form.agreement" style="margin-right: 0">
          同意
        </el-radio>
        <span style="font-size: 12px">
          <el-link
            type="primary"
            @click="showAgreement"
            style="font-size: 12px; vertical-align: baseline"
            >《好车补亲友团用户注册协议》
          </el-link>
        </span>
        <el-link
          type="primary"
          :underline="false"
          class="ele-pull-right"
          @click="$router.push('/login')"
          style="vertical-align: baseline"
        >
          返回登录
        </el-link>
      </el-form-item>
      <div class="el-form-item">
        <el-button
          size="large"
          type="primary"
          class="login-btn"
          :loading="loading"
          @click="doSubmit"
        >
          立即绑定
        </el-button>
      </div>
    </el-form>
    <ele-modal width="50%" title="协议" :visible.sync="agreementVisible">
      <div v-html="agreementText" style="line-height: 2" />
    </ele-modal>
    <!-- 图形验证码弹窗 -->
    <ele-modal width="320px" title="发送验证码" :visible.sync="showImgCode">
      <div class="login-input-group" style="margin-bottom: 15px">
        <el-input
          size="large"
          v-model="imgCode"
          placeholder="输入图形验证码"
          @keyup.enter.native="sendCode"
        />
        <img
          alt=""
          :src="captcha"
          class="login-captcha"
          @click="changeImgCode"
        />
      </div>
      <el-button
        size="large"
        type="primary"
        class="login-btn"
        :loading="codeLoading"
        @click="sendCode"
      >
        立即发送
      </el-button>
    </ele-modal>
    <!-- 实际项目去掉这段 -->
    <!--
    <div
      class="hidden-xs-only"
      style="position: absolute; right: 30px; bottom: 20px; z-index: 9"
    >
      <el-radio-group v-model="direction" size="mini">
        <el-radio-button label="2">居左</el-radio-button>
        <el-radio-button label="0">居中</el-radio-button>
        <el-radio-button label="1">居右</el-radio-button>
      </el-radio-group>
    </div>
    -->
    <copyright />
  </div>
</template>

<script>
  import { PROJECT_NAME } from '@/config/setting';
  import copyright from '@/components/Copyright/index.vue';
  import { register, getCode } from '@/api/login/index';
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Forget',
    components: { copyright },
    data() {
      return {
        // 登录框方向, 0居中, 1居右, 2居左
        direction: 0,
        // 加载状态
        loading: false,
        // 表单数据
        form: {
          userName: '',
          phone: '',
          userCode: '',
          code: '',
          agreement: ''
        },
        // 表单验证规则
        rules: {
          userName: [
            {
              required: true,
              message: '请输入真实姓名',
              trigger: 'blur'
            }
          ],
          phone: [
            {
              required: true,
              message: '请输入绑定手机号',
              trigger: 'blur'
            }
          ],
          userCode: [
            {
              required: true,
              message: '请输入工号',
              trigger: 'blur'
            }
          ],
          code: [
            {
              required: true,
              message: '请输入验证码',
              trigger: 'blur'
            }
          ],
          agreement: [
            {
              required: true,
              message: '请阅读并同意',
              trigger: 'blur'
            }
          ]
        },
        // 用于刷新验证码
        v: new Date().getTime(),
        // 是否显示图形验证码弹窗
        showImgCode: false,
        // 图形验证码
        imgCode: '',
        // 发送验证码按钮loading
        codeLoading: false,
        // 验证码倒计时时间
        countdownTime: 30,
        // 验证码倒计时定时器
        countdownTimer: null,
        PROJECT_NAME,
        agreementVisible: false,
        agreementText:
          '<p style="text-align: center;"><strong>好车补</strong><strong>亲友团</strong><strong>用户注册协议</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 本《好车补亲友团用户注册协议》（以下简称&ldquo;本协议&rdquo;）是由好车补亲友团用户（下称&ldquo;会员&rdquo;或&ldquo;您&rdquo;）与好车补平台签订的关于使用好车补平台（下称&ldquo;本平台&rdquo;）的法律协议。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 为保障会员的合法权益，请于注册成为好车补亲友团成员前，仔细阅读本协议所有内容。注册或使用本服务时，即表示已充分阅读、理解并同意接受本协议及好车补平台公示的相关规则制度之所有内容。当您通过在线勾选或点击网络页面的按钮时，即表示您已仔细阅读本协议全部条款并同意接受本协议约束，包括但不限于本协议和不时发布的公告、通知、规范等。如果您不同意接受本协议的内容，请不要进行后续操作。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p><strong>资质确认</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 请您在此确认，同意本协议时，您符合如下所有条件：</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 满18周岁，具备完全民事行为能力；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 如不符合上述任一条件，或在履行合同过程中，出现不符合上述任一条件的情况，本平台有权随时终止合作。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p><strong>一、定义</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 好车补：指好车补平台运营主体，以下简称&ldquo;平台&rdquo;；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 运营方：指好车补负责网站、应用程序或在线平台的运营管理人员；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 推广渠道：拥有和/或具有合法运营权、代理权的互联网信息发布空间，包括但不限于符合国家规定的网站、网页、界面和/或即时通讯软件、社交媒体等；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 有效报名：用户通过点击本平台会员投放的推广链接，访问对应服务页面并首次成功提交真实有效的用户信息（包括但不限于姓名、手机号码）。同一服务页面多次报名，仅一次有效；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 有效到店：用户通过点击本平台会员投放的推广链接，产生有效报名后，根据报名信息前往指定活动地点参加活动并完成真实有效签到；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 有效成交：用户通过点击本平台会员投放的推广链接，访问对应商品/服务页面，购买商品/服务，确认收货/服务完成并支付费用，且依法于无理由退换货期间未产生退货；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 有效操作：用户通过点击本平台会员投放的推广链接，访问对应服务页面完成下载、登录注册、线上体验等行为；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 服务费比例：指会员推广链接达成指定推广效果后，平台向会员支付服务费的计算依据，具体比例以平台公告为准；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 推广效果：平台单次推广活动内页描述的任务达成方式及对有效报名、有效到店、有效成交、有效操作的具体约定；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 有效推广：会员通过合法渠道推广好车补产品/服务，促成客户与平台签署合作协议并支付费用。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p><strong>二、好车补的权利与义务</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 平台有权要求会员提供身份证号码、手机号码、银行卡号等个人信息以完成提现及税务申报；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 运营方可通过短信、电话等方式向会员发送活动通知、中奖信息；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 平台有权对会员推广行为进行监督，会员应积极配合；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 符合条件时，平台依据协议约定向会员支付服务费；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 若会员存在以下行为，平台有权取消资格、扣发服务费并追究责任：</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 违反法律法规或平台规则，损害平台声誉；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 提供虚假信息或进行误导性宣传；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 引导用户作弊（如刷单、伪造信息）；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 非法收集或使用用户信息；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 推广内容包含违法违规或违反公序良俗的信息。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p><strong>三、会员的权利与义务</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 会员需保证具备完全民事行为能力，并按要求提交资质证明；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 会员可在平台自主选择推广商品/服务，但不得篡改推广链接；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 会员不得以虚假信息误导用户或关联公司关系，违者需承担违约责任；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 会员仅能在授权推广渠道投放链接，禁止使用作弊手段；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 平台有权调整会员权限，会员需配合执行。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p><strong>四、费用及支付</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 服务费计算​：</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 单笔服务费 = 有效行为对应的付费基数 &times; 服务费比例（具体比例以公告为准）；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 有效行为包括：有效报名、有效到店、有效成交、有效操作；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 以下情况不计费：积分/优惠券支付、刷单作弊、未达推广标准。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 逾期未申请提现视为放弃当期权益；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 平台有权调整结算规则并通过公告告知。</p>\n' +
          '<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;</strong></p>\n' +
          '<p><strong>五、安全条款</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 平台依法收集、使用个人信息，变更用途需再次征得同意；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 会员需妥善保管账户信息，因泄露导致损失平台不承担责任；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 发现账户异常应立即通知平台，延迟通知则自行担责；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 密码需定期更换，避免与其他平台共用。</p>\n' +
          '<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;</strong></p>\n' +
          '<p><strong>六、协议变更及终止</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 平台有权单方调整协议条款，调整后以公告为准；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 协议终止后90日内清算未付服务费，逾期视为放弃债权。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p><strong>七、免责条款</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 因不可抗力（如自然灾害、黑客攻击、政府管制等）导致服务异常，平台不承担责任；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 会员需自行承担账户安全风险及交易损失；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 平台对外部链接内容不承担责任。</p>\n' +
          '<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;</strong></p>\n' +
          '<p><strong>八、违约责任</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 会员违约需赔偿平台及第三方损失（含律师费、诉讼费）；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 平台泄露用户信息需赔偿直接损失并补救。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p><strong>九、法律适用与管辖</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 本协议适用中华人民共和国法律，争议由好车补所在地法院管辖。</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>\n' +
          '<p><strong>十、其他事项</strong></p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 本协议为完整协议，其他约定与本协议冲突的以本协议为准；</p>\n' +
          '<p>&nbsp;&nbsp;&nbsp;&nbsp; 未尽事宜可参考平台其他规则，协议更新以最新版本为准。</p>'
      };
    },
    computed: {
      // 图形验证码地址
      captcha() {
        return 'https://eleadmin.com/assets/captcha?v=' + this.v;
      }
    },
    methods: {
      /* 提交 */
      doSubmit() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          register(this.form)
            .then(() => {
              this.$message.success('绑定成功');
              this.$router.push('/login');
            })
            .catch((e) => {
              this.$message.error(e.message);
            })
            .finally(() => {
              this.loading = false;
            });
        });
      },
      /* 更换图形验证码 */
      changeImgCode() {
        // 这里演示的验证码是后端地址直接是图片的形式, 如果后端返回base64格式请参考登录页面
        this.v = new Date().getTime();
      },
      /* 显示发送短信验证码弹窗 */
      showImgCodeCheck() {
        if (!this.form.phone) {
          this.$message.error('请输入手机号码');
          return;
        }
        this.imgCode = '';
        this.changeImgCode();
        this.showImgCode = true;
      },
      /* 发送短信验证码 */
      sendCode() {
        // if (!this.imgCode) {
        //   this.$message.error('请输入图形验证码');
        //   return;
        // }
        if (!this.form.phone) {
          this.$message.error('请输入手机号');
          return;
        }
        this.codeLoading = true;
        getCode({
          params: {
            phone: this.form.phone,
            type: 'register'
          }
        })
          .then((msg) => {
            this.$message.success(msg);
            this.startCountdownTimer();
          })
          .catch((e) => {
            this.$message.error(e.message);
          })
          .finally(() => {
            this.codeLoading = false;
          });
        // setTimeout(() => {
        //   this.$message.success('短信验证码发送成功, 请注意查收!');
        //   this.showImgCode = false;
        //   this.codeLoading = false;
        //   this.startCountdownTimer();
        // }, 1000);
      },
      /* 开始对按钮进行倒计时 */
      startCountdownTimer() {
        this.countdownTime = 30;
        this.countdownTimer = setInterval(() => {
          if (this.countdownTime <= 1) {
            clearInterval(this.countdownTimer);
            this.countdownTimer = null;
          }
          this.countdownTime--;
        }, 1000);
      },
      showAgreement() {
        this.agreementVisible = true;
      }
    },
    destroyed() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
      }
    }
  };
</script>

<style lang="scss" scoped>
  /* 背景 */
  .login-wrapper {
    padding: 50px 0;
    position: relative;
    box-sizing: border-box;
    background-image: url('~@/assets/bg-login.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2);
    }
  }

  /* 卡片 */
  .login-form {
    width: 400px;
    margin: 0 auto;
    max-width: 100%;
    padding: 25px 30px;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    position: relative;
    z-index: 2;

    h4 {
      margin: 0 0 25px 0;
      text-align: center;
    }

    & > .el-form-item {
      margin-bottom: 25px;
    }
  }

  .login-form-right .login-form {
    margin: 0 15% 0 auto;
  }

  .login-form-left .login-form {
    margin: 0 auto 0 15%;
  }

  /* 验证码 */
  .login-input-group {
    display: flex;
    align-items: center;

    :deep(.el-input) {
      flex: 1;
    }

    .login-captcha {
      width: 102px;
      height: 38px;
      margin-left: 10px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      text-align: center;
      cursor: pointer;

      &:hover {
        opacity: 0.75;
      }
    }
  }

  .login-btn {
    display: block;
    width: 100%;
  }

  /* 第三方登录图标 */
  .login-oauth-icon {
    color: #fff;
    padding: 5px;
    margin: 0 10px;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
  }

  /* 响应式 */
  @media screen and (min-height: 550px) {
    .login-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      margin-top: -220px;
    }

    .login-form-right .login-form,
    .login-form-left .login-form {
      left: auto;
      right: 15%;
      transform: translateX(0);
      margin: -220px auto auto auto;
    }

    .login-form-left .login-form {
      right: auto;
      left: 15%;
    }
  }

  @media screen and (max-width: 768px) {
    .login-form-right .login-form,
    .login-form-left .login-form {
      left: 50%;
      right: auto;
      margin-right: auto;
      transform: translateX(-50%);
    }
  }
</style>
