<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 v-if="$store.state.human == 1" @click="paying()"
            >上传缴费截图
          </el-button>
          <el-button v-else @click="paying()">立即支付 </el-button>
        </div>
      </div>

      <div>
        <!-- 清华大学人文学院 “中国现当代文学经典研读”学分课程 -->
        <div
          class="pay_bottom"
          v-if="
            $store.state.human == 1 &&
            $store.state.indexIdentity == '6c6884d1c83040ee8ca17736a8d67b93'
          "
        >
          <div class="cc"><span class="starIcon">*</span>注意事项：</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.human == 1 &&
            $store.state.indexIdentity == '479205eb2dbf48fcbbeaee710a9b9d24'
          "
        >
          <div class="cc"><span class="starIcon">*</span>注意事项：</div>
          <div>1、支付成功后请务必保留付款截图。</div>
          <div>
            2、银行转账汇款时，请在附言/用途栏中注明“22069363005+学员姓名”。
          </div>
          <div>3、未满18岁的学员，缴费请由家长支付。</div>
          <div class="cc" style="margin-top: 10px">
            <span class="starIcon">*</span>汇款信息：
          </div>
          <div>收款单位：清华大学</div>
          <div>帐号：0200004509089131550</div>
          <div>开户行：工行北京分行海淀西区支行</div>
          <div>附言/用途：请在附言栏中注明“22069363005+学员姓名”</div>
        </div>
        <div v-else class="pay_bottom">
          <div class="cc"><span class="starIcon">*</span>注意事项：</div>
          <div>
            1、学生支付完成后请不要立即关闭浏览器，等待支付完成返回本页面，以确认支付完成。
          </div>
          <div>
            2、支付确认后，将不能再修改姓名和身份证号，请在支付前核对信息。
          </div>
          <div>
            3、如果在完成支付后，状态许久未更新为“报名成功”，请仔细核查自己支付账号是否已扣费。
          </div>
          <div>
            4、对于多次缴费的学生，除生效一笔之外其他重复支付的费用会在缴费结束阶段统一退费。
          </div>
          <!-- <div>5、网上缴费如有问题，请致电项目组工作人员：XXX-XXXXXXXXX。</div> -->
        </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> -->
    <!-- 微信支付宝2选1 -->
    <el-dialog
      title="支付方式"
      :visible.sync="dialogChoose"
      width="600px"
      :before-close="handleClose"
    >
      <div class="choose">
        <div class="flex img_choose">
          <img
            src="../../../assets/img/paying/weichat.png"
            alt=""
            @click="toWeichat"
          />
          <img
            src="../../../assets/img/paying/paybao.png"
            alt=""
            @click="toPaybao"
          />
        </div>
        <div class="text_choose">请选择支付方式</div>
      </div>
    </el-dialog>
    <!-- 微信支付 -->
    <confirm-sign-up
      :confirmSignUpDialogFu="confirmSignUpDialogFu"
      @closeCFSUDialog="closeCFSUDialog"
    ></confirm-sign-up>
    <!-- 上传付款材料 -->
    <el-dialog
      title="银行卡支付"
      :visible.sync="bankDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>收款单位：{{ payee }}</div>
      <div>账号：{{ bank_idcard }}</div>
      <div>开户行：{{ bank_first }}</div>
      <div>上传转账截图</div>

      <div class="image_add">
        <div class="image_in">
          <el-upload
            :class="{ hide: hideUpload }"
            ref="imgUrl"
            name="multipartFile"
            list-type="picture-card"
            :disabled="isUploading || fileList.length >= 1"
            action="#"
            accept=".jpg,.jpeg,.png"
            :limit="1"
            :file-list="fileList"
            :before-upload="beforeAvatarUpload"
            :on-progress="handleUploadProgress"
            :on-success="uploadSuccess"
            :http-request="uploadPicture"
          >
            <div slot="file" slot-scope="{ file }">
              <div v-for="(item, idx) in fileList" :key="idx">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </div>
            <i style="font-size: 44px" class="el-icon-circle-plus"> </i>
          </el-upload>
        </div>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="resultPicture" alt="" />
        </el-dialog>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="bankDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import ConfirmSignUp from "c/index/SignUp/ConfirmSignUp";
import { SERVER_WS_URL } from "@/config/server";
import {
  signUpInit,
  getAccount,
  getBankInfoOss,
  delPayingPic,
} from "r/index/signUp";
import { getWxConfig } from "r/index/pay";
import { upload } from "r/index/network";

export default {
  name: "Paying",
  components: {
    ConfirmSignUp,
  },
  data() {
    return {
      dialogChoose: false, //付款方式选择
      confirmSignUpDialogFu: false, // 控制确认报名弹框的显示与隐藏
      bankDialogVisible: false, //上传银行截图弹框的显示与隐藏
      personalInfo: {},
      camp_name: "", //营地名称
      has_amount: "", //支付金额
      status: "", //状态
      status_wx: "", //状态
      type: "", //状态
      //支付状态判断
      transfer_account: window.localStorage.getItem(
        "transfer_account" + this.$store.state.indexIdentity
      ),
      payee: window.localStorage.getItem(
        "payee" + this.$store.state.indexIdentity
      ),
      bank_first: window.localStorage.getItem(
        "bank_first" + this.$store.state.indexIdentity
      ),
      bank_idcard: window.localStorage.getItem(
        "bank_idcard" + this.$store.state.indexIdentity
      ),
      isUploading: false, // 图片上传蒙层
      dialogVisible: false,
      fileList: [],
      file: "",
      file_image: {},
      resultPicture: "",
      disabled: false, //限制输入框

      hideUpload: false,

      limitCount: 1,
    };
  },
  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);

    // 已上传的银行付款图片
    let bank_infoFile = window.localStorage.getItem(
      "bank_info" + window.localStorage.getItem("phone" + code) + code
    );
    console.log(bank_infoFile, "bank_infoFile");
    if (bank_infoFile && JSON.parse(bank_infoFile).length > 0) {
      console.log(JSON.parse(bank_infoFile));
      this.fileList = JSON.parse(bank_infoFile);
    }
    this.getAccount();
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 子组件触发，关闭确认报名弹框
    closeCFSUDialog(val) {
      console.log(val, "val");
      this.confirmSignUpDialogFu = val;
    },
    toWeichat() {
      // this.dialogChoose = false;
      this.confirmSignUpDialogFu = true;
    },
    toPaybao() {
      getWxConfig({
        pay_type: 2,
      }).then((res) => {
        console.log(res, "getWxConfig");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        /* 此处form就是后台返回接收到的数据 */
        let form = res.data.data;
        console.log(form);
        // return
        let div = document.createElement("div");
        div.innerHTML = form;

        document.body.appendChild(div);

        document.forms[0].acceptCharset = "GBK"; //保持与支付宝默认编码格式一致，如果不一致将会出现：调试错误，请回到请求来源地.
        // 重新发起请求，错误代码 invalid-signature 错误原因: 验签出错，建议检查签名字符串或签名私钥与应用公钥是否匹配
        document.forms[0].submit(); //
        let alipay_submit = document.getElementById("alipay_submit");
        div.removeChild(alipay_submit);
        //初始化 websocket 链接
        this.initWebSocket();
      });
    },
    // 初始化 webSocket
    initWebSocket() {
      if (typeof WebSocket == "undefined") {
        this.$message({
          showClose: true,
          message: "您的浏览器不支持WebSocket",
          type: "error",
        });
      } else if (!this.dialogChoose) {
        return;
      } else {
        let code = this.$store.state.indexIdentity;
        if (!this.token || this.token == "") {
          this.token = window.localStorage.getItem("index-token" + code);
        }
        let token = this.token;
        var wssURL = SERVER_WS_URL + "/order?token=" + token + "&channel=pc";
        console.log(wssURL);
        this.websocket = new WebSocket(wssURL);
        console.log(this.websocket);
        // 连接发生错误的回调方法
        this.websocket.onerror = this.websocketOnerror;
        // 连接成功建立的回调方法
        this.websocket.onopen = this.websocketOnopen;
        // 接收到消息的回调方法
        this.websocket.onmessage = this.websocketOnmessage;
        // 连接关闭的回调方法
        this.websocket.onclose = this.websocketOnclose;
        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        this.websocket.onbeforeunload = this.websocketOnbeforeunload;
        // this.websocketSend();
        // setTimeout(() => {
        //   this.websocketSend();
        // }, 1000);
      }
    },
    reconnect() {
      //重新连接
      let that = this;
      if (!that.dialogChoose) {
        return;
      }
      if (that.lockReconnect) {
        return;
      }
      that.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum);
      that.timeoutnum = setTimeout(function () {
        //新连接
        that.initWebSocket();
        that.lockReconnect = false;
      }, 5000);
    },
    reset() {
      //重置心跳
      let that = this;
      //清除时间
      clearTimeout(that.timeoutObj);
      clearTimeout(that.serverTimeoutObj);
      //重启心跳
      that.start();
    },
    start() {
      //开启心跳
      let self = this;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
      self.timeoutObj = setTimeout(function () {
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.websocket.readyState == 1) {
          //如果连接正常
          self.websocket.send("heartCheck");
        } else {
          //否则重连
          self.reconnect();
        }
        self.serverTimeoutObj = setTimeout(function () {
          //超时关闭
          self.websocket.close();
        }, self.timeout);
      }, self.timeout);
    },
    // 连接发生错误的回调方法
    websocketOnerror() {
      this.$message.error("WebSocket连接发生错误");
      //重连
      this.reconnect();
    },
    // 连接成功建立的回调方法
    websocketOnopen() {
      this.websocketSend();
      // console.log("连接成功建立的回调方法");
      //开启心跳
      this.start();
    },
    websocketSend() {
      //数据发送
      let sendData = {
        order_no: window.localStorage.getItem(
          "order_no" + this.$store.state.indexIdentity
        ),
        cam_id: window.localStorage.getItem(
          "campsite_id" + this.$store.state.indexIdentity
        ),
        token: this.token,
      };
      this.websocket.send(JSON.stringify(sendData));
    },
    // 接收到消息的回调方法
    websocketOnmessage(event) {
      console.log(event, "event");
      if (event.data !== "Opened") {
        //const data = JSON.parse(event.data);
        // console.log("接收到消息的回调方法", event.data);
        if (event.data == 1) {
          this.lockReconnect = false;
          this.closeWebSocket();
          // this.dialogVisible = false;
          // this.$emit("closeCFSUDialog", this.dialogVisible, true);
        } else {
          //收到服务器信息，心跳重置
          this.reset();
        }
      }
    },
    // 连接关闭的回调方法
    websocketOnclose() {
      // console.log("连接关闭的回调方法");
      //重连
      this.reconnect();
    },
    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
    websocketOnbeforeunload() {
      this.closeWebSocket();
      // console.log('监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常');
    },
    // 关闭WebSocket连接
    closeWebSocket() {
      this.websocket && this.websocket.close();
    },

    paying() {
      if (this.transfer_account == 0) {
        this.dialogChoose = true;
      } else {
        this.bankDialogVisible = true;
        console.log(this.fileList);
        console.log(this.fileList != []);
        if (this.fileList.length >= 1) {
          this.hideUpload = true;
        }
      }
    },
    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);
      });
    },

    // 图片上传成功前钩子
    beforeAvatarUpload(file) {
      // console.log(file, "beforeImage");
      const isJPG = file.type === "image/jpg";
      const isPng = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      const isLt10M = file.size / 1024 / 1024 < 10;
      //  console.log(isLt10M)
      if (!isJPG && !isPng && !isJPEG) {
        this.$message.info("上传图片只能是 JPG,JPEG或png 格式!");
      }
      if (!isLt10M) {
        this.$message.info("上传图片大小不能超过 10MB!");
      }
      return (isJPG || isPng || isJPEG) && isLt10M;
    },

    handlePictureCardPreview(file) {
      console.log(file, "11111111");
      this.resultPicture = file.url;
      this.dialogVisible = true;
    },
    // 文件上传中处理
    handleUploadProgress(event, file, fileList) {
      // console.log(fileList);
      this.isUploading = true;
      if (this.fileList.length < 1) {
        return this.$message.info("超过上传数量");
      }
    },
    uploadSuccess(res, file, fileList) {
      // console.log(res, "res");
      // console.log(file, "file");
      // console.log(fileList, "fileList");
      this.referForm.achievementPath = res;
      this.fileList = {
        name: file.name,
        url: res,
      };

      this.$refs["imgUrl"].clearFiles(); //上传成功之后清除历史记录
    },
    uploadPicture(params) {
      // console.log("已经准备好上传图片", params);
      this.file = params.file;
      let raw = params.file;
      let image = {
        name: raw.name,
        size: raw.size,
        type: raw.type,
      };
      this.file_image = image;
      this.getOssConfigs(this.file_image, params.file);
    },

    // 上传截图
    uploadConfirm() {
      this.bankDialogVisible = false;
      // this.$message.success("你的支付信息已提交，请留意短信通知。");
      // this.getOssConfigs(this.file_image, this.file);
    },
    async changeStatus() {
      // console.log(SERVER_WS_URL);
      let { data: res } = await getWxConfig({
        pay_type: 4,
      });
    },
    async getOssConfigs(image, file) {
      let obj = {
        url: "",
        savefile: "",
      };
      await getBankInfoOss({ image: image })
        .then((res) => {
          console.log(res, "开始上传图片");
          if (res.data.code === 200) {
            let oss_url = res.data.config.host;
            let filename = res.data.config.file;
            let formData = new FormData();
            formData.append("OSSAccessKeyId", res.data.config.accessid);
            formData.append("policy", res.data.config.policy);
            formData.append("signature", res.data.config.signature);
            formData.append("filename", res.data.config.file);
            formData.append("key", res.data.config.savefile);
            formData.append("callback", res.data.config.callback);
            formData.append("success_action_status", 200);
            formData.append("file", file);
            // console.log(formData);
            upload(oss_url, formData)
              .then((ress) => {
                console.log(555555555);
                console.log(ress, "ress");
                if (ress.data.code != 200) {
                  return this.$message.error(ress.data.message);
                }
                this.resultPicture = filename + "?t=" + Date.parse(new Date());
                // this.$forceUpdate();
                obj = {
                  url: ress.data.picture_path,
                  savefile: res.data.config.savefile,
                };
                this.fileList.push(obj);
                let code = this.$store.state.indexIdentity;
                window.localStorage.setItem(
                  "sign_up_payfile_" +
                    +window.localStorage.getItem("phone" + code) +
                    code,
                  JSON.stringify(this.fileList)
                );
                this.$message.success({
                  message:
                    "您已上传成功，等待短信通知，审核通过后登录报名网址。",
                  duration: 5000,
                });
                this.changeStatus();
                this.hideUpload = this.fileList.length >= this.limitCount;
              })
              .catch((err) => {
                this.$message.error(err);
              });
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 下载证明资料图片
    handleDownload(file) {
      // console.log(file,'file22');
      window.location.href = file.url;
    },
    //删除图片
    handleRemove(file) {
      console.log(file, "file");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let getfile = file.url;
          // console.log(savefile.match(/^(?:[^\/]|\/\/)*/),'222222')；//获取域名
          let str = getfile.split(
            "https://yingdi-bank-info.oss-cn-beijing.aliyuncs.com/"
          ); //https://yingdi-achievement.oss-cn-beijing.aliyuncs.com/进行分割，
          // console.log(str, "str");
          let savefile = str[1];
          // console.log(savefile, "savefile");
          delPayingPic({ object: savefile }).then((res) => {
            // console.log(res, "delpic");
            if (res.data.code != 200) {
              return this.$message.error(res.data.message);
            }
            this.fileList.forEach((item, idx) => {
              // console.log(item.url == file.url);
              if (item.url == file.url) {
                this.fileList.splice(idx, 1);
                let code = this.$store.state.indexIdentity;
                window.localStorage.setItem(
                  "sign_up_payfile_" +
                    window.localStorage.getItem("phone" + code) +
                    code,
                  JSON.stringify(this.fileList)
                );
                this.$message.success("删除成功");
                this.hideUpload = this.fileList.length >= this.limitCount;
                window.localStorage.removeItem(
                  "bank_info" +
                    window.localStorage.getItem("phone" + code) +
                    code
                );
              }
            });
            // console.log(this.fileList);
          });
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
  },
};
</script>

<style  lang="scss" scoped>
@import "a/scss/btn";
.btn {
  padding-bottom: 0 !important;
}
.flex {
  display: flex;
}
::v-deep .hide {
  .el-upload--picture-card {
    display: none;
  }
  .el-upload-list__item div {
    height: 100%;
  }
}

.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;
    .cc {
      font-weight: 600;
      color: black;
    }
    .starIcon {
      color: red;
    }
  }
}
.choose {
  text-align: center;
  .img_choose {
    justify-content: space-around;
    img {
      width: 38%;
      cursor: pointer;
    }
  }

  .text_choose {
    font-size: 15px;
    margin: 20px 0 50px 0;
  }
  .btn .el-button {
    width: 120px !important;
  }
}
// .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>
