<template>
  <div class="tailBox">
    <div class="taillong">
      <img
        src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/LOGO1.png"
        alt
      />
    </div>

    <div class="tiemBox">
      <div class="taolIconBox">
        <div class="taolIconText">
          {{ characters == 1 ? "关注我们" : "follow Us" }}
        </div>
        <div class="iconBox">
          <img
            src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/f.png"
            alt
          />
          <img
            src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/o.png"
            alt
          />
          <img
            src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/ft.png"
            alt
          />
          <img
            src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/x.png"
            alt
          />
        </div>
      </div>

      <div class="contentBox">
        <div class="taolIconText">
          {{ characters == 1 ? "联系我们" : "Contact us" }}
        </div>
        <!-- <div class="contentInput">
          <el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
        </div>
        <div class="contentInput">
          <el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input>
        </div>
        <div class="contentInput">
          <el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input>
        </div>
        <div class="subBtn" @click="submit()">
          {{ characters == 1 ? '提交' : 'Submit' }}
        </div> -->
        <el-form v-if="showForm" ref="form" :rules="rules1" :model="form">
          <el-form-item class="width" prop="userName">
            <el-input
              v-model="form.userName"
              maxlength="10"
              :placeholder="characters == 1 ? '姓名' : 'Name'"
            ></el-input>
          </el-form-item>
          <el-form-item class="width" prop="phone">
            <el-input
              v-model="form.phone"
              :placeholder="characters == 1 ? '手机' : 'Phone'"
            ></el-input>
          </el-form-item>
          <el-form-item class="width" prop="email">
            <el-input v-model="form.email" placeholder="Email"></el-input>
          </el-form-item>
          <el-button class="subBtn1" type="primary" @click="submit()">{{
            characters == 1 ? "提 交" : "Submit"
          }}</el-button>
        </el-form>
      </div>

      <div class="rqCodeBox">
        <div class="phone">TEL:+86 152-1093-7300</div>
        <div class="site">
          {{
            characters == 1
              ? "北京市海淀区中关村南大街12号农业科学院信息楼311室"
              : "311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing"
          }}
        </div>
        <div class="phone" v-if="characters == 1">周女士 +65 9422 2858</div>
        <div class="phone" v-if="characters != 1">Chow +65 9422 2858</div>
        <div class="site">
          {{
            characters == 1
              ? "新加坡北桥路111号，半岛广场07-11号，邮编179098"
              : "111 North Bridge Road, #07-11, Penisula Plaza, Singapore 179098"
          }}
        </div>
        <div class="rqCodeTiemBox">
          <div class="rqCodeTiem">
            <div class="rqcode">
              <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/wechat.png" alt /> -->
              <img
                src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/vx.jpg"
                alt
              />
            </div>
            <div class="rqtext">Wechat</div>
          </div>
          <div class="rqCodeTiem1">
            <div class="rqcode">
              <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/tiktok.png" alt /> -->
              <img
                src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/dy.png"
                alt
              />
            </div>
            <div class="rqtext">Tiktok</div>
          </div>
        </div>
      </div>
    </div>

    <div class="tailText">
      <!-- © 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号 -->
      © 2021 Copyright 北京邃芒科技有限公司 版权所有
      <a href="https://beian.miit.gov.cn">京ICP备2023005136号-1</a>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      userName: "",
      phone: "",
      email: "",
      form: {
        userName: "",
        phone: "",
        email: "",
      },
      rules: {
        userName: [
          {
            required: true,
            min: 1,
            max: 10,
            message: "此项必填，内容最大10个字符!",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            trigger: "change",
            message: "请先输手机号",
            trigger: "blur",
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
              let phone = /^1[35789]\d{9}$/;
              if (value && !phone.test(value)) {
                callback("抱歉，请输入正确的手机号");
              }
              callback(errors);
            },
          },
        ],
        email: [
          {
            required: true,
            trigger: "change",
            message: "请输入邮箱!",
            trigger: "blur",
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
              let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
              if (value && !email.test(value)) {
                callback("抱歉，请输入正确的邮箱");
              }
              callback(errors);
            },
          },
        ],
      },
      rulesEnglish: {
        userName: [
          {
            required: true,
            min: 1,
            max: 10,
            message: "This item is required !",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            trigger: "change",
            message: "Please enter your cell phone number",
            trigger: "blur",
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              let phone = /^1[35789]\d{9}$/;
              if (value && !phone.test(value)) {
                callback("Sorry, please enter the correct cell phone number");
              }
              callback(errors);
            },
          },
        ],
        email: [
          {
            required: true,
            trigger: "change",
            message: "Please enter email!",
            trigger: "blur",
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
              if (value && !email.test(value)) {
                callback("Sorry, please enter the correct email address");
              }
              callback(errors);
            },
          },
        ],
      },
      rules1: null,
      showForm: true,
    };
  },
  methods: {
    submit() {
      // let phone = /^1[35789]\d{9}$/;
      // if (this.userName == '') {
      //   this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name');
      //   return;
      // } else if (!phone.test(this.phone)) {
      //   this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number');
      //   return;
      // } else if (this.email == '') {
      //   this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address');
      //   return;
      // }
      // let params = {
      //   mallName: this.email, //邮箱
      //   applicant: this.userName, //姓名
      //   phone: this.phone //电话
      // };
      this.$refs.form.validate((valid) => {
        console.log(valid);
        if (valid) {
          let params = {
            mallName: this.form.email, //邮箱
            applicant: this.form.userName, //姓名
            phone: this.form.phone, //电话
          };
          this.$axios({
            method: "post",
            url: "/C/api/wxMallApply/add",
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
            },
            data: params,
          })
            .then((res) => {
              this.email = "";
              this.userName = "";
              this.phone = "";
              this.form.email = "";
              this.form.userName = "";
              this.form.phone = "";
              this.$message.success(
                this.characters == 1 ? "提交成功" : "submit successfully"
              );
            })
            .catch((err) => {
              this.$message.error(err.message);
            });
        }
      });
    },
  },
  created() {
    this.rules1 = this.rules;
  },
  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters,
    }),
  },

  watch: {
    characters: function (newValue) {
      this.showForm = false;
      if (newValue === 1) {
        this.rules1 = this.rules;
      } else {
        this.rules1 = this.rulesEnglish;
      }
      setTimeout(() => {
        this.showForm = true;
      }, 100);
    },
  },
};
</script>

<style lang="scss" scoped>
.tailBox {
  overflow: hidden;
  height: 508px;
  background: #f1f4f7;
  // padding-bottom: 54px;

  .taillong {
    width: 168px;
    height: 50px;
    margin-top: 20px;
    margin-left: 360px;
    img {
      width: 168px;
      height: 50px;
    }
  }
  .tiemBox {
    overflow: hidden;
    margin-top: 20px;
  }
  .taolIconBox {
    margin-left: 380px;
    float: left;
  }
  .taolIconText {
    margin-top: -20px;
    font-size: 14px;
    font-family: Inter;
    font-weight: 400;
    color: #323232;
    line-height: 62px;
  }
  .iconBox {
    display: flex;
    justify-content: space-between;
    width: 124px;
    img {
      width: 24px;
      height: 24px;
    }
  }
  .contentBox {
    // position: absolute;
    // margin-top: 120px;
    float: left;
    margin-left: 260px;
    .contentInput {
      width: 286px;
      height: 36px;
      // background: #ffffff;
      text-align: center;
      margin-bottom: 11px;
      input {
        width: 200px;
        height: 36px;
      }
      input::placeholder {
        font-weight: 400;
        color: #949494;
      }
    }
    .subBtn {
      width: 140px;
      height: 48px;
      background: #ffffff;
      border-radius: 24px;
      text-align: center;
      line-height: 48px;
      margin-top: 24px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      &:hover {
        color: #fff;
        background-color: #16e9d6;
      }
    }
    ::v-deep .el-form-item {
      width: 300px;
      margin-bottom: 20px;
    }
    .subBtn1 {
      border: none;
      width: 140px;
      height: 48px;
      color: #191919;
      // margin-top: 15px;
      background: #ffffff;
      border-radius: 24px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      &:hover {
        color: #fff;
        background-color: #16e9d6;
      }
    }
  }
  .rqCodeBox {
    padding-top: -10px;
    width: 360px;
    // position: absolute;
    // top: 130px;
    float: left;
    margin-left: 260px;
    .phone {
      margin-top: 10px;
      font-size: 14px;
      font-family: Inter;
      font-weight: 400;
      color: #191919;
    }
    .site {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #191919;
      // margin-top: 10px;
    }
    .rqCodeTiemBox {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .rqCodeTiem {
        overflow: hidden;
        .rqcode {
          width: 150px;
          height: 150px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .rqtext {
          text-align: center;
          font-size: 12px;
          font-family: Inter;
          font-weight: 400;
          color: #172c34;
          line-height: 62px;
          height: 62px;
        }
      }
      .rqCodeTiem1 {
        margin-left: 30px;
        .rqcode {
          width: 150px;
          height: 150px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .rqtext {
          text-align: center;
          font-size: 12px;
          font-family: Inter;
          font-weight: 400;
          color: #172c34;
          line-height: 62px;
          height: 62px;
        }
      }
    }
  }
  .showBoxP {
    font-size: 16px !important;
    text-align: center !important;
    line-height: 20px !important;
    color: #696969 !important;
  }
  .tailText {
    // position: absolute;
    // width: 100%;
    // bottom: 6%;
    margin-top: 20px;
    // left: 0;
    text-align: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #191919;
    line-height: 62px;
    opacity: 0.5;
    a {
      text-decoration: none;
      color: #333;
    }
    a:hover,
    a:visited,
    a:link,
    a:active {
      color: #333;
      // 设置使所有a标签的四种状态都和本身颜色保持一致，样式代码自己写
    }
  }
}
::-webkit-input-placeholder {
  /* WebKit browsers，webkit内核浏览器 */
  color: #ccc;
  font-size: 16px;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc;
  font-size: 16px;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc;
  font-size: 16px;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #ccc;
  font-size: 16px;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #16e9d6;
  outline: 0;
}
</style>
