<template>
  <div class="feedbook_list">
    <p class="btn" @click="handleEdit">
      <van-icon class="icon" name="edit" />
      我要反馈意见
    </p>
    <div class="item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
      <div class="line_one">
        <p class="content">{{ item.content }}</p>
        <p class="new_reply" v-if="item.content == 1">已回复</p>
        <van-icon class="icon" name="arrow" />
      </div>
      <p class="time">{{ item.intime.substring(0, 10) }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: '',
      list: [],
    }
  },
  mounted() {
    let userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
      this.getList()
    } else {
      this.$toast('未获取到用户信息，请退出重试')
    }
  },
  methods: {
    getList() {
      this.yxAxios
        .post(`${this.yanxueUrl}/api/Manage/FeedBackList`, {
          userId: this.userInfo.centerNo,
          pageSize:999,
          page:1
        })
        .then((res) => {
          this.$toast.clear()
          console.log('我的反馈列表:', res.data.data)
          if (res.data.status == 1) {
            this.list = res.data.data.list
          } else {
            this.$toast(res.data.message)
          }
        })
    },
    handleEdit() {
      this.$router.push({ name: 'FeedbookEdit' })
    },
    handleItem(item) {
      this.$router.push({ name: 'FeedbookReply', query: { id: item.id } })
    },
  },
}
</script>

<style lang="scss">
.feedbook_list {
  padding: 45px 24px;
  .btn {
    text-align: center;
    font-size: 32px;
    color: #3e8bf8;
    margin-bottom: 58px;
  }
  .item {
    padding: 22px 24px;
    background: #fafafb;
    margin-bottom: 24px;
    .line_one {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .content {
      width: 450px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 32px;
      white-space: nowrap;
    }
    .new_reply {
      width: 120px;
      height: 40px;
      background: #ffedec;
      border-radius: 20px;
      font-size: 24px;
      color: #ff2d21;
      text-align: center;
      line-height: 40px;
    }
    .icon {
      font-size: 24px;
      color: #999;
    }
    .time {
      font-size: 24px;
      color: #999;
      margin-top: 30px;
    }
  }
}
</style>
<style lang="scss">
// 长辈版
.elder {
  .feedbook_list .btn,.feedbook_list .item .content,.feedbook_list .item .time{
    font-size: 36px;
  }
}
</style>