<template>
  <div class="paying">
    <div>
      <span class="pay_titile">报名信息</span>
      <div class="pay_top">
        <div>营地名称：{{ camp_name }}</div>
        <div>真实姓名：{{ personalInfo.name }}</div>
        <div>身份证号：{{ personalInfo.id_card }}</div>
        <!-- <div>缴费时间：{{ personalInfo.create_time }}</div> -->
        <div>报名费用： {{ has_amount }}元</div>
      </div>
      <div class="line"></div>
      <div class="pay-money flex">
        <div>
          报名费用 ：<span>￥{{ has_amount }} </span>
        </div>
        <div class="btn">
          <el-button @click="paying()">立即支付 </el-button>
        </div>
      </div>

      <div class="pay_bottom" v-if="$store.state.indexIdentity == '6c6884d1c83040ee8ca17736a8d67b93'">
        <div>注意事项：</div>
        <div>
          请参照清华大学人文学院“中国现当代文学经典研读”学分课程简章中缴费方式。
          <span class="cc">汇款或扫码支付后请务必保留付款截图</span>。
        </div>
        <div>
          1、银行转账汇款时，请在附言/用途栏中注明 "21069363022 +学员姓名"。
        </div>
        <div>
          2、扫码支付时，请在备注栏中注明“学员姓名”。
        </div>
        <div>
          3、未满18岁的学员，缴费请由家长支付。
        </div>
      </div>
      <div class="pay_bottom" v-else-if="$store.state.indexIdentity == '479205eb2dbf48fcbbeaee710a9b9d24'">
        <div>注意事项：</div>
        <div>
          1、支付成功后请务必保留付款截图。
        </div>
        <div>
          2、银行转账汇款时，请在附言/用途栏中注明“22069363005+学员姓名”。
        </div>
        <div>
          3、未满18岁的学员，缴费请由家长支付。
        </div>
        <div style="margin-top: 10px;">汇款信息：</div>
        <div>
          收款单位：清华大学
        </div>
        <div>
          帐号：0200004509089131550
        </div>
        <div>
          开户行：工行北京分行海淀西区支行
        </div>
        <div>
          附言/用途：请在附言栏中注明“22069363005+学员姓名”
        </div>
      </div>
      <div class="pay_bottom" v-else>
        <div>注意事项：</div>
        <div>
          1、学生支付完成后请不要立即关闭浏览器，等待支付完成返回本页面，以确认支付完成。
        </div>
        <div>
          2、支付确认后，将不能再修改姓名和身份证号，请在支付前核对信息。
        </div>
        <div>
          3、如果在完成支付后，状态许久未更新为“报名成功”，请仔细核查自己支付账号是否已扣费。
        </div>
        <div>
          4、对于多次缴费的考生，除生效一笔之外其他重复支付的得用会在缴费结束阶段统一退款。
        </div>
        <!-- <div>5、网上缴费如有问题，请致电项目组工作人员：XXX-XXXXXXXXX。</div> -->
      </div>
    </div>
    <!-- 支付扫码框 -->
    <!-- <el-dialog title="微信支付" :visible.sync="dialogVisible" width="20%">
      <div class="pay_code">
        <div class="pay_time">支付剩余时间<span>15分30秒</span></div>
        <div>￥150</div>
        <div class="pay_img">
         <div class="qrcode" ref="qrCodeUrl"></div>
        </div>
        <div>请使用<span>微信</span>扫一扫，扫描二维码支付</div>
        <div>手机完成支付后，请等待系统处理，在此之前请勿关闭窗口</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="btn">
          <el-button @click="dialogVisible = false">刷新二维码</el-button>
        </div>
      </span>
    </el-dialog> -->
    <confirm-sign-up
      :confirmSignUpDialogFu="confirmSignUpDialogFu"
      @closeCFSUDialog="closeCFSUDialog"
    ></confirm-sign-up>
  </div>
</template>

<script>
/* eslint-disable */
import ConfirmSignUp from "c/index/SignUp/ConfirmSignUp";
import { getAccount } from "r/index/signUp";
import { signUpInit } from "r/index/signUp";
import { getWxConfig } from "r/index/pay";

export default {
  name: "Paying",
  components: {
    ConfirmSignUp,
  },
  data() {
    return {
      confirmSignUpDialogFu: false, // 控制确认报名弹框的显示与隐藏
      personalInfo: {},
      camp_name: "", //营地名称
      has_amount: "", //支付金额
      status: "", //状态
      status_wx: "", //状态
      type: "", //状态
    };
  },
  created() {
    const code = this.$store.state.indexIdentity;
    this.camp_name = window.localStorage.getItem("camp_name" + code);
    this.has_amount = window.localStorage.getItem("has_amount" + code);
    this.getAccount();
  },
  methods: {
    // 子组件触发，关闭确认报名弹框
    closeCFSUDialog(val, type) {
      this.confirmSignUpDialogFu = val;
      if (type) {
        clearInterval(this.timer);
      }
    },

    paying() {
      console.log(111)
      getWxConfig({
        pay_type: 1,
      }).then((res) => {
        console.log(res, "getWxConfig");
        // this.status_wx = res.data.status;
          this.$emit("getstatus", res.data.status);
        console.log(this.status_wx, " this.status_wx");
        this.signUpInit(this.status_wx);
      });
      // return;
    },
    signUpInit(status_wx) {
      signUpInit({}).then((res) => {
        console.log(res, "signUpInit");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        // this.status = res.data.status;
        // 点击下一步传值给status,更新
        if (status_wx) {
          this.status = status_wx;
          console.log(this.status, "status_wx");
        } else {
          this.status = res.data.status;
          // console.log(this.status, "11111");
        }
        // return;
        // 点击下一步传值给status,更新
        if (this.status == 4) {
          this.type = "check";
          this.status = 3;
          if (this.isNexts == 1) {
            if (res.data.examine_status == 1) {
              console.log(333);
              this.type = "pay";
              this.status = 4;
            } else if (res.data.examine_status == 2) {
              this.type = "referInfo";
              this.status = 2;
            }
          }
          this.confirmSignUpDialogFu = true;
        } else if (this.status == 5) {
          this.type = "pay";
          this.confirmSignUpDialogFu = true;
        } else if (this.status == 6) {
          this.type = "success";
        }
      });
    },
    getAccount() {
      getAccount({}).then((res) => {
        // console.log(res, "getAccount");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.personalInfo = res.data.info;
        // this.personalInfo.create_time = parseTime(res.data.info.create_time);
      });
    },
  },
};
</script>

<style  lang="scss" scoped>
@import "a/scss/btn";
.btn {
  padding-bottom: 0 !important;
}
.flex {
  display: flex;
}
.paying {
  padding: 0 56px 65px 56px;
  .pay_titile {
    font-size: 18px;
    font-weight: 500;
    color: #12141c;
    line-height: 18px;
  }
  .pay_top {
    margin: 24px 0;
    div {
      font-size: 14px;
      font-weight: 500;
      color: #12141c;
      line-height: 32px;
    }
  }

  .line {
    height: 1px;
    border-bottom: 1px solid #d1d1d1;
  }
  .pay-money {
    font-size: 18px;
    font-weight: 500;
    color: #12141c;
    line-height: 24px;
    justify-content: space-between;
    margin: 43px 0 0 0;
    span {
      color: #60194a;
    }
  }
  .pay_bottom {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
    line-height: 21px;
  }
}
.pay_code {
  text-align: center;
  :nth-child(1) {
    font-size: 14px;
    font-weight: 500;
    color: #12141c;
    line-height: 14px;
    span {
      font-size: 13px !important;
      color: var(--color);
    }
  }
  :nth-child(2) {
    font-size: 14px;
    font-weight: 500;
    color: var(--color);
    line-height: 24px;
  }
  :nth-child(4) {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 16px;
    span {
      font-size: 17px !important;
      color: var(--color);
    }
  }
  :nth-child(5) {
    font-size: 12px;
    font-weight: 500;
    color: #666666;
    line-height: 12px;
  }
}
</style>
