<template>
  <view class="content">
    <view class="formbox">
      <view class="input">
        <view class="t-icon t-icon-dianhuatianchong"></view>
        <input type="text" v-model="formdata.phone" placeholder="在此输入您的联系方式" />
      </view>
      <view class="input textarea">
        <view class="t-icon t-icon-xinxi"></view>
        <textarea v-model="formdata.content" name="content" placeholder-style="font-size:13px;margin-top:10px;"
          placeholder="有什么想说的，尽管来吧..." />
      </view>
      <view class="btn " type="button" @click="submit">提交</view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        formdata: {
          phone: "",
          content: ""
        },
      }
    },
    computed: {
      ...mapState(["appTheme"])
    },
    onLoad() {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
    },
    methods: {
      submit() {
        if (!this.formdata.phone.trim()) {
          this.$tools.msg("请输入联系方式");
          return
        }
        if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.formdata.phone)) {
          this.$tools.msg('请输入正确的联系方式');
          return;
        }
        if (!this.formdata.content.trim()) {
          this.$tools.msg("请输入建议");
          return
        }
        this.$model.submitadvice(this.formdata).then((res) => {
          this.$tools.msg(res.message)
          setTimeout(function() {
            uni.switchTab({
              url: "/pages/me/me"
            })
          }, 500)

        }).catch((res) => {
          this.$tools.msg('提交失败，请稍后重试!')
        });

      }
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    background: #fff;
  }

  .formbox {
    padding: 15px;
  }

  .input {
    margin: 0;
    display: flex;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 1rem;
    border: 1px solid #f7f7f7;

    input {
      width: 100%;
      height: 1.5rem;
      line-height: 1.5rem;
      background: none;
      border: none;
      font-size: 14px;
      margin-left: 10px;
    }

    /deep/textarea {
      width: 100%;
      height: 6.5rem;
      line-height: 0;
      background: none;
      border: none;
      font-size: 14px;
      margin-left: 10px;
    }
  }

  .btn {
    display: block;
    margin: 30px auto;
    font-size: 14px;
  }
</style>
