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

    <div class="clear"></div>

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

    <div  style="margin-top: 34px">
      <mt-button type="danger" size="large">提交</mt-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'suggestionBack',
  data() {
    return {
      suggestionList: [
        { id: 1, text: 'APP问题' },
        { id: 2, text: '支付问题' },
        { id: 3, text: '停车场问题' },
        { id: 4, text: '服务投诉' },
        { id: 5, text: '改进建议' },
        { id: 6, text: '其他问题' },
      ],
      currentIndex: 0,
      introduction: '',
    }
  },
  methods: {
    chooseHandle: function (i) {
      console.log(i)
      this.currentIndex = i
    }
  }
}
</script>

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

  .suggestionList {

    li {
      float: left;
      width: calc((100% - 19px) / 2);
      height: 33px;
      line-height: 33px;
      margin-bottom: 16px;
      border: 1px solid #B18181;
      text-align: center;
      font-size: 13px;
      &:nth-child(odd) {
        margin-right: 19px;
      }
    }
    .choosedActive {
      background: #F75959;
      border: 1px solid #A51E1E;
      color: #fff;
    }

  }
</style>
