<template xmlns="http://www.w3.org/1999/html">
  <div>
    <div v-if="showHomeAndroid == false" class="contact_view">
      <div class="contact_view_title">联系我们</div>
      <div class="contact_view_bar"></div>

      <form action="https://formspree.io/f/mrbzdeeg">
        <div class="contact_view_form">
          <div class="form_title">请留下您的联系方式</div>
          <div class="row">
            <div class="label_input">
              <label for="qq">QQ</label><input id="qq" type="text" name="qq"/>
            </div>
            <div class="label_input">
              <label for="wx">微信</label
              ><input id="wx" type="text" name="微信"/>
            </div>
          </div>
          <div class="row">
            <div class="label_input">
              <label for="phone">手机号码</label
              ><input id="phone" type="text" name="手机号码"/>
            </div>
            <div class="label_input">
              <label for="email">邮箱</label
              ><input id="email" type="text" name="email"/>
            </div>
          </div>
          <div class="disp">
            <div class="alert">请至少选择一种</div>
            <button class="form_btn" type="submit">完成</button>
          </div>
        </div>
        <div class="contact_view_message">
          <div class="contact_view_message_div">
            <div class="bg">
              <textarea name="留言" type="text"></textarea>
              <div class="message_title">留言板</div>
            </div>
          </div>
          <div class="contact_view_message_btn">
            <button class="message_btn" type="submit">保存草稿</button>
            <button class="message_btn2" type="submit">发送留言</button>
          </div>
        </div>
      </form>

      <div class="cantact">
        <div class="cantact_bar"></div>
        <div class="cantact_item">
          <div @mouseenter="ShowBOX(i.title)"
               @mouseleave="IsShowBOX(i.title)" v-for="i in cantact_Icon_List" class="contact_item_box">
            <a :href="i.url">
              <div style="width: 100%; height: 100%"><img :src="i.icon" alt=""/></div>
            </a>
            <div v-if="i.imgshow" class="IMGBOX">
              <img :src="i.img" alt="i.title">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showHomeAndroid == true" class="contact_view_android">
      <div class="logo_center">
        <img src="@/assets/contact_android/raylinx_white.png" alt="raylinx.com">
      </div>
      <div class="contact_form_div">
        <form action="https://formspree.io/f/mrbzdeeg">
          <div class="contact_form_div_title">联系我们Contact Us</div>
          <div class="contact_form_div_textarea">
            <div class="bg_input">
              <div class="input_box">
                <label for="qq"><span>Q</span><span class="label_span_right">Q</span></label><input id="qq" type="text"
                                                                                                    name="qq"/>
              </div>
              <div class="input_box">
                <label for="wexin"><span>微</span><span class="label_span_right">信</span></label><input id="wexin"
                                                                                                         type="text"
                                                                                                         name="微信"/>
              </div>
              <div class="input_box">
                <label for="phone">手机号码</label><input id="phone" type="text" name="phone"/>
              </div>
              <div class="input_box">
                <label for="email"><span>邮</span><span class="label_span_right">箱</span></label><input id="email"
                                                                                                         type="text"
                                                                                                         name="email"/>
                <div type="submit" class="input_btn">完成</div>
              </div>
            </div>
            <div class="message_title2">请留下您的联系方式</div>
          </div>
          <div class="contact_form_div_textarea">
            <div class="bg">
              <textarea name="留言" type="text"></textarea>
              <div class="message_title">留言板</div>
              <div class="textarea_btn_box">
                <div type="submit" class="textarea_btn btn-left">保存草稿</div>
                <div type="submit" class="textarea_btn btn-right">发送留言</div>
              </div>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHomeAndroid: false,
      screenWidth: null,
      cantact_Icon_List: [
        {index: "1", icon: require("@/assets/Home_IMG/TG1.png"), url: "https://t.me/raylinxjim"},
        {
          index: "2",
          icon: require("@/assets/cases/pay1.png"),
          url: "/contact",
          title: "微信",
          img: require("@/assets/widgetApp/weixi.png"),
          imgshow: false,
        },
        {
          index: "3",
          icon: require("@/assets/Home_IMG/whatsApp1.png"),
          url: "https://api.whatsapp.com/send/?phone=12125188846&text&type=phone_number&app_absent=0t",
        },
        {
          index: "4",
          icon: require("@/assets/Home_IMG/fb2.png"),
          url: "https://www.facebook.com/profile.php?id=61565734855142"
        },
        {index: "5", icon: require("@/assets/pricing/twiite.png"), url: "/contact"},
        {index: "5", icon: require("@/assets/pricing/whatsApp.png"), url: "https://api.whatsapp.com/send/?phone=12125188846&text&type=phone_number&app_absent=0"},
        {index: "5", icon: require("@/assets/pricing/email.png"), url: "/contact"},
        {index: "5", icon: require("@/assets/pricing/ins.png"), url: "https://www.instagram.com/raylinxcloud/"},
      ],
    };
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;// 在客户端设置
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  methods: {
    ShowBOX(title) {
      for (let i = 0; i < this.cantact_Icon_List.length; i++) {
        if (this.cantact_Icon_List[i].title === title && this.cantact_Icon_List[i].img != null) {
          this.cantact_Icon_List[i].imgshow = true;
        } else if (this.cantact_Icon_List[i].title === title) {
          this.cantact_Icon_List[i].imgshow = false;
        }
      }
    },
    IsShowBOX(title) {
      for (let i = 0; i < this.cantact_Icon_List.length; i++) {
        if (this.cantact_Icon_List[i].title === title && this.cantact_Icon_List[i].img != null) {
          this.cantact_Icon_List[i].imgshow = false;
          break;  // Stop the loop once the correct item is found and processed
        }
      }
    },
    bodyScale() {
      var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      if(devicewidth<=1600){
        var scale = devicewidth / 1600; // 分母——设计稿的尺寸
        document.body.style.zoom = scale; //放大缩小相应倍数
      }
    },
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        if (val >= 800) {
          this.bodyScale();
          this.showHomeAndroid = false;
        } else if (val < 800) {
          this.showHomeAndroid = true;
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>


.contact_view_android {
  background: url("@/assets/contact_android/contact_bg.jpg") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 1000px;
  //padding-top: 3%;

  .logo_center {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding-top: 12%;

    img {
      width: 200px;
      height: 200px;
    }
  }

  .contact_form_div {
    margin-top: 20%;
  }

  .contact_form_div_title {
    color: #ffffff;
    font-size: 20px;
    text-align: center;
  }

  .contact_form_div_textarea {
    width: 90%;
    margin: 0 auto;

    .message_title2 {
      color: #1f8fcc;
      font-size: 20px;
      text-align: center;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .bg_input {
      background: rgba(255, 255, 255, 0.59);
      width: 100%;
      min-height: 150px;
      position: relative;
      margin-top: 15%;
      padding: 12px 24px 24px 24px;

      .input_box {
        margin-top: 15px;
        display: flex;

        label {
          width: 75px;
          display: block;
          color: #1f8fcc;
          font-weight: bold;
          font-size: 18px;
          margin-right: 10px;
        }

        input {
          border: none;
          background: #1f8fcc;
          padding: 5px;
          color: #ffffff;
        }

        .input_btn {
          background: #1f8fcc;
          color: #ffffff;
          width: 70px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          margin-left: 10px;
        }

        .label_span_right {
          float: right;
        }
      }
    }

    .bg {
      background: #ffffff52;
      width: 100%;
      height: 200px;
      position: relative;

      textarea {
        background: #ffffff52;
        border: none;
        width: 100%;
        height: 100%;

      }

      .textarea_btn_box {
        position: relative;
        display: flex;
      }

      .textarea_btn {
        background: #ffffff;
        border: none;
        color: #00bbff;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
      }

      .btn-left {
        position: absolute;
        left: 0;
      }

      .btn-right {
        position: absolute;
        right: 0;
      }

      .message_title {
        position: absolute;
        bottom: 10%;
        left: 40%;
        color: #00bbff6b;
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
}

.disp {
  display: flex;
}

.contact_view {
  width: 100%;
  min-height: 600px;
  padding-top: 7%;

  .contact_item_box {
    position: relative;
  }

  .IMGBOX {
    width: 150px;
    height: 150px;
    box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);
    position: absolute;
    top: -150px;
    left: -30px;
    img {
      width: 150px !important;
      height: 150px !important;
    }
  }

  &_title {
    font-size: 30px;
    text-align: center;
    //line-height: 2;
    margin-bottom: 1%;
  }

  &_bar {
    background: rgb(0, 157, 255);
    width: 40%;
    height: 3px;
    margin: 0 auto 2% auto;
  }

  &_form {
    background-color: #027bff;
    width: 50%;
    margin: 0 auto;
    position: relative;

    .form_title {
      color: #fff;
      font-size: 18px;
      text-align: center;
      line-height: 2;
    }

    .row {
      display: flex;
      margin: 1% auto 3% auto;
      width: 70%;
    }

    .alert {
      width: 200px;
      margin: 0 auto;
      color: #fff;
      text-align: center;
      font-size: 15px;
    }

    .form_btn {
      background-color: #fff;
      border: none;
      color: #027bff;
      padding: 2px 10px;
      cursor: pointer;
      position: absolute;
      right: 10px;
      bottom: 5px;
    }

    .label_input {
      // margin-right: 50px;
      display: flex;
    }

    label {
      display: block;
      color: #fff;
      text-align: right;
      width: 70px;
      margin-right: 10px;
    }

    input {
      border: none;
      padding: 3px;
    }

    input:focus {
      outline: none;
    }
  }

  .message_title {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #027bff;
    font-size: 30px;
  }

  .message_btn {
    display: block;
    border-radius: 0;
    border: none;
    background-color: #027bff;
    padding: 5px 20px;
    margin-top: 10px;
    color: #fff;
    position: absolute;
    bottom: 35px;
    right: 15%;
    cursor: pointer;
  }

  .message_btn2 {
    display: block;
    border-radius: 0;
    border: none;
    background-color: #027bff;
    padding: 5px 20px;
    margin-top: 10px;
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 15%;
    cursor: pointer;
  }

  &_message {
    width: 50%;
    margin: 2% auto 2% auto;
    display: flex;
    position: relative;

    .contact_view_message_div {
      width: 70%;
      min-height: 300px;
      box-shadow: 0px 4px 10px rgba(0, 213, 255, 0.726);

      .bg {
        width: 100%;
        min-height: 300px;

        opacity: 0.5; /* 设置透明度，使背景图片变淡 */
        position: relative;

        textarea {
          width: 100%;
          height: 300px;
          box-sizing: border-box;
          background-image: url("@/assets/pricing/kefu.png");
          background-repeat: no-repeat;
          background-size: 55% 70%;
          background-position: 12px 100%;
          background-color: #fff;
          border: none;
          resize: none; /* 禁止用户调整大小 */
          overflow: auto; /* 当内容超出时，自动显示滚动条 */
          white-space: pre-wrap; /* 保留空格和换行符，文本自动换行 */
          word-wrap: break-word; /* 允许在单词内部进行换行 */
          word-break: break-all; /* 在任何字符之间进行换行 */
          padding: 12px;
        }

        textarea:focus {
          outline: none;
        }
      }
    }
  }
}

.cantact {
  &_bar {
    height: 3px;
    width: 50%;
    background-color: rgb(0, 157, 255);
    margin: 0 auto;
  }

  .cantact_item {
    display: flex;
    width: 58%;
    margin: 1% auto;

    div {
      margin: 0 2% 0 2%;
    }

    img {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
