<template>
  <div>
    <toolbar
      @onSearch="filterData"
    />
    <white-board>
      <el-row class="header" :gutter="20">
        <el-col class="toolbar-txt" :span="12">今日共收到评价：{{ info.totalNum }}条</el-col>
        <!-- <el-col class="toolbar-txt" :span="6">未用标签：{{ info.unusedTagNum || 0 }}个</el-col> -->
        <el-col class="flex-end" :span="12">
          <el-button icon="el-icon-plus" type="primary" @click="handleSensitiveItem">敏感词设置</el-button>
        </el-col>
      </el-row>
      <table-with-page
        :columns="columns"
        :items="items"
        :pagination="pagination"
        :page-change="pageChange"
      >
        <template #btn-box="scope">
          <el-button type="danger" @click="handleDeleteSelect(scope.selected)">删除</el-button>
        </template>
      </table-with-page>
    </white-board>
  </div>
</template>

<script>
import toolbar from './toolbar'
import EMITKEY from '@/const/emitNameKey'
import { getTagTypeInArr, setStatus } from '@/utils'

import mxFilterList from '@/mixins/filterList'
import { getList, getTodayNum, deleteComment, deleteComments } from '@/model/comment'

export default {
  name: 'CommentPage',

  components: { toolbar },

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

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

  data() {
    return {
      columns: [
        {
          key: 'selection'
        }, {
          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',
          type: 'slot',
          render: (h, { row }) => {
            return h('div', [h('p', row.personInfo), h('p', row.createDate)])
          }
        }, {
          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: 'sort',
          name: '排序（倒序）',
          width: '100'
        }, {
          key: 'isTopF',
          name: '置顶状态',
          width: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['已置顶', '未置顶'], ['success', 'danger']), val)
        }, {
          key: 'isAdminReadF',
          name: '查看状态',
          width: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['已查看', '未查看'], ['success', 'danger']), val)
        }, {
          key: 'isPassedF',
          name: '审核状态',
          width: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['通过', '拒绝', '未审核'], ['success', 'danger', 'warning']), val)
        }, {
          key: 'isShowF',
          name: '展示状态',
          width: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['已展示', '未展示', '未审批'], ['success', 'danger', 'warning']), val)
        }, {
          key: 'action',
          name: '操作',
          width: '150',
          render: (h, { row }) => {
            const action = []
            const isAdminRead = row.isAdminRead
            if (isAdminRead) {
              action.push(h('el-button', {
                props: {
                  type: 'primary'
                },
                on: {
                  click: () => this.view(row)
                }
              }, '详情'))
            } else {
              action.push(h('el-button', {
                props: {
                  type: 'primary'
                },
                on: {
                  click: () => this.approve(row)
                }
              }, '审核'))
            }
            action.push(h('el-popconfirm', {
              style: {
                'margin-left': '10px'
              },
              props: {
                title: '确定删除这项吗？'
              },
              on: {
                onConfirm: () => this.deleteItem(row)
              }
            }, [
              h('el-button', {
                slot: 'reference',
                props: {
                  type: 'danger'
                }
              }, '删除')
            ]))
            return h('div', action)
          }
        }
      ],
      info: {
        totalNum: 0
      },

      dialogVisible: false,
      item: {},
      num: null
    }
  },

  watch: {
    commentType: {
      handler(val) {
        this.internalFilterObj['isReaded'] = val
      },
      immediate: true
    }
  },

  created() {
    this.bus.$on(EMITKEY.COMMENTRELOAD, this.reload)
  },

  beforedestroy() {
    this.bus.$off(EMITKEY.COMMENTRELOAD, this.reload)
  },

  methods: {
    async loadCallBack(source) {
      const { success, data, msg } = await getTodayNum({
        data: {
          ...this.filter,
          ...this.internalFilterObj
        }
      })
      if (success) {
        this.info.totalNum = data
      } else {
        this.$message.error(msg)
      }
    },

    handleSensitiveItem() {
      this.$sensitiveItemModal({
        tagType: this.tagType
      })
    },

    async deleteItem(row) {
      const { success, msg } = await deleteComment({
        id: row.id
      })
      if (success) {
        this.$message.success('删除成功~')
        this.bus.$emit(EMITKEY.COMMENTRELOAD)
      } else {
        this.$message.error(msg)
      }
    },

    async handleDeleteSelected(selected) {
      const { success, msg } = await deleteComments({
        data: {
          ids: selected.map(x => x.id)
        }
      })
      if (success) {
        this.$message.success('删除成功~')
        this.bus.$emit(EMITKEY.COMMENTRELOAD)
      } else {
        this.$message.error(msg)
      }
    },

    view(row) {
      this.$commentItemModal({
        id: row.id,
        modalType: 'view'
      })
    },

    approve(row) {
      this.$commentItemModal({
        id: row.id,
        modalType: 'approve'
      })
    }
  }
}
</script>

<style scoped>
.header {
  padding: 4px 20px 6px 20px;
}
.toolbar-txt {
  font-size: 13px;
  padding: 5px;
  line-height: 1.7;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
