<template>
  <div class="app-container">
    <div style="background-color: #fff;padding: 20px;border-radius: 10px;">
      <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;">
        <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;">
       <span style="margin-left: 10px;">社区资讯详情</span>
      </p>
      <div style="background: #F3F3F3;padding: 20px 15px; margin-bottom: 20px;">
         <div>
             <div style="background: #FFFFFF;border-radius: 20px;padding: 20px;">
               <div style="border-bottom: 1px   solid #E5E5E5;display: flex;flex-direction: column;align-items: center;">
                 <span style="color: #161616; font-size: 18px;margin-right: 10px;">
                   {{form.communityTitle == null?'暂无数据' :form.communityTitle }}
                 </span>
                 <div style="color: #aaa; font-size: 12px;margin-top: 10px;margin-bottom: 10px;margin-left: 10px;">
                    {{form.publishTime == null?'暂无数据' :form.publishTime }}
                    <span style="margin-left: 10px;">作者:{{form.author == null?'暂无数据' :form.author }}</span>
                    <span style="margin-left: 10px;">来源:{{form.source == null?'暂无数据' :form.source }}</span>
                    <!-- <span style="margin-left: 10px;">浏览次数:{{form.viewCount == null?'暂无数据' :form.viewCount }}</span> -->
                 </div>
               </div>
               <div v-html="form.communityContent">

               </div>
               <div style="display: flex; align-items: center;border-top: 1px solid #E5E5E5 ;padding-top: 20px;height: 40px;">
                 <div style="display: flex; align-items: center;margin-right: 20px; padding-top: 5px;">
                   <img src="../../../assets/images/icon_dt_pl.png" alt="" style="width: 20px;height: 20px;">
                   <div style="margin-left: 5px;font-weight: 500;color: #666666;font-size: 16px;">{{form.userComment == null? 0 : form.userComment }}</div>
                 </div>
                 <div style="display: flex; align-items: center;margin-right: 20px; cursor: pointer;" @click="dianzan">
                   <img src="../../../assets/images/icon_dt_dz_normal.png" alt="" style="width: 20px;height: 20px;" v-if="!isdianz">
                   <img src="../../../assets/images/icon_dz_selected.png" alt="" style="width: 20px;height: 20px;" v-if="isdianz">
                   <div style="margin-left: 5px;font-weight: 500;color: #666666;font-size: 16px;line-height: 20px;padding-top: 5px;">{{form.userLikes == null? 0 : form.userLikes }}</div>
                 </div>
                 <div style="display: flex; align-items: center ;margin-right: 20px;" @click="shoucang">
                   <img src="../../../assets/images/icon_dt_sc_normal.png" alt="" style="width: 20px;height: 20px;" v-if="!shouca">
                   <img src="../../../assets/images/shoucangx.png" alt="" style="width: 20px;height: 20px;" v-if="shouca">
                    <div style="margin-left: 5px;font-weight: 500;color: #666666;font-size: 16px;padding-top: 5px;">{{form.userStars == null? 0 : form.userStars }}</div>
                 </div>
               </div>

             </div>
             <div style="background: #FFFFFF;border-radius: 20px;padding: 20px; margin-top:20px;">
                   <comment @doReplydiabs="doReplydiabs" @doChidSend="doChidSend" @doSend="doSend" @doReplydiabh="doReplydiabh" :commentList = 'commentList' @doReplydiab="doReplydiab" :commentNum="commentNum"/>
                  <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                  />
             </div>
         </div>
    </div>

    </div>

    <!-- 添加或修改社区资讯对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="社区资讯标题" prop="communityTitle">
              <el-input v-model="form.communityTitle" placeholder="请输入社区资讯标题" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="作者" prop="author">
              <el-input v-model="form.author" placeholder="请输入作者" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
           <el-form-item label="是否置顶" prop="isTop">
             <el-select v-model="form.isTop" placeholder="请选择是否置顶">
                         <el-option
                           v-for="dict in dict.type.sys_yes_no"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
                         ></el-option>
                       </el-select>
           </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社区资讯类型" prop="communityType">
              <el-select v-model="form.communityType" placeholder="请选择社区资讯类型">
                <el-option
                  v-for="dict in dict.type.community_typ"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源" prop="source">
              <el-input v-model="form.source" placeholder="请输入来源，记录资讯的来源" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布时间" prop="publishTime">
              <el-date-picker clearable
              style="width:100%"
                v-model="form.publishTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择发布时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="社区资讯内容">
              <editor v-model="form.communityContent" :min-height="192"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="isshonue">
            <el-form-item label="封面图片" prop="coverImage">
              <image-upload v-model="form.coverImage"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="isshonue">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
     <el-dialog title="查看信息" :visible.sync="openc" width="800px" append-to-body class="blse">
           <div>
               <div style="background: #FFFFFF;border-radius: 20px;padding: 20px;">
                 <p style="border-bottom: 1px   solid #E5E5E5;display: flex;flex-direction: column;align-items: center;">
                   <span style="color: #161616; font-size: 18px;">
                     {{form.communityTitle == null?'暂无数据' :form.communityTitle }}
                   </span>
                   <span style="color: #aaa; font-size: 12px;margin-top: 10px;margin-bottom: 10px;">
                      {{form.publishTime == null?'暂无数据' :form.publishTime }}
                   </span>
                 </p>
                 <div v-html="form.communityContent">

                 </div>

               </div>
               <div style="background: #FFFFFF;border-radius: 20px;padding: 20px; margin-top:20px;">
                     <comment/>
               </div>
           </div>
     </el-dialog>
  </div>
</template>

<script>
import { listNews, getNews, delNews, addNews, updateNews,delNewsp,commentIndexadd,giveTheThumbs,getStars,getRootComment,getParentComment } from "@/api/wuguan/news";
// import comment from 'bright-comment'
export default {
  name: "News",
  dicts: ['community_typ','sys_yes_no'],

  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 社区资讯表格数据
      newsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openc:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 8,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        communityTitle: [
          { required: true, message: "社区资讯标题不能为空", trigger: "blur" }
        ],
        communityType: [
          { required: true, message: "社区资讯类型不能为空", trigger: "change" }
        ],
      },
      isshonue:false,
      nhgese:{},
      isdianz:false,
      shouca:false,
      commentList:[],
      commentNum:0,
      siegsq:{
        pageNum: 1,
        pageSize: 8,
      },
      userid:0,
      avatar:'',
      nickName:'',
      isgs:false
    };
  },
  created() {
    if(this.$route.query.id != undefined){
       this.handleUpdate(this.$route.query.id)
    }
    this.userid = this.$store.getters.id
    this.avatar = this.$store.getters.avatar
    this.nickName = this.$store.getters.nickname
    console.log(this.$route.query.id)
    // this.getList();

  },
    watch: {
      '$route': function () {
        // this.created()
        if(this.$route.query.id != undefined){
           this.handleUpdate(this.$route.query.id)
           this.userid = this.$store.getters.id
           this.avatar = this.$store.getters.avatar
           this.nickName = this.$store.getters.nickname
        }
      }
    },

  methods: {
    /** 查询社区资讯回复列表 */
    getList() {
      this.loading = true;
      this.queryParams.communityId = this.form.communityId
      // let sngs={'communityId':this.form.communityId,'pageNum':1,'pageSize':3}
      getRootComment(this.queryParams).then(response => {
        response.rows.filter(rou=>{
          rou.pageNum = 1
          if(rou.commentUser == null){
            rou.commentUser = {}
            rou.commentUser.avatar = null
            rou.commentUser.nickName = null
          }else{
            if(rou.commentUser.avatar == undefined){
              rou.avatar = null
            }
            if(rou.commentUser.nickName == undefined){
              rou.nickName = null
            }
          }
          if(rou.content ==null){
            rou.content =''
          }

          if(rou.childrenListCount !=0){
            rou.iss = true
          }else{
            rou.iss = false
          }
          if(rou.childrenList.length != 0){

            rou.childrenList.filter(rotu=>{
              if(rotu.commentUser.avatar == undefined){
                rotu.avatar = null
              }
              if(rotu.commentUser.nickName == undefined){
                rotu.nickName = null
              }
              if(rotu.targetUser.avatar == undefined){
                rotu.avatar = null
              }
              if(rotu.targetUser.nickName == undefined){
                rotu.nickName = null
              }
              if(rotu.content ==null){
                rotu.content =''
              }
            })
          }else{

          }
        })
        this.commentList = response.rows;
        this.total = response.total;
      });
    },
    // 初始文本框发送事件
    doSend(row){
      console.log(row)
      let sgs={'communityId':this.form.communityId,'communityType':this.form.communityType,'isRoot':1,'commentContent':row,
      'targetTitle':this.form.communityTitle, 'communityTitle':this.form.communityTitle, 'userId':this.userid,'avatar':this.avatar,'nickName':this.nickName

      }
      commentIndexadd(sgs).then(response => {
        this.$modal.msgSuccess("评论成功，需等待审核通过后才可展示。");
        // this.open = false;
        // this.getList();
      });
    },
    // 评论列表中文本框发送事件
    doChidSend(row,val,id,item){
      let sgs={'communityId':this.form.communityId,'communityType':this.form.communityType,
      'communityTitle':this.form.communityTitle,'isRoot':2,'commentContent':row,'targetTitle':item.content,'parentId': id,
      'toUserId':item.commentUser.id,'toNickName':item.commentUser.nickName,'toAvatar':item.commentUser.avatar,
      'userId':this.userid,'avatar':this.avatar,'nickName':this.nickName
      }
      if(item.isRoot == 2){
        sgs.toRoot = 'Y'
      }else{
        sgs.toRoot = 'N'
      }
      commentIndexadd(sgs).then(response => {
        this.$modal.msgSuccess("评论成功，需等待审核通过后才可展示。");
        // this.open = false;
        // this.getList();
      });
      console.log(123,row,val,id,item)
    },
    // 删除
    doReplydiabs(row,item){
      let sdfs= row
      delNewsp(sdfs).then(response => {
        this.$modal.msgSuccess("删除成功");
        // this.$router.go(-1)
        // this.open = false;
        this.handleUpdate(this.$route.query.id)
        // this.getList();
      });
    },
    // 点赞评论
    doReplydiab(row,item){
         console.log(123,row,item)
         if(item.isLike != 'Y'){
           this.isgs = false
         }else{
           this.isgs = true
         }

         let sng={'targetId':row,'targetType':2,'userId':this.userid,'avatar':this.avatar,'nickName':this.nickName,
         'targetTitle': item.content,'communityId':this.form.communityId,}
         giveTheThumbs(sng).then(response => {
           // this.$modal.msgSuccess("操作成功");
           this.isdianz = !this.isdianz
           this.isgs = !this.isgs
           if(this.isgs == true){
             item.isLike = 'Y'
           }else{
             item.isLike = null
           }

           // this.open = false;
           // this.getList();
         });

    },
    // 点赞文章
    dianzan(){
       let sng={'targetId':this.form.communityId,'targetType':1,'userId':this.userid,
       'avatar':this.avatar,'nickName':this.nickName,'targetTitle': this.form.communityTitle,
       }
       giveTheThumbs(sng).then(response => {
         // this.$modal.msgSuccess("操作成功");
         this.isdianz = !this.isdianz
         if(this.isdianz == true){
           this.form.userLikes = this.form.userLikes - 0 + 1
         }else{
           if(this.form.userLikes !=0){
             this.form.userLikes = this.form.userLikes - 0 - 1
           }
         }
       // this.$router.go(-1)
         // this.open = false;
         // this.getList();
       });
    },
    // 收藏文章
    shoucang(){
      let sng={'targetId':this.form.communityId,'targetType':1,'userId':this.userid,
      'avatar':this.avatar,'nickName':this.nickName,'targetTitle': this.form.communityTitle}
      getStars(sng).then(response => {
        // this.$modal.msgSuccess("操作成功");
        this.shouca = !this.shouca
        if(this.shouca == true){
          this.form.userStars = this.form.userStars - 0 + 1
        }else{
          if(this.form.userStars !=0){
            this.form.userStars = this.form.userStars - 0 - 1
          }
        }
        // this.$router.go(-1)
        // this.open = false;
        // this.getList();
      });
    },
    // 点击更多评论
    doReplydiabh(row,item){
       console.log(row,item,)
       // item.childrenList.push(this.commentList[1].childrenList)
       // let sngs={'parentId':row,'pageNum':1,'pageSize':1}
       this.siegsq.parentId = row
       this.siegsq.pageNum = item.pageNum
       this.siegsq.communityId = this.form.communityId
       if(item.childrenListCount == 0){
         item.childrenList = []
         item.childrenListCount = item.childrenListCounts
         // this.siegsq.pageNum = 1
         item.pageNum = 1
         // item.iss =
         return
       }
       getParentComment(this.siegsq).then(response => {
         item.childrenListCounts = item.childrenListCount
        item.childrenList = item.childrenList.concat(response.data)
        item.childrenListCount = item.childrenListCount - 0-item.childrenList.length
        item.pageNum = item.pageNum+1
        console.log(item)
       })

    },
    // 获取当前时间
    gettime(){
      let nowDate = new Date()
      				  let date = {
      				    year: nowDate.getFullYear(),
      				    month: nowDate.getMonth() + 1,
      				    date: nowDate.getDate()
      				  }

      				   if (parseInt(date.date) < 10) {
      				      date.date = '0' + date.date
      				    }
                  let nghe = date.year + '-' + date.month + '-' + date.date
      				  return nghe

    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        communityId: null,
        communityTitle: null,
        communityType: null,
        communityContent: null,
        status: 'Y',
        publishTime: this.gettime(),
        author: null,
        source: null,
        coverImage: null,
        viewCount: null,
        isTop: 'N',
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === "Y" ? "启用" : "停用";
      var that = this
      this.$modal.confirm('确认要"' + text + '"吗？').then(function() {
         that.getti(row);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === "Y" ? "N" : "Y";
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.communityId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加社区资讯";
      this.isshonue = true
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const communityId = row
      getNews(communityId).then(response => {
        this.form = response.data;
        if(this.form.isLike == 'Y'){
          this.isdianz = true
        }else if(this.form.isLike == 'N'){
          this.isdianz = false
        }

        if(this.form.isStar == 'Y'){
          this.shouca = true
        }else if(this.form.isStar == 'N'){
          this.shouca = false
        }
        // this.open = true;
        this.isshonue = true
        this.commentNum = this.form.userComment - 0
        this.getList(this.form.communityId)
        // this.title = "修改社区资讯";
      });
    },
    handleUpdatef(row) {
      this.reset();
      const communityId = row.communityId || this.ids
      getNews(communityId).then(response => {
        this.form = response.data;
        this.openc = true;
        this.isshonue = false
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.communityId != null) {
            updateNews(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addNews(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    getti(row){
      updateNews(row).then(response => {

      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const communityIds = row.communityId || this.ids;
      this.$modal.confirm('是否确认删除社区资讯编号为"' + communityIds + '"的数据项？').then(function() {
        return delNews(communityIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wuYe/news/export', {
        ...this.queryParams
      }, `news_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style  lang="scss">
  .blse{
    .el-dialog__body{
      background-color: #F2F3FD;
      padding: 20px;
    }
  }
  .butt{
    .el-button--small{
      padding: 9px 23px !important;
      font-size: 14px;
    }
  }
  .casr{
    .el-tabs__item.is-active{
      color: #196CFF;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item{
      padding: 0  30px !important;
    }
  }
  .el-table .el-table__header-wrapper th{
    background-color:#F5F6F8;
    color:#343434;
  }
  .el-table{
    color:#343434;
  }
</style>
<style scoped lang="scss">
  .goe{
    p{
      margin: 0;
      font-weight: 800;
      font-size: 16px;
      color: #161616;
      margin-top: 10px;
      margin-bottom: 3px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:1; //显示的行
    }
    p:nth-child(2){
      // margin-bottom: 10px;
      margin-top: 0;
     font-weight: 400;
     font-size: 14px;
     color: #AAAAAA;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 10px;
     span:nth-child(2){
       padding: 3px 5px;
       background: #EDEDED;
       border-radius: 10px;
     }
    }
  }
  .ingwe{
    border: 2px solid #196CFF;
  }
  </style>
