<template>
<div class="pb20">
   <div class="p20 border-bottom-1">
     <div class="d-flex">
       <h3 class="font-size-18 flex-1 lh40">{{ac_detail.xdb_hdmc}}</h3>
       <el-button type="primary" @click="toSignList(ac_detail.xdb_id)">报名列表</el-button>
     </div>
     <h4 class="mt5 font-size-14 color-17">{{ac_detail.xdbh_name}}｜{{ac_detail.xdb_bjmc}}</h4>
     <h5 class="mt10 font-size-16">活动时间：{{ac_detail.xdb_hdkssj}} ~ {{ac_detail.xdb_hdjssj}}</h5>
   </div>
   <div class="p20 border-bottom-1">
     <div class="font-size-16" v-html="ac_detail.xdb_hdms"></div>
     <el-button class="mt20" type="primary" @click="newComment">评价</el-button>
   </div>
   <div class="p20">
     <h3 class="font-size-16 color-2 mb10">评论（{{commentList.length}}）</h3>
     <ul v-if="commentList.length >0" class="comment-list">
       <li v-for="item in commentList">
         <div class="d-flex">
           <h3 class="font-size-14 color-17">评论人{{item.xdh_plr}}</h3>
           <span class="ml15 hand icon-edit" @click="editComment(item)"></span>
           <span class="ml15 hand icon-del" @click="delComment(item)"></span>
         </div>
         <div class="mt10 font-size-14">{{item.xdh_plnr}}</div>
       </li>
     </ul>
     <h3 v-else class="font-size-16 color-19">暂无评论</h3>
   </div>
  <el-dialog title="评价" :visible.sync="commentDialogVisible" width="550px" v-loading="loading">
    <el-form :model="commentForm" ref="commentForm" :rules="rules" label-width="100px">
      <el-form-item label="评价描述：" prop="xdh_plnr">
        <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入评论"
            v-model="commentForm.xdh_plnr">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="commentDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="commentFormSubmit('commentForm')">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
import {hd_detail,hd_comment_list,hd_comment_add,hd_comment_edit,hd_comment_del} from "./api";
import { useUserStore } from "@/stores/user";
const { real_name } = useUserStore();
export default {
  name: "index",
  data() {
    return {
      xdb_id: '',
      ac_detail:{},
      commentList:[],
      loading: false,
      commentDialogVisible: false,
      commentForm:{
        xdh_id:'',
        xdh_plnr:''
      },
      rules:{
        xdh_plnr: [
          {required: true, message: '请输入评价描述', trigger: 'blur'}
        ],
      },
      isEdit: false
    }
  },
  methods:{
    getAcDetail() {
      let data = {
        xdb_id:this.xdb_id
      }
      hd_detail(data).then(res=>{
        if(res.code == 1) {
          this.ac_detail = res.data.one_info;
        }
      })
    },
    getCommentList() {
      let data = {
        xdb_id:this.xdb_id,
        page:'1',
        limit:'999'
      }
      hd_comment_list(data).then(res =>{
        if(res.code == 1) {
          this.commentList = res.data.page_data;
        }
      })
    },
    newComment() {
      this.isEdit = false;
      this.commentForm.xdh_plnr = '';
      this.commentDialogVisible = true;
    },
    editComment(item) {
      this.isEdit = true;
      this.commentForm.xdh_id = item.xdh_id;
      this.commentForm.xdh_plnr = item.xdh_plnr;
      this.commentDialogVisible = true;
    },
    commentFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = {
            xdh_plr:real_name,
            xdh_plnr:this.commentForm.xdh_plnr,
            xdb_id: this.xdb_id
          }
          if(!this.isEdit) {
            hd_comment_add(data).then(res =>{
              this.loading = false;
              if(res.code == 1) {
                this.$message({
                  message: "评论成功！",
                  type: "success",
                });
                this.commentDialogVisible = false;
                this.getCommentList();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          } else {
            data.xdh_id = this.commentForm.xdh_id;
            hd_comment_edit(data).then(res =>{
              this.loading = false
              if(res.code == 1) {
                this.$message({
                  message: "评论编辑成功！",
                  type: "success",
                });
                this.commentDialogVisible = false;
                this.getCommentList();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            })
          }

        }
      })
    },
    delComment(item) {
      this.$confirm('确定要删除评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          xdh_id:item.xdh_id
        }
        hd_comment_del(data).then(res =>{
          if(res.code == 1) {
            this.$message({
              message: "评论删除成功！",
              type: "success",
            });
            this.getCommentList();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })

      }).catch(() => {});
    },
    toSignList(id) {
      this.$router.push({ name: 'bjhd_hdlb_hdxq_bmlb', params: { id: id } })
    }
  },
  mounted() {
    if(this.$route.params.id != '') {
      this.xdb_id = this.$route.params.id;
      this.getAcDetail();
      this.getCommentList();
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-list{
  width: 100%;
  li{
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
  }
}
.icon-edit,
.icon-del{
  width: 18px;
  height: 18px;
}
.icon-edit{
  background: url("./src/assets/icon-edit.png") center no-repeat;
  background-size: 18px 18px;
}
.icon-del{
  background: url("./src/assets/icon-del.png") center no-repeat;
  background-size: 18px 18px;
}
</style>