<template>
  <div class="content">
    <div class="left">
      <h2 style="font-weight: 700;letter-spacing:10px;">业绩快速增长 从神州通誉开始</h2>
      <div class="lists">
        <div class="list">
          <div class="item">
            <img src="./../assets/whiteLine.png" />
            <div class="part">
              <h4>一站式管理</h4>
              <div style="margin-top: 10px">提升企业管理能力</div>
            </div>
          </div>
          <div class="item">
            <img src="./../assets/whiteLine.png" />
            <div class="part">
              <h4>定制服务</h4>
              <div style="margin-top: 10px">客户的专属助手</div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="item">
            <img src="./../assets/whiteLine.png" />
            <div class="part">
              <h4>提升工作效率</h4>
              <div style="margin-top: 10px">工作情况更透明</div>
              <div>工作轨迹真实有效</div>
            </div>
          </div>
          <div class="item">
            <img src="./../assets/whiteLine.png" />
            <div class="part">
              <h4>优化巡店流程</h4>
              <div style="margin-top: 10px">流程规范化</div>
              <div>助力企业占领终端</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div style="margin-bottom: 10px">
        <i style="color: #409eff" class="el-icon-warning"></i>请如实填写企业信息
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="企业名称" prop="companyName">
          <el-input
            size="medium"
            style="width: 60%"
            v-model="ruleForm.companyName"
          ></el-input>
          <span style="margin-left: 30px">请填写4-30位字符</span>
        </el-form-item>
        <el-form-item label="联系人" prop="linkman">
          <el-input
            size="medium"
            style="width: 60%"
            v-model="ruleForm.linkman"
          ></el-input>
          <span style="margin-left: 30px">请填写1-12中文/英文位字符</span>
        </el-form-item>
        <el-form-item label="手机号" prop="companyPhone">
          <el-input
            size="medium"
            style="width: 60%"
            v-model="ruleForm.companyPhone"
          ></el-input>
          <el-button
            style="margin-left: 30px"
            size="medium"
            type="primary"
            @click="getCode()"
            :disabled="disabled"
            >{{ send }}</el-button
          >
        </el-form-item>
        <el-form-item label="短信验证码" prop="authCode">
          <el-input
            size="medium"
            style="width: 60%"
            v-model="ruleForm.authCode"
          ></el-input>
          <span style="margin-left: 30px">请填写短信验证码</span>
        </el-form-item>
        <el-form-item>
          <el-button class="primaryBtn" @click="submitForm('ruleForm')"
            >申请试用</el-button
          >
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "HomeView",
  data() {
    return {
      loading: false,
      send: "获取短信验证码",
      disabled: false,
      ruleForm: {
        companyName: "",
        linkman: "",
        companyPhone: "",
        authCode: "",
      },
      rules: {
        companyName: [
          { required: true, message: "请填写企业名称", trigger: "blur" },
          {
            min: 4,
            max: 30,
            message: "长度在 4 到 30 个字符",
            trigger: "blur",
          },
        ],
        linkman: [
          { required: true, message: "请填写联系人", trigger: "blur" },
          {
            min: 1,
            max: 12,
            message: "长度在 1 到 12 个字符",
            trigger: "blur",
          },
        ],
        companyPhone: [
          { required: true, message: "请填写正确手机号", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: "blur",
          },
        ],
        authCode: [
          { required: true, message: "请填写短信验证码", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    countdown() {
      let self = this;
      self.disabled = true;
      var time = 60;
      var timer = setInterval(fun, 1000);
      function fun() {
        time--;
        if (time >= 0) {
          self.send = time + "s后刷新";
        } else if (time < 0) {
          self.send = "获取短信验证码";
          self.disabled = false;
          clearInterval(timer);
          time = 60;
        }
      }
    },
    async getCode() {
      var that = this;
      var companyPhone = this.ruleForm.companyPhone;
      if (!companyPhone) {
        that.$message.error("请填写手机号！");
        return;
      }
      try {
        await axios.get(that.BASE_API + "getAuthCode.if", {
          params: { companyPhone: companyPhone },
        });
        that.countdown();
        that.$message.success("短信验证码已发送至手机，请注意查看!");
      } catch (err) {
        that.$message.error("请求出错！");
      }
    },
    submitForm(val) {
      this.$refs[val].validate((valid) => {
        if (valid) {
          this.loading = true;
          axios({
            method: "get",
            url: this.BASE_API + "website/clientRegister.if",
            params: this.ruleForm,
          }).then((res) => {
            this.loading = false;
            if (res.data.flag) {
              this.$message.success(
                "申请成功，工作人员正在处理，请注意接听电话"
              );
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
h4 {
  font-weight: bold;
  font-size: 1.3rem;
}
.content /deep/ .el-form-item__label{
  color:#fff;
}
.content {
  /* position: fixed; */
  width: 100%;
  height: 100%;
  min-width: 1000px;
  height:700px;
  /* background: url("../assets/productTrials.png"); */
  background: url("../assets/banner3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0px 50px 0;
  color:#ececec;
}

.left {
  width: 50%;
}

.right {
  width: 50%;
  margin-top: 20px;
}

.lists {
  margin-top: 50px;
}

.list {
  display: flex;
  flex-wrap: wrap;
  /* color:#2b81d8; */
}

.item {
  width: 250px;
  display: flex;
  margin-right: 10px;
  margin-bottom: 50px;
}
.item > img {
  height: 20px;
  margin-right: 10px;
  margin-top: 4px;
  width: 5px;
}
.primaryBtn {
  width: 200px;
  margin-left: 120px;
  background: linear-gradient(to right,#01a2de,#0068d0);
  color:#fff;
  border-radius: 5px;
  font-size: 15px;
  border: none;
}
h4{
  letter-spacing:10px;
}
.part>div{
  letter-spacing:5px;
}
</style>
