<template>
  <div class="feed-h">
    <div class="feed-box">
      <div class="title">留下您的宝贵意见，我们会第一时间联系您</div>
      <textarea name="" id="" v-model="contentText" @blur="showBtn = true" @focus="showBtn = false"></textarea>
      <div class="title">您的联系方式</div>
      <input type="number" v-model="mobile" @blur="showBtn = true" @focus="showBtn = false">
    </div>
    <div v-if="showBtn" class="feed-btn" @click="submit">提交</div>
  </div>
</template>

<script>
import * as api from '@/api/my.js'
import { Toast } from 'vant'
export default {
  metaInfo: {
    title: '意见反馈'
  },
  components: {
    [Toast.name]: Toast
  },
  mounted() {
    const resizeHeight = document.body.clientHeight
    window.addEventListener('resize', () => {
      document.body.clientHeight === resizeHeight ? this.showBtn = true : this.showBtn = false
    })
  },
  data() {
    return {
      showBtn: true,
      contentText: '',
      mobile: ''
    }
  },
  methods: {
    submit() {
      if (this.contentText === '') {
        Toast({ message: '请输入意见' })
        return false
      }
      if (!/^1[34578]\d{9}$/.test(this.mobile)) {
        Toast({ message: '请输入正确手机号' })
        return false
      }
      api.submitFeedback({ title: this.mobile, contents: this.contentText }).then(res => {
        Toast({ message: '已提交' })
        this.contentText = ''
        this.mobile = ''
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.feed-box{
  padding: 0 .4rem;
  .title{
    color: #222;
    font-size: .3rem;
    line-height: 1.1rem;
    font-weight: bold;
  }
  textarea{
    padding:.1rem .2rem;
    resize:none;
    width:6.3rem;
    height:3.77rem;
    border-radius:.07rem;
    border:0.01rem solid rgba(204,204,204,1);
    font-size:.26rem;
    color:rgba(34,34,34,1);
    line-height: .43rem;
  }
  input{
    padding:0 .2rem;
    outline: none;
    width:6.3rem;
    height:.8rem;
    border-radius:.07rem;
    border:.01rem solid rgba(204,204,204,1);
    color:rgba(34,34,34,1);
    font-size:.26rem;
  }
}
.feed-btn{
  position: fixed;
  bottom: .4rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  text-align: center;
  line-height: .7rem;
  width:6.7rem;
  height:.7rem;
  background:#C62245;
  border-radius:.12rem;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height: .7rem;
}
</style>
