<template>
  <div class="leftRightPadding">
    <p class="suggestion-tip">请选择您反馈的问题类型</p>
    <ul class="suggestionList">
      <li
        @click="chooseHandle(index)"
        v-for="(i, index) in suggestionList"
        :key="i.code"
        :class="{choosedActive: currentIndex==index}"
      >
        {{i.name}}
      </li>
    </ul>



    <!--<mt-field label="" placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）" type="textarea" rows="4" v-model="introduction" ></mt-field>-->

    <van-field
      v-model="introduction"
      rows="2"
      autosize
      type="textarea"
      maxlength="300"
      placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）"
      show-word-limit
    />

    <div  style="margin-top: 34px">
      <van-button type="info" block @click="submitCon">提交</van-button>
    </div>
  </div>
</template>

<script>

import { saveFeedbackAndSuggest, getFeedbackType } from '@/api/getUserIfo'
export default {
  name: 'suggestionBack',
  data() {
    return {
      suggestionList: [],
      currentIndex: 0,
      introduction: '',
    }
  },
  created(){
    this.getFeedbackType()
  },
  methods: {
    getFeedbackType(){
      let jsondata = {}
      jsondata.sign = this.$utils.signObject(jsondata)
      getFeedbackType(jsondata).then(response => {
        console.log(response)
        this.suggestionList = response.data
      })
    },
    chooseHandle: function (i) {
      console.log(i)
      this.currentIndex = i
    },
    submitCon(){
      if(this.introduction){
        let jsondata = {
          feedbackCode:this.suggestionList[this.currentIndex].code,
          suggestDesc:this.introduction,
          // token:'99ecd32eed1b4ebea71bc73b0aabbb99'
        }
        jsondata.sign = this.$utils.signObject(jsondata)
        saveFeedbackAndSuggest(jsondata).then(response => {
          console.log(response)
          if(response.code==0){
            this.$toast("提交成功");
          }
          // this.phoneNum = response.data.phoneNum
        })

      }else{
        this.$toast("请填写建议反馈内容");
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .suggestion-tip {
    margin: 17px 0 13px;
    color: #6666;
  }

  .suggestionList {
    overflow: hidden;

    li {
      float: left;
      width: calc((100% - 19px) / 2);
      height: 45px;
      line-height: 45px;
      margin-bottom: 16px;
      border: 1px solid #2282C5;
      text-align: center;
      font-size: 16px;
      border-radius: 4px;
      color: #2282C5;
      &:nth-child(odd) {
        margin-right: 19px;
      }
    }
    .choosedActive {
      background: linear-gradient(180deg, #2282C5 0%, #4B8EF1 58%, #63BEFD 100%);
      color: #fff;
      border: 0;
    }

  }
</style>
