<template>
  <div class="container comp-info-back">
    <div class="page">
      <div class="logo-header">
        <img
          class="logo-img"
          src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/logo.png"
        />
        <span class="logo-text">布朗商行</span>
      </div>
      <div class="body">
        <div class="line"></div>
        <div class="feedback">
          <div class="feedback-top">
            <img
              class="top-img"
              src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/customerfeedback.png"
            />
            <span class="top-msg">客户信息反馈</span>
          </div>
          <div class="form">
            <div class="box">
              <input
                class="input-text"
                v-model="name"
                id="enterprisename"
                name="name"
                placeholder="公司/姓名"
                type="text"
              />
            </div>
            <div class="box">
              <input
                class="input-text"
                v-model="phone"
                id="phone"
                name="phone"
                placeholder="联系电话"
                type="text"
              />
            </div>
            <div class="box">
              <input
                class="input-text"
                v-model="email"
                id="email"
                name="email"
                placeholder="邮箱号"
                type="text"
              />
            </div>
          </div>
          <div class="feedback-bottom">
            <span class="feedback-title">意见建议</span>
            <div>
              <textarea
                class="feedback-text"
                v-model="suggest"
                id="suggest"
                name="suggest"
                type="text"
              ></textarea>
            </div>
            <div class="check-btn">
              <button class="btn-eva" @click="submit()">
                <span class="btn-text">确认提交</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { MessageBox } from "mint-ui";
import apiHelper from "@/assets/js/apiHelper.js";

export default {
  name: "StartCheck",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      name: "",
      phone: "",
      email: "",
      suggest: ""
    };
  },
  methods: {
    // 提交
    submit() {
      var that = this;
      apiHelper.saveFeedBack(
        that.sup8.codeInfo.Code,
        that.name,
        that.phone,
        that.email,
        that.suggest,
        //返回
        function(res) {
          if (res.flag == true) {
            MessageBox.alert("提交成功").then(action => {
              location.reload();
            });
          } else {
            MessageBox.alert(res.msg || "提交失败", "提示");
          }
        },
        function(erro){
          MessageBox.alert(res.msg || "提交失败", "提示");
        }
      );
    } 
  },
  watch: {},
  created: function() {
    var that = this;
  },

  mounted: function() {
    var that = this;
  }
};
</script>

<style scoped>
.page {
  height: 100%;
}
.logo-header {
  margin-left: 6%;
  background-color: #ffffff;
}
.logo-img {
  width: 30%;
  height: auto;
}
.logo-text {
  vertical-align: super;
  margin-left: 3%;
  font-weight: bold;
  font-size: 0.8rem;
  letter-spacing: 0.01rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.line {
  background-color: #f9fafb;
  height: 1px;
}
.body {
  background: linear-gradient(#f9fafb, #ffffff);
}
.feedback {
  margin-top: 10%;
  max-height: 5%;
  max-width: 88%;
  margin-left: 6%;
}
.top-img {
  width: 7%;
}
.top-msg {
  vertical-align: super;
  color: #7e431b;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.06rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.box {
  margin-top: 10%;
  border-left: 0.2rem solid #674129;
}
.box .input-text {
  max-width: 100%;
  width: 100%;
  height: 2rem;
  font-size: 0.6rem;
  border: 0.02rem solid #d4d4d4;
  border-left: 0.2rem solid #9a613e;
  border-radius: 0px;
}
.input-text::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  text-align: left;
  letter-spacing: 0.04rem;
}
.feedback .feedback-bottom {
  margin-top: 10%;
}
.feedback-title {
  vertical-align: super;
  color: #7e431b;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.06rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.page .feedback-text {
  max-width: 100%;
  width: 100%;
  height: 8rem;
  font-size: 0.6rem;
  border: 0.02rem solid #d4d4d4;
  border-radius: 0px;
}
.feedback-bottom .check-btn {
  margin-left: 1%;
  max-width: 100%;
  width: 100%;
  margin-top: 20%;
}
.check-btn .btn-eva {
  max-width: 100%;
  width: 100%;
  height: 2.2rem;
  float: left;
  background-color: #1d4c9d;
  border: none;
  color: aliceblue;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.2rem;
  border-radius: 0px;
}
.btn-text {
  vertical-align: super;
  color: #ffffff;
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
