<!--  -->
<template>
  <div class='feedback_box'>
    <el-container>
      <!-- 页头 -->
      <el-header>
        <el-page-header title @back="goBack" content="意见反馈"></el-page-header>
        <div class="feedback_box_submit" @click="moren()">提交</div>
      </el-header>

      <!-- 页面主内容 -->
      <el-main>
        
        <!-- 提示语 -->
        <div class="feedback_box_hint">
          <div class="feedback_box_hint_div">
            <span class="feedback_box_hint_span">请留下您宝贵的意见</span>
            <span class="feedback_box_hint_span">我们会认真对待您的任何反馈</span>
          </div>
        </div>

        <!-- 提出意见 -->
        <div class="feedback_box_opinion">
          <div class="feedback_box_opinion_title">您希望给我们提出的建议是？</div>
          <input v-model="inpt1" type="text" class="feedback_box_opinion_ipt">
        </div>


        <!-- app的改进 -->
        <div class="feedback_box_modified">
          <div class="feedback_box_modified_title">您觉得我们App哪些功能需要进一步修改？</div>
          <input v-model="inpt2" type="text" class="feedback_box_opinion_ipt">
        </div>


        <!-- 是否需要联系 -->
        <div class="feedback_box_relation">
          <div class="feedback_box_relation_title">您是否愿意我们继续联系您，帮助我们改进产品<span class="feedback_box_fun_imp">*</span></div>

          <!-- 单选框 -->
          <div class="feedback_box_relation_radio">
             <el-radio v-model="radio" label="1">是</el-radio>
             <el-radio v-model="radio" label="2">否</el-radio>
          </div>
        </div>


        <!-- 姓名 -->
        <div class="feedback_box_name">
          <div class="feedback_box_name_title">姓名</div>
          <input v-model="inpt3" type="text" class="feedback_box_opinion_ipt">
        </div>


        <!-- 联系方式 -->
        <div class="feedback_box_phone">
          <div class="feedback_box_phone_title">请留下您的联系方式</div>
          <input v-model="inpt4" type="text" class="feedback_box_opinion_ipt">
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      radio: '1', //单选框
      inpt1: '', //意见
      inpt2: '', //改进
      inpt3: '', //姓名
      inpt4: '', //联系方式
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
      fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  //方法集合
  methods: {
     //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击返回系统设置
    goBack() {
      let _this = this;
      // _this.$router.push('/system')
      _this.$router.replace('/system')
    },

    //点击提交数据
    moren () {
      let _this = this;
      //判断是否选择进一步联系
      if (_this.radio === '1') {
        var cellphone = _this.inpt4
      } else if (_this.radio === '2') {
        var cellphone = ''
      }
      let postData = _this.$qs.parse({
        name: _this.inpt3, //姓名
        proposal: _this.inpt1, //建议
        count: _this.inpt2, //改进
        store: _this.radio, //是否联系
        phone: cellphone, //手机号
      })
      _this.$axios({
        method: 'post',
        url: 'bigservers/user_pro',
        data: postData,
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        if (res.data === 0) {
          this.$notify.error({
            title: '错误',
            message: '反馈数据提交错误'
          });
        } else if (res.data === 1) {
          this.$notify({
            title: '成功',
            message: '反馈数据提交成功',
            type: 'success'
          });
          // _this.$router.push('/system')
          _this.$router.replace('/system')
        }
        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
  }
};
</script>
<style lang='scss'>
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/feedback.scss";
</style>