<template>
  <div class="auto select-overspread ">
    <div class="row auto">
      <div class="row app-row">
        <div class="col-xs-4">
          <label class="font text-left">反馈类型：</label>
        </div>
        <div class="col-xs-8" >
          <v-select class="input-font"
                    placeholder="请选择反馈"
                    :value.sync="from.fk_Type"
                    :options='option'
                    close-on-select clear-button></v-select>
        </div>
      </div>
      <div class="row app-row">
        <div class="col-xs-4">
<!--          <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">-->
          <label class="font text-left">反馈内容：</label>
        </div>
        <div class="col-xs-8" >
          <textarea class="form-control"  placeholder="请输入反馈内容"cols="30" rows="3" style="resize: vertical;" v-model="from.fk_Content"></textarea>
        </div>
      </div>
    </div>
    <div class="row app-row text-center">
      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="save()">提交</button>
    </div>
  </div>
</template>

<script>
  import {HttpResetClass} from "vue-client";
  import Vue from "vue"

  export default {
    title: "意见反馈",
    props: {},
    data() {
      return {
        // option: this.$appdata.getParam('意见反馈类型'),
        option:[{label:'意见反馈类型一',value:'意见反馈类型一'},{label:'意见反馈类型二',value:'意见反馈类型二'}],
        from: {
          // fk_Name: Vue.user.name,
          // fk_Id: Vue.user.id,
          fk_Id:'1',
          fk_Name:'奥德',
          fk_Type: '',
          fk_Content: '',
          fk_Firm:'测试'
          // fkFirm:Vue.user.orgid,
        },
        margintop: document.documentElement.clientHeight * 0.1,
        show: false
      }
    },
    methods: {
      save() {
        /*console.log(this.from.fkType=option.value)*/
        if(this.from.fk_Type && this.from.fk_Content){
          this.$resetpost(`/rs/logic/add_feedback`, this.from).then((res) => {
            alert("添加成功");
            console.log(this.from);
          })
        }else{
          alert("反馈类型和内容不能为空")
        }

      },
    }
  }
</script>
<style scoped="">
  .app-row {
    background-color: white;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
  .devicetext {
    font: 13px PingFang-SC-Medium;
    position:fixed;
    width:100%;
    bottom:13px;
    transform: translate(-50%, -50%);
  }
  /*输入框样式*/
  /*@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300);*/
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-weight: 300;
  }
  .loginbg {
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: 300;
  }
  .loginbg ::-webkit-input-placeholder {
    /* WebKit browsers */
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: 300;
  }
  .loginbg  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    opacity: 1;
    font-weight: 300;
  }
  .loginbg  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    opacity: 1;
    font-weight: 300;
  }
  .loginbg  :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: 300;
  }
  .wrapper {
    /*background: #2D83BA;
    background: -webkit-linear-gradient(top left, #2D83BA 0%, #2D83BA 100%);
    background: linear-gradient(to bottom right, #2D83BA 0%, #2D83BA 100%);
    opacity: 0.8;*/
    /*position: absolute;*/
    /*top: 50%;
    right: 10%;
    width: 40%;
    height: 350px;
    margin-top: -150px;*/
    overflow: hidden;
  }

  .wrapper.form-success .container h3{
    -webkit-transform: translateY(85px);
    -ms-transform: translateY(85px);
    transform: translateY(85px);
  }
  .container {
    /*max-width: 350px;*/
    margin: 0 auto;
    /*padding: 30px 100px 50px 100px;
    height: 350px;*/
    text-align: center;
    /*以下增加*/
    /*background: #2D83BA;
    background: -webkit-linear-gradient(top left, #2D83BA 0%, #2D83BA 100%);
    background: linear-gradient(to bottom right, #2D83BA 0%, #2D83BA 100%);*/
    opacity: 0.8;
  }
  .container h3{
    font-size: 40px;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-put;
    transition-timing-function: ease-in-put;
    font-weight: 200;
  }
  .form {
    padding: 20px 0;
    /*margin-top: 15%;*/
    position: relative;
    z-index: 2;
  }
  .form input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    border: 1px solid #50ABE6;
    background-color: #50ABE6;
    width: 250px;
    border-radius: 3px;
    padding: 10px 15px;
    margin: 0 auto 10px auto;
    display: block;
    text-align: center;
    font-size: 18px;
    color: white;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    font-weight: 300;
  }
  .form input:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }
  .form input:focus {
    background-color: white;
    width: 300px;
    color: #53e3a6;
  }


  .form button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    background-color: white;
    border: 0;
    padding: 10px 15px;
    color: #253830;
    border-radius: 3px;
    width: 250px;
    cursor: pointer;
    font-size: 18px;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
  }
  .form button:hover {
    background-color: #f5f7f9;
  }

  /*注册字体样式*/
  .form span {
    color: #fff;
    display: table-footer-group;
    position: absolute;
    right: 10px;
    margin-top: 10px;
    cursor: pointer;
  }
  .logotitle {
    color: #fff;
    position: absolute;
    top: 50px;
    left: 50px;
    font-size: 50px;
  }
  /*注册模态框界面样式*/
  .modifystyle {
    background: #FCFEEE;
  }
  .modifystyle div{
    height: auto;
    margin-bottom: 15px;
    /*text-align: center;*/
    /*margin-left: 20%;*/
  }
  /*bootstrap字体图标要手动调整，所以使用字体图标的span必须紧跟在input后面，负责会错位*/
  .modifystyle div input + span{
    top: 0!important;
    right: 32%;
  }
  .modifystyle span{
    color: red;
  }

  /* 通告区内容 */
  .notice-board {
    height: auto;
    position: absolute;
    top: 50%;
    margin-top: -150px;
    margin-left: 100px;
    color: #fff;
  }
  /*修改密码底部按钮部分样式*/
  .footerbtn {
    text-align: center;
    padding: 15px;
  }
  .footerbtn button {
    width: 100px;
    margin-left: 20px;
  }
  .bg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.15);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
  }
  .bg-bubbles li:nth-child(1) {
    left: 10%;
  }
  .bg-bubbles li:nth-child(2) {
    left: 20%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 17s;
    animation-duration: 17s;
  }
  .bg-bubbles li:nth-child(3) {
    left: 25%;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }
  .bg-bubbles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
    animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.25);
  }
  .bg-bubbles li:nth-child(5) {
    left: 70%;
  }
  .bg-bubbles li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .bg-bubbles li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
  }
  .bg-bubbles li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
  }
  .bg-bubbles li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.3);
  }
  .bg-bubbles li:nth-child(10) {
    left: 90%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
  }


</style>


