<template>
  <ai-list class="comment-list" isTabs>
    <template slot="content">
      <ai-search-bar>
        <template slot="right">
          <el-input
            v-model="searchObj.title"
            size="small"
            placeholder="搜索内容/用户"
            clearable
            v-throttle="() => {page.current = 1, getList()}"
            @clear="page.current = 1, searchObj.title = '', getList()"
            suffix-icon="iconfont iconSearch" />
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="tableData"
        :col-configs="colConfigs"
        stripe
        :total="total"
        :current.sync="page.current"
        :size.sync="page.size"
        style="margin-top: 10px;"
        @getList="getList">
        <el-table-column slot="options" label="操作" fixed="right" width="120" align="center" >
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" title="删除" :disabled="!permissions('app_appnewscentercomment_del')" @click="handleDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
  import moment from "dayjs"
  export default {
    name: "commentList",
    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      areaId:String
    },
    data() {
      return {
        tableData:[],
        total:0,
        isClick: false,
        page:{
          current:1,
          size:10
        },
        searchObj:{
          title:'',
        },
      }
    },
    computed:{
      colConfigs () {
        return [
          {prop: 'title', label: '评论对象',align:'left', width:180},
          {prop: 'content', label: '评论内容',width:280},
          {prop: 'name', label: '用户',align: "center"},
          {prop: 'commentTime', label: '评论时间'},
          {slot: 'options', label: '操作'}
        ]
      },
    },
    methods: {
      resetSearch() {
        this.searchObj.title = "";
        this.getList();
      },
      handleDelete({id}){
       this.$confirm("是否删除？").then(()=>this.deleteComment(id));
      },
      /**
       * 删除评论
       */
      deleteComment(id){
        this.instance.post(`/app/appnewscentercomment/delete?id=${id}`).then(res=>{
          if(res.code==0){
            this.$message.success("删除成功");
            this.getList();
          }
        })
      },
      getList() {
        this.instance.post(`/app/appnewscentercomment/list`, null, {
          params: {
            ...this.page,
            ...this.searchObj,
            areaId: this.areaId
          }
        }).then(res => {
          if (res && res.data) {
            this.tableData = res.data.records.map(e=>{
              return{
                ...e,
                commentTime:moment(e.commentTime).format("YYYY-MM-DD HH:mm")
              }
            });
            this.total = res.data.total;
          }
        })
      },
    },
    mounted(){
      this.getList();
    }
  }
</script>

<style lang="scss" scoped>
.comment-list{
  height: 100%;
  overflow: auto;
  background: #f3f6f9;
}
</style>
