<template>
  <div style="background: white" v-if="api_show == true">
    <div class="out_box">
      <div class="big_box">
        <div class="pc">
          <div class="select">
            <el-select
              class="language_select"
              v-model="language_select"
              @change="change_value"
              placeholder="Select"
            >
              <el-option
                class="language_option"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="phone">
          <div class="sam_bottom">
            <img class="img" src="../../assets/images/sampay_home.png" alt="" />
            <div class="order_box">
              <div class="order_title">
                {{ ("el.usdt.order_no") }}
              </div>
              <div class="order_text">
                {{ dataForm.orderNo }}
              </div>
            </div>
          </div>
          <div class="select">
            <el-select
              class="language_select"
              v-model="language_select"
              @change="change_value"
              placeholder="Select"
            >
              <el-option
                class="language_option"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="box_left">
          <!-- pc端头部 -->
          <div class="head_left2">
            <div class="head_left_top">
              <img class="head_img" :src="dataForm.merchantIcon" alt="" />
              <!-- <img class="head_img" src="../../assets/images/htfx.png" alt=""> -->
            </div>
            <div class="head_left_bottom">
              <!-- <div class="order_box">
								<div class="order_title">
								{{ ('el.usdt.order_no') }}
								</div>
								<div class="order_text">
								{{ dataForm.orderNo }}
								</div>
							</div> -->
              <div class="time_title">
                {{ ("el.usdt.transfer_left") }}
              </div>
              <div class="time">
                {{ dataForm.endTime }}
              </div>
            </div>
          </div>
          <!-- 移动端头部 -->
          <div class="head_left">
            <div class="head_img_text">
              <img class="head_img" :src="dataForm.merchantIcon" alt="" />
              <!-- <img class="head_img" src="../../assets/images/htfx.png" alt=""> -->
              <!-- <div class="order_box">
										<div class="order_title">
										{{ ('el.usdt.order_no') }}
										</div>
										<div class="order_text">
										{{ dataForm.orderNo }}
										</div>
							</div> -->
            </div>
            <div class="head_time">
              <div class="time_title">
                {{ ("el.usdt.transfer_left") }}
              </div>
              <div class="time">
                {{ dataForm.endTime }}
              </div>
            </div>
          </div>
          <!-- 类型-pc端 -->
          <div class="box_type">
            <div class="box_type_center">
              <div class="box_type_text">
                <img class="img" src="../../assets/images/usdt2.png" alt="" />
                <div class="text">{{ dataForm.currencyName }}</div>
              </div>
            </div>
            <div class="box_type_right">
              <div class="box_type_text">
                {{ dataForm.tokenStandard }}
              </div>
            </div>
          </div>
          <div class="box_type_left">
            <div class="box_type_title">
              {{ ("el.usdt.amount") }}
            </div>
            <div class="box_type_text">
              {{ dataForm.orderAmount }}
            </div>
          </div>
          <!-- 类型-移动端 -->
          <div class="box_type2">
            <div class="box_type_bottom">
              <div class="box_type_center">
                <div class="box_type_text">
                  <img class="img" src="../../assets/images/usdt2.png" alt="" />
                  <div class="text">{{ dataForm.currencyName }}</div>
                  <div class="text2">
                    {{ dataForm.tokenStandard }}
                  </div>
                </div>
              </div>
            </div>
            <div class="box_type_left2">
              <div class="box_type_title">
                {{ ("el.usdt.amount") }}
              </div>
              <div class="box_type_text">
                {{ dataForm.orderAmount }}
              </div>
            </div>
          </div>
          <!-- 地址 -->
          <div class="address_title">
            {{ ("el.usdt.to_address") }}
          </div>
          <div class="address_text">
            <div class="text">
              {{ dataForm.receiptAddress }}
            </div>
            <!-- <button class="btn" @click="copy('0x82138e5C8D5A271d4B8279C2acD7983B95515829')">
									Copy
						</button> -->
            <el-icon
              style="cursor: pointer"
              :size="30"
              color="#002664"
              @click="copy(dataForm.receiptAddress)"
            >
              <DocumentCopy />
            </el-icon>
          </div>
          <!-- Hash -->
          <div class="hash_box">
            <span class="icon">*</span
            ><span class="hash_title"> {{ ("el.usdt.hash") }}</span>
          </div>
          <div class="hash_put">
            <input
              class="put"
              type="text"
              @input="put"
              v-model="hash_val"
              maxlength="100"
            />
            <div class="text_red" v-if="put_show">
              {{ ("el.usdt.put_message") }}
            </div>
          </div>
          <!-- 手机端-时间 -->
          <div class="head_time2">
            <div class="time_title">
              {{ ("el.usdt.transfer_left") }}
            </div>
            <div class="time">
              {{ dataForm.endTime }}
            </div>
          </div>
          <!-- 底部按钮 -->
          <div class="btn_box">
            <div>
              <button class="submit" @click="submit">
                {{ ("el.usdt.submit") }}
              </button>
            </div>
            <div>
              <button class="cancel" @click="cancel">
                {{ ("el.usdt.cancel") }}
              </button>
            </div>
          </div>
          <div class="btn_box2">
            <div>
              <button class="submit" @click="submit">
                {{ ("el.usdt.submit") }}
              </button>
            </div>
            <div>
              <button class="cancel" @click="cancel">
                {{ ("el.usdt.cancel") }}
              </button>
            </div>
          </div>
        </div>
        <div class="box_right">
          <div class="head_right">
            <el-select
              class="language_select"
              v-model="language_select"
              @change="change_value"
              placeholder="Select"
            >
              <el-option
                class="language_option"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="qr_box">
            <canvas
              :style="url ? '' : 'opacity: 0;'"
              ref="qrcodeCanvas"
            ></canvas>
            <div class="text">
              {{ ("el.usdt.qr_text") }}
            </div>
          </div>
          <!-- <div class="logo_bottom">
						<img class="img" src="../../assets//images/sampay.png" alt="">
					</div> -->
        </div>
        <!-- <div class="modal_box" v-if="busy">
<div class="modal_text_box">
<i class="fa fa-exclamation-triangle"></i>
<div class="modal_text">
{{ ('el.order.message8') }}
</div>
</div>
<div class="foot_btn" @click="back()">{{ ('el.order.return') }}</div>
</div> -->
      </div>
      <div class="img_order">
        <img class="img" src="../../assets//images/sampay.png" alt="" />
        <div class="order_box">
          <div class="order_title">
            {{ ("el.usdt.order_no") }}
          </div>
          <div class="order_text">
            {{ dataForm.orderNo }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import Language from "@/locale/language";
// import baseService from "@/service/baseService";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import QRCode from "qrcode";
import { onMounted, reactive, ref } from "vue";
// import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
let loadingInstanceall = <any>null; // 存储加载实例
let intervalId = ref<any>(null); // 用于存储定时器ID
let locale = ref("en");
const hash_val = ref<any>("");
const router = useRouter();
const language = ref<any>({});
const language_select = ref<any>("en");
const baseService = {}
const api_show = ref<any>(true);
let interval: ReturnType<typeof setInterval>; // 定义间隔计时器的类型
const put_show = ref<any>(false);
const options = ref<any>([
  {
    label: "EN",
    value: "en",
  },
  {
    label: "简体中文",
    value: "zh-cn",
  },
  {
    label: "繁体中文",
    value: "zh-tw",
  },
  {
    label: "Tiếng Việt",
    value: "vi",
  },
  {
    label: "ภาษาไทย",
    value: "th",
  },
  {
    label: "بالعربية",
    value: "ar",
  },
  {
    label: "Indonesia",
    value: "id",
  },
  {
    label: "한국어",
    value: "ko",
  },
  {
    label: "Español",
    value: "es",
  },
  {
    label: "भारत",
    value: "inr",
  },
]);
const dataForm = reactive({
  id: "",
  orderNo: "", //订单号
  orderAmount: "", //转账金额
  currencyName: "", //币种
  updateDate: "", //更新时间
  merchantIcon: "", //商户图标
  merchantName: "", //商户名称
  returnUrl: "", //返回地址
  endTime: "", //截止时间
  status: -1, //订单状态
  tokenStandard: "",
  receiptAddress: "", //hash
  verificationInfo: 1,
});
//全屏loading
function toggleLoading(show: any, text: string) {
  if (show) {
    // 如果需要显示加载动画且实例不存在，则创建它
    if (!loadingInstanceall) {
      loadingInstanceall = ElLoading.service({
        lock: true,
        target: ".big_box",
        text: text ? text : "loading...",
        background: "rgba(255, 255, 255, 1)",
        customClass: "custom-loading-class",
      });
    }
  } else {
    // 如果需要隐藏加载动画且实例存在，则关闭它
    if (loadingInstanceall) {
      loadingInstanceall.close();
      loadingInstanceall = null; // 重置实例变量，确保下次可以重新创建
    }
  }
}
const url = ref<string>("");
const route = useRoute();
const qrcodeCanvas = ref<HTMLCanvasElement | null>(null);
const orderNo_val = ref<any>("");
onMounted(() => {
  locale.value = "en";
  language_select.value = "en";
  // toggleLoading(true, ""); // 启动加载动画
  orderNo_val.value = route.query.orderNo;
  // getInfo(orderNo_val.value);
});
// 获取信息
function getInfo(orderNo: any) {
  // setTimeout(() => {
  // //全屏loading
  // api_show.value = true
  // toggleLoading(false, '');
  // let dd = 2
  // console.log(language)
  // router.replace({ name: 'token_success', query: { returnurl: '',order:'sp2164618918945',img:'' , text: dd == 2 ? language.value.el.usdt.text4 + 'Trc20'+ language.value.el.usdt.text5 : dd== 4 ? language.value.el.usdt.text6 : dd == 5 ? language.value.el.usdt.text7 : dd== 6 ? language.value.el.usdt.text8 : dd == 7 ? language.value.el.usdt.text9 : language.value.el.usdt.text} });
  // }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
  // return
  // toggleLoading(false, '');
  // api_show.value = true
  // url.value = '55555'
  // return
  baseService
    .get("/api/sammerchant/findTokenOrder", {
      orderNo: orderNo,
    })
    .then((res) => {
      // toggleLoading(false, '');
      // api_show.value = true
      // url.value = '55555'
      // return
      if (res.code == 0) {
        // 0创建 1提交 2取消
        if (res.data.customerStatus == 2) {
          router.replace({
            name: "token_fail",
            query: {
              returnurl: dataForm.returnUrl,
              text: language.value.el.usdt.text2,
              order: dataForm.orderNo,
              img: dataForm.merchantIcon,
            },
          });
          return;
        }
        Object.assign(dataForm, res.data);
        // 假设date是一个JavaScript Date对象，例如：new Date()
        const date_older = Number(res.data.endDate); //结束时间毫秒数
        const date_old: Date = new Date(Number(res.data.endDate));
        const year: number = date_old.getFullYear();
        const month: string = (date_old.getMonth() + 1)
          .toString()
          .padStart(2, "0");
        const day: string = date_old.getDate().toString().padStart(2, "0");
        const hours: string = date_old.getHours().toString().padStart(2, "0");
        const minutes: string = date_old
          .getMinutes()
          .toString()
          .padStart(2, "0");
        const seconds: string = date_old
          .getSeconds()
          .toString()
          .padStart(2, "0");
        const date = new Date().getTime();
        // console.log(date_older, '结束时间戳')//结束时间戳
        // console.log(date, '当前时间戳') //当前时间戳
        // dataForm.endTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
        dataForm.endTime = `${hours}:${minutes}:${seconds}`;
        if (dataForm.verificationInfo == 1) {
          if (dataForm.status == 0) {
            if (date < date_older) {
              interval = setInterval(() => {
                if (new Date().getTime() > date_older) {
                  clearInterval(interval);
                  router.replace({
                    name: "token_overtime",
                    query: {
                      returnurl: dataForm.returnUrl,
                      order: dataForm.orderNo,
                      img: dataForm.merchantIcon,
                    },
                  });
                }
              }, 1000);
              // setTimeout(() => {
              //全屏loading
              toggleLoading(false, "");
              //全屏遮罩层
              api_show.value = true;
              url.value = dataForm.receiptAddress;
              setTimeout(() => {
                QRCode.toCanvas(qrcodeCanvas.value, url.value, {
                  width: 250,
                  color: {
                    dark: "#FFFFFF", // 二维码颜色
                    light: "#002664", // 背景颜色
                  },
                });
              }, 100);
              // }, 2000);
            } else {
              // clearInterval(interval);
              router.replace({
                name: "token_overtime",
                query: {
                  returnurl: dataForm.returnUrl,
                  order: dataForm.orderNo,
                  img: dataForm.merchantIcon,
                },
              });
              setTimeout(() => {
                //全屏loading
                toggleLoading(false, "");
                api_show.value = true;
              }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
            }
          }
        } else {
          if (dataForm.status == 0) {
            if (dataForm.verificationInfo == 3) {
              toggleLoading(false, "");
              toggleLoading(true, language.value.el.usdt.text3);
              getInfo2(orderNo_val.value);
            } else {
              router.replace({
                name: "token_fail",
                query: {
                  returnurl: dataForm.returnUrl,
                  order: dataForm.orderNo,
                  img: dataForm.merchantIcon,
                  text:
                    dataForm.verificationInfo == 2
                      ? language.value.el.usdt.text4 +
                        dataForm.tokenStandard +
                        language.value.el.usdt.text5
                      : dataForm.verificationInfo == 4
                      ? language.value.el.usdt.text6
                      : dataForm.verificationInfo == 5
                      ? language.value.el.usdt.text7
                      : dataForm.verificationInfo == 6
                      ? language.value.el.usdt.text8
                      : dataForm.verificationInfo == 7
                      ? language.value.el.usdt.text9
                      : language.value.el.usdt.text,
                },
              });
              setTimeout(() => {
                //全屏loading
                toggleLoading(false, "");
              }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
            }
          } else if (dataForm.status == 1) {
            router.replace({
              name: "token_fail",
              query: {
                returnurl: dataForm.returnUrl,
                text: language.value.el.usdt.text,
                order: dataForm.orderNo,
                img: dataForm.merchantIcon,
              },
            });
            setTimeout(() => {
              //全屏loading
              toggleLoading(false, "");
            }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
          } else if (dataForm.status == 2) {
            // clearInterval(interval);
            if (dataForm.verificationInfo == 7) {
              //订单金额不匹配的页面逻辑
              router.replace({
                name: "token_mismatch",
                query: {
                  returnurl: dataForm.returnUrl,
                  order: dataForm.orderNo,
                  img: dataForm.merchantIcon,
                },
              });
              setTimeout(() => {
                //全屏loading
                toggleLoading(false, "");
                api_show.value = true;
              }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
            } else {
              router.replace({
                name: "token_success",
                query: {
                  returnurl: dataForm.returnUrl,
                  order: dataForm.orderNo,
                  img: dataForm.merchantIcon,
                },
              });
              setTimeout(() => {
                //全屏loading
                toggleLoading(false, "");
              }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
            }
          }
        }
        // else {
        // router.replace({ name: 'token_fail' ,query: { returnurl: dataForm.returnUrl }});
        // setTimeout(() => {
        // //全屏loading
        // toggleLoading(false, '');
        // }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
        // }
      } else {
        router.replace({
          name: "token_fail",
          query: {
            returnurl: dataForm.returnUrl,
            text:
              res.code == 20002
                ? language.value.el.usdt.text18
                : res.code == 20003
                ? language.value.el.usdt.text19
                : res.code == 20004
                ? language.value.el.usdt.text20
                : res.code == 20005
                ? language.value.el.usdt.text21
                : res.msg,
            order: dataForm.orderNo,
            img: dataForm.merchantIcon,
          },
        });
        setTimeout(() => {
          //全屏loading
          toggleLoading(false, "");
        }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
      }
    })
    .catch((error) => {
      router.replace({
        name: "token_fail",
        query: {
          returnurl: dataForm.returnUrl,
          text: "",
          order: dataForm.orderNo,
          img: dataForm.merchantIcon,
        },
      });
      // 处理请求错误，例如显示错误消息
      setTimeout(() => {
        //全屏loading
        toggleLoading(false, "");
      }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
      // 可以在这里显示用户友好的错误提示
      // alert('请求失败，请稍后重试。'); // 示例提示
    });
  // .finally(() => {
  // // 在适当的时候关闭加载动画
  // })
}
// 获取信息
function getInfo2(orderNo: any) {
  baseService
    .get("/api/sammerchant/findTokenOrder", {
      orderNo: orderNo,
    })
    .then((res) => {
      if (res.code == 0) {
        Object.assign(dataForm, res.data);
        // 假设date是一个JavaScript Date对象，例如：new Date()
        const date_older = Number(res.data.endDate); //结束时间毫秒数
        const date_old: Date = new Date(Number(res.data.endDate));
        const year: number = date_old.getFullYear();
        const month: string = (date_old.getMonth() + 1)
          .toString()
          .padStart(2, "0");
        const day: string = date_old.getDate().toString().padStart(2, "0");
        const hours: string = date_old.getHours().toString().padStart(2, "0");
        const minutes: string = date_old
          .getMinutes()
          .toString()
          .padStart(2, "0");
        const seconds: string = date_old
          .getSeconds()
          .toString()
          .padStart(2, "0");
        const date = new Date().getTime();
        // console.log(date_older,'结束时间戳')//结束时间戳
        // console.log(date,'当前时间戳') //当前时间戳
        // dataForm.endTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
        dataForm.endTime = `${hours}:${minutes}:${seconds}`;
        //创建订单
        if (dataForm.status == 0) {
          if (dataForm.verificationInfo == 3) {
            getInfo2(orderNo_val.value);
          } else {
            router.replace({
              name: "token_fail",
              query: {
                returnurl: dataForm.returnUrl,
                order: dataForm.orderNo,
                img: dataForm.merchantIcon,
                text:
                  dataForm.verificationInfo == 2
                    ? language.value.el.usdt.text4 +
                      dataForm.tokenStandard +
                      language.value.el.usdt.text5
                    : dataForm.verificationInfo == 4
                    ? language.value.el.usdt.text6
                    : dataForm.verificationInfo == 5
                    ? language.value.el.usdt.text7
                    : dataForm.verificationInfo == 6
                    ? language.value.el.usdt.text8
                    : dataForm.verificationInfo == 7
                    ? language.value.el.usdt.text9
                    : language.value.el.usdt.text,
              },
            });
            setTimeout(() => {
              //全屏loading
              toggleLoading(false, "");
            }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
          }
        } else if (dataForm.status == 1) {
          router.replace({
            name: "token_fail",
            query: {
              returnurl: dataForm.returnUrl,
              text: language.value.el.usdt.text,
              order: dataForm.orderNo,
              img: dataForm.merchantIcon,
            },
          });
          setTimeout(() => {
            //全屏loading
            toggleLoading(false, "");
          }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
        } else if (dataForm.status == 2) {
          if (dataForm.verificationInfo == 7) {
            //订单金额不匹配的页面逻辑
            router.replace({
              name: "token_mismatch",
              query: {
                returnurl: dataForm.returnUrl,
                order: dataForm.orderNo,
                img: dataForm.merchantIcon,
              },
            });
            setTimeout(() => {
              //全屏loading
              toggleLoading(false, "");
              api_show.value = true;
            }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
          } else {
            router.replace({
              name: "token_success",
              query: {
                returnurl: dataForm.returnUrl,
                order: dataForm.orderNo,
                img: dataForm.merchantIcon,
              },
            });
            setTimeout(() => {
              //全屏loading
              toggleLoading(false, "");
            }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
          }
        }
      } else {
        router.replace({
          name: "token_fail",
          query: {
            returnurl: dataForm.returnUrl,
            text:
              res.code == 20002
                ? language.value.el.usdt.text18
                : res.code == 20003
                ? language.value.el.usdt.text19
                : res.code == 20004
                ? language.value.el.usdt.text20
                : res.code == 20005
                ? language.value.el.usdt.text21
                : res.msg,
            order: dataForm.orderNo,
            img: dataForm.merchantIcon,
          },
        });
        setTimeout(() => {
          //全屏loading
          toggleLoading(false, "");
        }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
      }
    })
    .catch((error) => {
      clearInterval(interval);
      router.replace({
        name: "token_fail",
        query: {
          returnurl: dataForm.returnUrl,
          text: language.value.el.usdt.text,
          order: dataForm.orderNo,
          img: dataForm.merchantIcon,
        },
      });
      // 处理请求错误，例如显示错误消息
      setTimeout(() => {
        //全屏loading
        toggleLoading(false, "");
      }, 2000); // 假设3秒后完成某项操作，需要关闭加载动画
      // 可以在这里显示用户友好的错误提示
      // alert('请求失败，请稍后重试。'); // 示例提示
    });
  // .finally(() => {
  // // 在适当的时候关闭加载动画
  // })
}
const put = () => {
  if (!hash_val.value) {
    put_show.value = true;
  } else {
    put_show.value = false;
  }
};
//提交hash
const submit = () => {
  // console.log(hash_val.value)
  let hash = hash_val.value.replace(/\s/g, "");
  if (!hash) {
    put_show.value = true;
    hash_val.value = "";
    return;
  } else {
    put_show.value = false;
  }
  // console.log(hash)
  toggleLoading(true, language.value.el.usdt.text3);
  baseService
    .post("/api/sammerchant/commitHash", {
      hash: hash,
      orderNo: dataForm.orderNo,
    })
    .then((res) => {
      if (res.code == 0) {
        getInfo2(orderNo_val.value);
        // toggleLoading(true, language.value.el.usdt.text3);
      } else if (res.code == 10002) {
        // ElMessage.error('Hash已被使用');
        router.replace({
          name: "token_fail",
          query: {
            returnurl: dataForm.returnUrl,
            text: language.value.el.usdt.text10,
            order: dataForm.orderNo,
            img: dataForm.merchantIcon,
          },
        });
        toggleLoading(false, "");
      } else {
        router.replace({
          name: "token_fail",
          query: {
            returnurl: dataForm.returnUrl,
            text: res.msg,
            order: dataForm.orderNo,
            img: dataForm.merchantIcon,
          },
        });
        toggleLoading(false, "");
      }
    })
    .catch((error) => {
      toggleLoading(false, "");
      ElMessage.error(language.value.el.usdt.text11);
    })
    .finally(() => {
      // 不论成功或失败都会执行的代码
      clearInterval(interval); // 停止加载状态
      // 其他需要执行的清理逻辑
    });
};
//更换语言
function change_value(e: any) {
  locale.value = e;
  localStorage.setItem("token_language", e);
  language.value = Language();
}
//取消订单
const cancel = () => {
  ElMessageBox.confirm(
    language.value.el.order.message10,
    language.value.el.order.message11,
    {
      confirmButtonText: language.value.el.order.message12,
      cancelButtonText: language.value.el.order.message13,
      type: "warning",
    }
  ).then(() => {
    toggleLoading(true, language.value.el.usdt.text12);
    // 用户点击了确定按钮
    baseService
      .post("/api/sammerchant/customerTokenStatus", {
        orderNo: dataForm.orderNo,
        customerStatus: 2,
      })
      .then((res) => {
        if (res.code == 0) {
          ElMessage({
            message: language.value.el.order.message15,
            type: "success",
          });
          // getInfo(dataForm.orderNo)
          //跳转页面逻辑
          // clearInterval(intervalId.value);
          // setTimeout(() => {
          window.location.href = dataForm.returnUrl;
          // }, 1000);
          setTimeout(() => {
            toggleLoading(false, "");
          }, 3000);
        } else {
          // router.replace({ name: 'token_fail', query: { returnurl: dataForm.returnUrl, text: '订单取消失败' } });
          // setTimeout(() => {
          // toggleLoading(false, '');
          // }, 2000);
          toggleLoading(false, "");
          ElMessage.warning({
            message: language.value.el.usdt.text13,
            duration: 1000,
          });
        }
      })
      .catch((error) => {
        // router.replace({ name: 'token_fail', query: { returnurl: dataForm.returnUrl, text: '订单取消失败' } });
        // setTimeout(() => {
        // toggleLoading(false, '');
        // }, 2000);
        toggleLoading(false, "");
        ElMessage.warning({
          message: language.value.el.usdt.text13,
          duration: 1000,
        });
      });
  });
};
// 复制
const copy = (val: string) => {
  if (val) {
    try {
      navigator.clipboard.writeText(val || "");
      ElMessage({
        message: language.value.el.order.message16,
        type: "success",
      });
    } catch (err) {
      ElMessage.error(language.value.el.order.message17);
    }
  }
};
</script>
<style scoped lang="scss">
$primary-color: #002664;
@media only screen and (min-width: 780px) {
  .out_box {
    width: 100%;
    min-height: 110vh;
    background-image: url("../../assets/images/token_bg.jpg");
    background-size: cover;
    /* 让背景图片完全覆盖容器 */
    background-position: center;
    /* 图片居中显示 */
    padding-top: 10vh;
    .img_order {
      width: 100%;
      // border: 1px solid;
      text-align: right;
      .img {
        width: 14vw;
        margin-right: 1vw;
      }
      .order_box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 1.8vw;
        margin-top: 10px;
        margin-right: 1vw;
      }
      .order_title {
        margin-right: 15px;
      }
      .order_text {
        // font-weight: bold;
      }
    }
  }
  .big_box {
    width: 70%;
    min-height: 80vh;
    border-radius: 20px;
    display: none;
    margin: 0 auto;
    display: flex;
    position: relative;
    box-shadow: 6px 6px 11px rgba(0, 0, 0, 0.5);
    // border: 1px soid red;
    /* 水平偏移 5px, 垂直偏移 5px, 模糊半径 10px, 阴影颜色为半透明黑色 */
    .phone {
      display: none;
    }
    .select {
      display: none;
    }
    .box_left {
      width: 63%;
      padding: 3% 2% 4% 5%;
      background: white;
      position: relative;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      .head_left2 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // border: 1px solid red;
        .head_left_top {
          width: 25%;
          // display: flex;
          // align-items: flex-end;
          // justify-content: space-between;
          // border: 1px solid;
          .head_img {
            width: 100%;
          }
        }
        .head_left_bottom {
          width: 8vw;
          // border: 1px solid;
          // display: flex;
          // align-items: flex-end;
          // justify-content: space-between;
          // .order_box {
          // display: flex;
          // align-items: center;
          // font-size: 1.4vw;
          // margin-top: 10px;
          // .order_text {
          // font-weight: bold;
          // }
          // }
          .time_title {
            width: 8vw;
            font-size: 1.1vw;
          }
          .time {
            width: 8vw;
            font-size: 1.5vw;
            font-weight: bold;
            margin-top: 3px;
            color: #8a8989;
          }
        }
      }
      // 头部
      .head_left {
        display: none;
        width: 100%;
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        .head_img_text {
          .head_img {
            width: 13vw;
          }
        }
        .head_time {
          .time_title {
            font-size: 1.1vw;
          }
          .time {
            font-size: 1.5vw;
            font-weight: bold;
            margin-top: 3px;
            color: #8a8989;
          }
        }
      }
      .box_type_left {
        width: 100%;
        margin-top: 5vh;
        text-align: center;
        .box_type_title {
          font-size: 1.1vw;
        }
        .box_type_text {
          // margin-top: 5px;
          font-weight: bold;
          color: #910012;
          font-size: 2.7vw;
          text-align: center;
        }
      }
      // 类型
      .box_type {
        width: 100%;
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.2vw;
        // border: 1px solid;
        .box_type_center {
          // .box_type_title {
          // font-size: 1.2vw;
          // text-align: center;
          // }
          margin-right: 5px;
          .box_type_text {
            // margin-top: 10px;
            font-weight: bold;
            // text-align: center;
            display: flex;
            align-items: center;
            .img {
              width: 1.5vw;
              height: 1.5vw;
              margin-right: 5px;
            }
            .text {
              font-size: 1.3vw;
            }
          }
        }
        .box_type_right {
          // .box_type_title {
          // font-size: 1.2vw;
          // }
          .box_type_text {
            // margin-top: 10px;
            // font-weight: bold;
            font-size: 1.4vw;
            text-align: center;
            // border: 1px solid red;
            padding: 5px 7px;
            border-radius: 10px;
            background: #efefef;
          }
        }
      }
      .box_type2 {
        display: none;
      }
      // 地址
      .address_title {
        width: 100%;
        font-size: 1.1vw;
        margin-top: 5vh;
      }
      .address_text {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1vh;
        .text {
          width: 85%;
          font-size: 1.2vw;
          font-weight: bold;
          word-wrap: break-word;
          /* 允许长单词换行 */
          overflow-wrap: break-word;
          /* 新标准 */
        }
        .btn {
          width: 100px;
          height: 30px;
          border: none;
          cursor: pointer;
          background: $primary-color;
          color: white;
          border-radius: 5px;
          font-size: 1vw;
        }
      }
      /* hssh */
      .hash_box {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 5vh;
        .icon {
          color: #bd383e;
          font-size: 1.3vw;
          margin-right: 5px;
          font-weight: bold;
        }
        .hash_title {
          font-size: 1.1vw;
        }
      }
      .hash_put {
        width: 100%;
        .put {
          width: 100%;
          height: 50px;
          font-size: 1.5vw;
          padding: 0 20px;
          margin-top: 10px;
          border-radius: 10px;
        }
        .text_red {
          color: #910012;
          font-size: 1.1vw;
          margin-top: 5px;
        }
      }
      .head_time2 {
        display: none;
      }
      .btn_box {
        width: 100%;
        text-align: center;
        margin-top: 10vh;
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        // position: absolute;
        // bottom: 8vh;
        // left: 7%;
        // border: 1px solid;
        .submit {
          width: 35%;
          background: #002664;
          height: 35px;
          color: white;
          font-size: 1.1vw;
          border: 1px solid #002664;
          border-radius: 5px;
          cursor: pointer;
        }
        .cancel {
          width: 35%;
          background: white;
          height: 35px;
          font-size: 1.1vw;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          margin-top: 3vh;
        }
      }
      .btn_box2 {
        display: none;
      }
    }
    .sam_bottom {
      display: none;
    }
    .box_right {
      width: 37%;
      padding: 2% 1%;
      background: $primary-color;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      .head_right {
        width: 100%;
        text-align: right;
        .language_select {
          width: 70px;
          margin-right: 2vw;
          // background: white;
          .language_option {
            // background: white;
          }
        }
      }
      .qr_box {
        width: 100%;
        margin-top: 10vh;
        text-align: center;
        .text {
          color: white;
          margin-top: 5%;
          font-size: 1vw;
        }
      }
      .logo_bottom {
        width: 30%;
        text-align: right;
        position: absolute;
        right: 2vw;
        bottom: 4vh;
        img {
          margin-top: 210px;
          // margin-right: 2vw;
          width: 13vw;
        }
      }
    }
  }
  ::v-deep .el-select .el-input__inner {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }
  ::v-deep .el-input__wrapper {
    background-color: white;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }
  ::v-deep .el-input__wrapper:hover {
    background-color: white;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }
}
/* 针对手机屏幕 */
@media screen and (max-width: 779px) {
  .out_box {
    .img_order {
      display: none;
      .img {
        width: 14vw;
        margin-right: 1vw;
      }
      .order_box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 1.4vw;
        margin-top: 10px;
        margin-right: 1vw;
      }
      .order_title {
        margin-right: 15px;
      }
      .order_text {
        // font-weight: bold;
      }
    }
  }
  .big_box {
    width: 100%;
    min-height: 100vh;
    padding: 1vh 5vw 3vh 5vw;
    background: $primary-color;
    .pc {
      display: none;
    }
    .phone {
      display: flex;
      align-items: center;
      padding-top: 2vh;
      .sam_bottom {
        width: 100%;
        text-align: left;
        // border:1px solid white;
        .img {
          width: 40%;
        }
        .order_box {
          display: flex;
          align-items: center;
          // margin-top: 10px;
          font-size: 4vw;
          color: white;
        }
        .order_title {
          margin-right: 2vw;
        }
        .order_text {
          // font-weight: bold;
        }
      }
      .select {
        // width: 100%;
        // text-align: right;
        // border: 1px solid white;
        .language_select {
          width: 19vw;
          border-radius: 5px;
          border: 1px solid white;
        }
      }
    }
    .box_left {
      width: 100%;
      min-height: 87vh;
      padding: 2vh 5vw;
      margin: 0 auto;
      margin-top: 1vh;
      background: white;
      position: relative;
      border-radius: 10px;
      .box_type_left {
        display: none;
      }
      .head_left2 {
        display: none;
      }
      // 头部
      .head_left {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // border: 1px solid;
        .head_img_text {
          // border: 1px solid;
          text-align: center;
          .head_img {
            width: 30vw;
          }
        }
        .head_time {
          display: none;
          .time_title {
            font-size: 1.1vw;
          }
          .time {
            font-size: 1.5vw;
            font-weight: bold;
            margin-top: 3px;
            color: #8a8989;
          }
        }
      }
      // 类型
      .box_type2 {
        width: 100%;
        // font-size: 1.2vw;
        .box_type_left2 {
          margin-top: 25px;
          .box_type_title {
            text-align: center;
            font-size: 4vw;
          }
          .box_type_text {
            text-align: center;
            height: 4vh;
            margin-top: 5px;
            font-weight: bold;
            color: #910012;
            font-size: 7vw;
          }
        }
        .box_type_bottom {
          // margin-top: 5%;
          .box_type_center {
            .box_type_title {
              font-size: 3.8vw;
              text-align: center;
            }
            .box_type_text {
              margin-top: 5px;
              height: 4vh;
              display: flex;
              align-items: center;
              justify-content: center;
              .img {
                width: 5vw;
                height: 5vw;
                // margin-right: 2vw;
              }
              .text {
                margin-right: 2vw;
                margin-left: 2vw;
                font-size: 4vw;
                font-weight: bold;
              }
              .text2 {
                font-size: 4vw;
                background: #efefef;
                padding: 0.5vh 2vw;
                border-radius: 10px;
              }
            }
          }
        }
      }
      .box_type {
        display: none;
      }
      // 地址
      .address_title {
        width: 100%;
        font-size: 3.8vw;
        margin-top: 10%;
      }
      .address_text {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        .text {
          width: 80%;
          font-size: 4vw;
          font-weight: bold;
          word-wrap: break-word;
          /* 允许长单词换行 */
          overflow-wrap: break-word;
          /* 新标准 */
          margin-right: 5%;
        }
        .btn {
          width: 60px;
          height: 30px;
          border: none;
          background: $primary-color;
          color: white;
          border-radius: 5px;
          font-size: 3.5vw;
        }
      }
      /* hssh */
      .hash_box {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 10%;
        .icon {
          color: #bd383e;
          font-size: 3.8vw;
          margin-right: 5px;
          font-weight: bold;
        }
        .hash_title {
          font-size: 3.8vw;
        }
      }
      .hash_put {
        width: 100%;
        .put {
          width: 100%;
          height: 40px;
          font-size: 3.8vw;
          padding: 0 20px;
          margin-top: 10px;
          border-radius: 10px;
        }
        .text_red {
          color: #bd383e;
          font-size: 3.8vw;
          margin-top: 5px;
        }
      }
      .head_time2 {
        width: 100%;
        margin-top: 5vh;
        .time_title {
          width: 100%;
          text-align: center;
          font-size: 3.8vw;
        }
        .time {
          width: 100%;
          margin-top: 1%;
          text-align: center;
          font-size: 6vw;
          font-weight: bold;
          color: #8a8989;
        }
      }
      .btn_box {
        display: none;
      }
      .btn_box2 {
        width: 70%;
        margin-left: 15%;
        margin-top: 20%;
        // position: absolute;
        // bottom: 10vh;
        // left: 15%;
        .submit {
          width: 100%;
          background: #002664;
          height: 4vh;
          color: white;
          font-size: 4vw;
          border: 1px solid #002664;
          border-radius: 5px;
        }
        .cancel {
          width: 100%;
          background: white;
          height: 4vh;
          font-size: 4vw;
          border: none;
          border-radius: 5px;
          margin-top: 10px;
          color: rgb(73, 70, 70);
        }
      }
    }
    .box_right {
      display: none;
    }
  }
  ::v-deep .el-input__wrapper {
    background-color: #002664 !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }
  ::v-deep .el-input__inner {
    color: white;
  }
  ::v-deep .el-select .el-input .el-select__caret {
    color: white;
  }
}
</style>
