<template>
<div>
  <div class="con-title">{{ $t('pages.feedback.feedbackList.title') }}<el-button style="float: right; margin: 8px;" type="primary" size="mini" round @click="goCreate">{{ $t('pages.feedback.feedbackList.btnQuestion') }}</el-button></div>
  <div class="con-box">
    <template v-for="(item, index) in find">
      <ul v-bind:key="index" class="tabs-list">
        <li class="tabs-hd">{{item.name}}</li>
        <template v-for="(item1, index1) in item.arrItem">
          <li v-bind:key="index1">
            <div :class="['tab', (item.selectIndex == index1 ? 'on' : '')]" @click="selFindSelect" :data-index='index1' :data-i="index" :data-key='item.key' :data-val='item1.val'>{{item1.name}}</div>
          </li>
        </template>
      </ul>
    </template>
  </div>

  <div class="con-box">
    <el-collapse v-model="activeNames" @change="handleChange">
      <template v-for="(item, index) in feedbackList">
        <el-collapse-item v-bind:key="index" :name="index">
          <template slot="title">
            {{item.feedback_title}}<div style="position: absolute; right: 70px;" v-html="item.status"></div>
          </template>
          <div style="font-size: 15px; font-weight: 700;">{{ $t('pages.feedback.feedbackList.probDesc') }}({{ $t('pages.feedback.feedbackList.publishTime') }} {{item.created_time}})</div>
          <div style="text-indent: 20px;" v-html="item.feedback_contents"></div>
          <div style="font-size: 15px; font-weight: 700;">{{ $t('pages.feedback.feedbackList.downloadAtta') }}</div>
          <div style="overflow: hidden; text-indent: 20px;">
            <template v-if="item.isEmpty">
              暂无附件内容
            </template>
            <template v-else>
              <template v-for="(item1, index1) in item.feedback_attachments">
                <template v-if="item1.url">
                  <a style="float: left; margin-right: 10px;" :href="item1.url">{{ $t('pages.feedback.feedbackList.downloadAtta') }}{{index1+1}}</a>
                </template>
              </template>
            </template>
          </div>
          <div style="font-size: 15px; font-weight: 700;">{{ $t('pages.feedback.feedbackList.questionReply') }}</div>
          <template v-if="item.replies.length">
            <template v-for="(item1, index1) in item.replies">
              <div class="discuss-feedback-scroll">
                <div v-bind:key='index' class='item-list'>
                  <div class='user'>
                    <template v-if="item1.avatar">
                      <img class='img' :src='item1.avatar' />
                    </template>
                    <template v-else>
                      <img class='img' src='../../assets/images/person-default.jpg' />
                    </template>
                    <div class='right'>
                      <div class='name'>{{item1.nickname}}</div>
                      <div class='time'>{{item1.created_time}}</div>
                    </div>
                  </div>
                  <div :class='["text"]' v-html="item1.reply_contents"></div>
                </div>
              </div>
            </template>
            <textarea v-model="item.replyContent"></textarea>
            <el-button type="primary" size="mini" round @click="replyContent" :data-index='index'>{{ $t('pages.learn.discussDetail.reply') }}</el-button>
          </template>
          <template v-else>
            <div style="text-indent: 20px;">问题已发送给相应的技术或教务人员，正在处理中，请耐心等待。</div>
          </template>
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
  <div class="pagination-right" v-if="(pagination.totalCount / pagination.pageSize > 1)">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.currentPage"
      :page-size="pagination.pageSize"
      layout="prev, pager, next, jumper"
      :total="pagination.totalCount">
    </el-pagination>
  </div>
</div>
</template>

<script>
import cAction from '@action'

export default {
  components: { },
  data () {
    return {
      find: [{
        name: this.$t('pages.feedback.feedbackList.tapType'),
        isShow: false,
        selectIndex: 0,
        key: 'type_id',
        arrItem: [ // 从后台请求
          { val: '0', name: this.$t('pages.feedback.feedbackList.all') },
          { val: '1', name: this.$t('pages.feedback.feedbackList.administration') },
          { val: '2', name: this.$t('pages.feedback.feedbackList.technology') }
        ]
      }],
      param: {
        type_id: 0,
        page: 1,
        pageSize: 10
      },
      pagination: {
        totalCount: 5,
        pageSize: 1,
        currentPage: 1
      },
      activeNames: ['1'],
      feedbackList: []
    }
  },
  mounted () {
    this.getAjaxList()
  },
  methods: {
    getAjaxList () {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Feedback.feedbackList(this.param).then(data => {
        for (let i = 0; i < data.lists.length; i++) {
          const temp = data.lists[i]
          /* 对附件下载 做一下单独处理 */
          try {
            temp.feedback_attachments = JSON.parse(temp.feedback_attachments)
          } catch (e) {
            temp.feedback_attachments = []
          }
          temp.isEmpty = true
          for (let j = 0; j < temp.feedback_attachments.length; j++) {
            const temp1 = temp.feedback_attachments[j]
            if (temp1.url) {
              temp.isEmpty = false
            }
          }
          /* 对状态 做一下单独处理 */
          temp.status = temp.status === '0' ? `<em style="color: #f34b4b">${this.$t('pages.feedback.feedbackList.pending')}</em>` : temp.status === '1' ? `<em style="color: #f3c74b">${this.$t('pages.feedback.feedbackList.processing')}</em>` : temp.status === '2' ? `<em style="color: #44a706">${this.$t('pages.feedback.feedbackList.processed')}</em>` : this.$t('pages.feedback.feedbackList.no')
          /* 对回复 做一下单独处理 */
          temp.replyContent = ''
        }
        this.feedbackList = data.lists
        this.pagination = data.pagination
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    goCreate () {
      this.$router.push({ path: '/app/feedback/feedback-create' })
    },
    replyContent (e) {
      const i = e.target.dataset.index
      if (!this.feedbackList[i].replyContent) {
        this.$message.error('回复内容不能为空！')
        return
      }
      console.log(this.feedbackList[i].replyContent, this.feedbackList[i].id)
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Feedback.feedbackReply({
        feedback_id: this.feedbackList[i].id,
        contents: this.feedbackList[i].replyContent
      }).then(data => {
        if (data.success) {
          this.$message.success('回复成功，等待新的答复')
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    /**
     * 分类选择 - 选中某一项
     */
    selFindSelect (e) {
      const _data = e.currentTarget.dataset
      const index = _data.index
      const json = this.find
      const i = _data.i
      json[i].selectIndex = index
      json[i].isShow = false

      this.param[_data.key] = parseInt(_data.val)

      /* 调用接口 */
      this.getAjaxList()
    },
    handleChange (val) { },
    /* 分页组件方法 */
    handleSizeChange () { },
    handleCurrentChange () {
      this.param.page = this.pagination.currentPage
      this.getAjaxList()
    }
  }
}
</script>
<style lang="scss" scoped>

/* 列表 筛选 */
ul.tabs-list {
  float: left;
  width: 100%;
  margin: 0 0 0.15rem 0;
  padding: 0;
  font-size: 0.16rem;
  line-height: 1.5;
  border-top: 1px solid #e8e8e8;
  &:last-child {
    margin-bottom: 0;
  }
  .tabs-hd {
    display: inline-block;
    color: #fff;
    padding: 5px 0 9px;
    margin-top: -5px;
    width: 94px;
    text-align: center;
    background: url(https://zws-imgs-pub.ezijing.com/754005be709bf2295bc55923c2b91fd8.png) no-repeat 0 0;
  }
  li {
    float: left;
    list-style: none;
    padding: 0.1rem 0;
    margin-right: 0.2rem;
    .tab {
      padding: 0 0.1rem;
      cursor: pointer;
      &.on {
        background: #b49441;
        color: #ffffff;
      }
      &:focus, &:hover {
        color: #b49441;
        background: #eeeeee;
      }
    }
  }
}
/* 分页样式 */
.pagination-right {
  float: right;
  margin: 0 0.3rem 0 0;
}
textarea {
  width: 100%;
  height: 60px;
}
.discuss-feedback-scroll { padding: 5px; }
.discuss-feedback-scroll .item-list { position: relative; padding: 0.1rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); cursor: pointer; }
.discuss-feedback-scroll .item-list .user { position: relative; overflow: hidden; }
.discuss-feedback-scroll .item-list .user .img { float: left; width: 0.5rem; height: 0.5rem; background: #e5e5e5; border-radius: 50%; }
.discuss-feedback-scroll .item-list .user .right { position: absolute; left: 0.52rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.discuss-feedback-scroll .item-list .user .right .name { font-size: 0.14rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; }
.discuss-feedback-scroll .item-list .user .right .time { font-size: 0.14rem; color: #a0a0a0; }
.discuss-feedback-scroll .item-list .text { text-indent: 10px; font-size: 0.14rem; color: #535353; line-height: 1.5; text-align: justify; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; */ word-break:break-all; overflow: hidden; }
</style>
