<template>
  <el-drawer
    title="文章评论"
    :visible.sync="drawer"
    size="70%"
    @close="$emit('cancel')"
  >
    <table-with-page
      :columns="columns"
      :items="items"
      :pagination="pagination"
      :page-change="pageChange"
    />
    <div class="flex-end mcol-10 btn-footer">
      <el-button @click="drawer = false">返回</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { getTagTypeInArr, setStatus } from '@/utils'

import mxFilterList from '@/mixins/filterList'
import { getListInArticle } from '@/model/comment'
// import { saveItem, getItem, deleteArticle } from '@/model/article'

export default {
  name: 'ArticleCommentItem',

  mixins: [mxFilterList({
    fetchList: getListInArticle // 在下方data再声明一个 fetchList: getList 同等效果
  })],

  props: {
    id: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      drawer: true,
      columns: [
        {
          key: 'sort',
          name: '优先级',
          minWidth: '50'
        }, {
          key: 'moduleType',
          name: '评价来源',
          minWidth: '80'
          // type: 'tag',
          // fetchTagType: (val) => getTagTypeInArr(MODULETYPE.ARTICLE_ITEM_MODAL_TAG_TYPE, val)
        }, {
          key: 'title',
          name: '评论课程',
          minWidth: '80'
        }, {
          key: 'createDate',
          name: '评论时间',
          minWidth: '150'
        }, {
          key: 'personInfo',
          name: '评论发布人',
          minWidth: '100'
        }, {
          key: 'comment',
          name: '评论内容',
          minWidth: '80',
          render: (h, { row }) => {
            console.log(row)
            if (row.isIllegal) {
              return h('el-tooltip', {
                props: {
                  content: row.sensitiveWords,
                  effect: 'light'
                }
              }, [h('span', row.comment)])
            } else {
              return h('span', row.comment)
            }
          }
        }, {
          key: 'isAdminReadF',
          name: '查看状态',
          minWidth: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['已查看', '未查看'], ['success', 'danger']), val)
        }, {
          key: 'isTopF',
          name: '置顶状态',
          minWidth: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['已置顶', '未置顶'], ['success', 'danger']), val)
        }, {
          key: 'isShowF',
          name: '展示状态',
          minWidth: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['已展示', '未展示', '未审批'], ['success', 'danger', 'warning']), val)
        }, {
          key: 'isPassedF',
          name: '审核状态',
          minWidth: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['通过', '拒绝', '未审核'], ['success', 'danger', 'warning']), val)
        }
      ]
    }
  },

  computed: {

  },

  mounted() {
    this.id && this.reload()
  },

  methods: {
    async pageChange(page) {
      this.pagination.page = page
      const inParams = {
        'data': {
          ...this.filter,
          ...this.internalFilterObj
        },
        articleId: this.id,
        'start': this.pagination.page,
        'limit': this.pagination.pageSize
      }
      const {
        success, data, msg
      } = await this.apiList(inParams)
      if (success) {
        const { items, total } = data
        if (items.length === 0 && this.pagination.page > 1) {
          this.pageChange(1)
        } else {
          this.items = items
          this.$set(this.pagination, 'total', total)
        }
        this.loadCallBack(data)
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mt-60 {
  margin-top: 60px;
}
.mcol-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mcol-20 .el-row {
  font-size: 14px;
  line-height: 1.7;
  padding-top: 14px;
}
.search-box {
  border: 1px #DCDEE2 solid;
  padding: 5px;
}
.search-box .search-input {
  margin: 0 5px;
  max-width: 200px;
}
.btn-footer {
  margin-right: 15px;
}
</style>
