<template>
  <div class="home">
    <nav-bar />
    <div class="bj"></div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="formData.name"
        name="name"
        label="联系人"
        placeholder="联系人"
        autocomplete="off"
        :rules="[{ required: true, message: '请输入联系人' },{pattern:namePattern,message: '联系人格式有误,请输入中文或者字母'}]"
      />
      
      <van-field
        v-model="formData.phone"
        name="phone"
        label="手机号码"
        type="number"
        autocomplete="off"
        maxlength="11"
        placeholder="手机号码"
        :rules="[{ required: true, message: '请输入手机号码' },{pattern:phonePatten,message: '手机号码格式有误'}]"
      />
      <van-field
        v-model="formData.content"
        name="content"
        label="内容"
        type="textarea"
        autocomplete="off"
        maxlength="500"
        placeholder="请输入留言内容"
        :rules="[{ required: true, message: '请输入留言内容' }]"
      />
      <div style="height:10px;"></div>
      <!-- <van-field name="switch" label="设为默认就诊人">
        <template #input>
          <van-switch v-model="formData.isYes" active-color="#46C3B0" size="20" />
        </template>
      </van-field> -->
      <div class="wxts">
        <!-- <p>体检：紧急情况请联系元宝山区妇幼保健院体检科，电话：0476-3523087 </p> -->
        <p>体检：紧急情况请联系九聚科技</p>
        <p>电话：0571-89738660 </p>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" color="#46C3B0">提交</van-button>
      </div>
    </van-form>
  </div>
</template>


<script>
// @ is an alias to /src
import { apiInsertUserConsult } from "@/request/api.js";
import { Toast } from 'vant';
import navBar from "@/components/navBar.vue";
export default {
  components: {
    navBar
  },
  data() {
    return {
      formData: {
        name: "",
        phone:"",
        content: ''
      },
      namePattern: /^[A-Za-z\u4e00-\u9fa5]+$/,
      phonePatten: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      columns: [{value:1,text:"就诊卡号"},{value:6,text:"身份证号"}],
      showPicker: false,
      switchChecked: false,
      title: "",
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
  },
  methods: {
    onSubmit(values) {
      let _this = this;
      let formData = {..._this.formData};
      apiInsertUserConsult(formData).then(res => {
        Toast("留言成功");
        setTimeout(() => {
          _this.$router.back(-1);
        }, 1000);
      });
    },
    idValidator(val) {
      return /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val);
    },
    clinicValidator(val) {
      return /^[A-Za-z0-9]+$/.test(val);
    },
    onSelectCard(value) {
      this.formData.cardType = value.value;
      this.showPicker = false;
      this.formData.cardNo = "";
    }
  }
};
</script>

<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -2;
}
::v-deep .van-field__control--custom {
  justify-content: flex-end;
}

.wxts {
  padding: 20px;
  font-size: 26px;
  line-height: 45px;
  color: #999;
}
</style>
