<template>
  <el-drawer :visible="selectVal" direction="rtl" size="80%" destroy-on-close @close="close">
    <el-row style="padding: 10px 0px;">
      <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe>
        <el-table-column label="开课名称" fixed>
          <template slot-scope="scope">{{ scope.row.openCourseName }}</template>
        </el-table-column>
        <el-table-column label="家长微信昵称" fixed>
          <template slot-scope="scope">{{ scope.row.accountName }}</template>
        </el-table-column>
        <el-table-column label="正文" fixed>
          <template slot-scope="scope">{{ scope.row.context }}</template>
        </el-table-column>
        <el-table-column label="当前是否可见">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.visable === 1" type="success">可见</el-tag>
            <el-tag v-if="scope.row.visable === 0" type="danger">不可见</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="编辑">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.visable" type="primary" plain @click="handleAdult(scope.row.id)">可见</el-button>
            <el-button v-if="scope.row.visable" type="danger" plain @click="handleAdult(scope.row.id)">不可见</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-drawer>
</template>

<script>
import commentApi from '@/api/commentApi'

export default {
  name: 'CommentDrawer',
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    return {
      tableData: [],
      searchForm: {
        name: '', // 课程名称
        accountId: '',
        courseId: '',
        openCourseId: '',
        page: 1,
        size: 50
      }
    }
  },
  computed: {
    selectVal: {
      get() {
        if (this.value) {
          this.list()
        }
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      }
    }
  },
  mounted() {
  },
  methods: {
    close() {
      this.$emit('close')
    },
    list() {
      this.tableData = []
      commentApi.page(this.searchForm).then(data => {
        this.tableData = data.data
      })
    },
    handleAdult(id) {
      commentApi.adult(id).then(data => {
        this.$message({ message: '审核成功', type: 'success' })
        this.list()
      }).catch(() => {
        this.$message({ message: '审核失败', type: 'danger' })
        this.list()
      })
    }
  }
}
</script>

<style>
  .el-drawer__open .el-drawer.rtl {
    overflow-y: auto;
  }
</style>
