<template>
  <div class="artlist">
    <Remark>
      <ul>
        <li>几个小时前接口里面没有这个值，是否需要自己写js逻辑判断，先写死</li>
        <li>这里的路由传参存在问题</li>
      </ul>
    </Remark>
    <div class="article-list" v-for="(item, idx) in items" :key="idx">
      <div class="article-info">
        <div class="article-info-title">
          <div style="line-height: 30px;font-size: 18px" >
            <div class="one-line-ellipsis art-tit" @click="routerJump(item)">
            <!-- <span v-if="item.isResolve == true" class="qa-basic qa-solve">【已解决】</span>
            <span v-if="item.isResolve == false" class="qa-basic qa-unSolve">【待解决】</span> -->
              <span v-html="$keywordActiveShow(item.title,keyWord)"></span>
          </div>
          </div>
        </div>
        <div class="article-info-summary">
         <div style="overflow: hidden;" class="one-line-ellipsis titcontent" v-html="$keywordActiveShow(item.content,keyWord)"></div>
          <div class="article-Reply">
          <div class="article-hd" style="margin-top: 8px;">
            我的回答
               <div class="article-info-date">
                  <!-- <el-button @click="shareItem(item)" type="text" icon="el-icon-share">分享</el-button> -->
                  <el-button class="edit" @click.stop="editItem(item)" type="text"><svg-icon style="font-size:14px;margin-right:5px" icon-class="edit-icon"></svg-icon>编辑</el-button>
                  <el-button class="del" @click.stop="delItem(item)" type="text"> <svg-icon style="font-size:14px;margin-right:5px" icon-class="del-icon"></svg-icon>删除</el-button>
                </div>
           </div>
          </div>
        </div>
         <div class="reply-content">
              <!-- 1111 <span  v-html="$keywordActiveShow(item.answercontent,keyWord)"></span> -->
              <span v-html="displayAll(item)"></span>
              <span style="color:#2C68FF" v-if="item.answercontent.length > 170" @click="changeIsAll(item)">
                {{ item.isAll ? '收起' : '展开全文' }}
              </span>
          </div>
        <div class="article-info-tools">
          <div class="article-info-tools-auth">
            <!-- <span style="font-size: 13px; color: #7b7b7b;padding-right: 15px;">提问时间：{{ item.sysCreateTimeQ }}</span> -->
            <span style="  font-size: 13px; color: #7b7b7b;padding-right: 15px;">回复时间：{{ item.sysCreateTimeA }}</span>
          </div>
             <interactBar  :readonly="true"  :type="4" :data="item" :shares="false" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar>
        </div>
      </div>
    </div>
    <el-dialog title="分享" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
      <div style="height: 200px;padding-right: 30px;">
        <el-form label-width="100px">
          <el-form-item label="工号或姓名">
            <el-input v-model="shareInfo.name" placeholder="您要分享的人的工号或姓名"><el-button slot="append" icon="el-icon-search">搜索</el-button></el-input>
          </el-form-item>
        </el-form>
        <div>关于如何查询要分享的人，使用工号是否可以</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shareShow = false">取 消</el-button>
        <el-button type="primary">提交分享</el-button>
      </span>
    </el-dialog>
    <editQuestion ref="editQuestion" @enSure="enSure" :editData="editData"></editQuestion>
  </div>
</template>

<script>
import apiQa from '@/api/modules/qa.js';
import editQuestion from '@/components/Qa/editQuestion.vue';
import interactBar from '@/components/Portal/interactBar.vue';
export default {
  name: 'articleItems',
  components: {editQuestion,interactBar },
  props: {
    items: {
      type: Array,
      default: () => {
        return [];
      }
    },
	keyWord:{
		type: String,
		default: '',
	}
  },
  data() {
    return {
      shareShow: false,
      shareInfo: {
        aid: '',
        name: '',
        article: null
      },
      fieldsList: {
        collects: 'favorites',
        praises: 'praises',
        answers: 'answers'
      },
      editData: {}
    };
  },
  methods: {
     //展示全部
     displayAll(item) {
      let content = '';
      content = item.answercontent.replace(/(\n){2,}/,'<br>');
      item.answercontent = content;
      if (!item.isAll && item.answercontent.length > 170) {
        return item.answercontent.slice(0, 170) + "...";
      }
      return item.answercontent;
    },
    changeIsAll(item) {
      item.isAll = !item.isAll;
    },
    // deleteData(item){
    //   console.log(item,"我拿到准备删除的数据")
    //  apiQa.delAnswer()
    // },
    routerJump(item) {
       this.$router.push({ path: '/qa/answer', query: { id: item.answerqid } });
       //  window.open(this.webBaseUrl+'/qa/answer?id='+item.answerqid, '_blank');

    },

    toStudy(item) {
      this.$router.push({ path: '/uc/study/index', params: { id: item.id } });
    },
    shareItem(item) {
      this.shareInfo.article = item;
      this.shareShow = true;
    },
    editItem(item) {
      this.editData={...item}
      this.editData.content = item.answercontent;
      this.$refs.editQuestion.updateDialog = true;
    },
    delItem(item) {
      this.$confirm('确定要删除您回答的内容吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          apiQa
            .delAnswer(item.answerid)
            .then(res => {
              if (res.status == 200) {
                this.$message({ type: 'success', message: '删除成功!', offset: 50 });
                this.$emit('sure', true);
              } else {
                this.$message({ type: 'info', message: '删除失败', offset: 50 });
              }
            })
            .catch(err => {
              this.$message({ type: 'info', message: '删除失败', offset: 50 });
            });
          // this.items.splice(idx, 1);
        })
        .catch(() => {});
    },
    enSure() {
      this.editData={}
      this.$emit('enSure', true);
    }
  },
};
</script>

<style lang="scss" scoped>
.reply-content{
  font-size: 14px;
  color: #333330;
  font-weight: 400;
  margin-bottom: 10px;
  word-break:break-all;
}
.titcontent{
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
.el-button--medium{
  padding-top: 0;
}
.art-tit{
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}
.artlist{
  padding-left: 20px;
  padding-right: 32px;
  cursor: pointer;
}
.article-info-date {
      // line-height: 30px;
      font-weight: 200;
      margin-left: auto;
      color: #999999;
      i {
        margin-right: 5px;
      }
    }
.article-hd{
  width: 100%;
  display: flex;
  span{
    line-height: 30px;
  }
  .isBest{
	display: inline-block;
	border-radius: 4px;
    background: #588afc;
	font-size: 14px;
	font-weight: 400;
    color: #fff;
    margin: 0 5px 0 0;
    padding: 0 5px;
  }
}
.edit{
  font-size: 14px;
  color: #8590A6;
  margin-right: 10px;

}
.del{
   color: #8590A6;
  font-size: 14px;
}
.article-Reply{
  padding-top: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #444444;
  line-height: 21px;
}
.one-line-ellipsis{
 // display: -webkit-box;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break:break-all;

}
.two-line-ellipsis{
 //  display: -webkit-box;
  overflow: hidden;
  line-height: 30px;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
  word-break:break-all;
}
.text-status1 {
  padding: 3px;
  // border: 1px dotted #1ea0fa;
  color: #08A890;
}
.text-status2 {
  padding: 3px;
  // border: 1px dotted #00aa00;
  color: #00aa00;
}
.text-status3 {
  padding: 3px;
  // border: 1px dotted #ff0000;
  color: #588afc;
}
.article-list {
  margin: 5px 0;
  // border: 1px solid #dddddd;
  padding: 10px 0;
  border-bottom: 1px solid #E8E8E8;
}

.article-info {
  // height: 100px;
  width: 100%;
  .article-info-title {
    font-size: 16px;
    font-weight: 400;
    // height: 40px;
    line-height: 40px;

  }
  .article-info-summary {
    // height: 85px;
    line-height: 25px;
   overflow: hidden;
   margin-top: 10px;
    color: #999999;

  }

  // .article-info-summary:nth-child(1){
  //   padding-bottom: 20px;
  // }
  .article-info-tools {
    height: 30px;
    position: relative;
    ::v-deep .interact-bar-btn{
      min-width: 80px !important;
      text-align: right;
    }
    .article-info-tools-auth {
      float: left;
      height: 30px;
      line-height: 30px;
      font-size: 13px;
      color: #999999;
      img {
        margin-right: 10px;
        width: 30px;
        border: 1px solid #eee;
        border-radius: 50%;
        vertical-align: middle;

      }
    }
    .article-info-tools-btns {
      float: right;
      .article-info-tools-btn {
        margin: 0 0 0 15px;
      }
    }
  }
}
</style>
