<template>
  <div class="order_page">
    <el-table
      :data="tableData.commentDTOList"
      border
      style="width: 80%"
    >
      <el-table-column
        prop="storeName"
        label="店铺名称"
      />
      <el-table-column
        prop="productName"
        label="商品名称"
      />
      <el-table-column label="操作">
        <template
          slot-scope="scope"
        >
          <el-button
            type="text"
            size="small"
            @click.native.prevent="details(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="form.pageSize"
      :page.sync="form.pageIndex"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
    <Dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :fullscreen="!true"
      :before-close="close"
      width="55%"
    >
      <detail v-if="dialog.visible" :info="dialog.info" @deletes="deletes" @handle="handle" />
    </Dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { Dialog } from 'element-ui'
import detail from '@/views/comment/comment-manage/details'
import Member from '@/api/Member'
import Comment from '@/api/Comment'
export default {
  components: {
    Pagination,
    Dialog,
    detail
  },
  data() {
    return {
      form: {
        pageIndex: 1,
        pageSize: 10
      },
      tableData: {},
      dialog: {}
    }
  },
  created() {
    this.getCommentList()
  },
  methods: {
    async getCommentList() {
      this.form.mid = this.$route.query.id
      const res = await Member.getCommentList(this.form)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    details(info) {
      this.dialog = {
        title: '评论详情',
        visible: true,
        info
      }
    },
    close() {
      this.dialog = {}
    },
    deletes(id) {
      const _ = this
      const params = {
        id: id || _.dialog.info.id,
        action: 3
      }
      _.$confirm('删除后将无法恢复评论', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Comment.handleComment(params).then(res => {
          if (res.data.code === 0) {
            _.dialog = {}
            _.getList()
            _.$message.success('删除成功')
          }
        })
      })
    },
    handle(item) {
      const _ = this
      const ob = item || _.dialog.info
      const params = {
        id: ob.id,
        action: ob.hideFlag ? 1 : 2
      }
      const t = ob.hideFlag ? '显示' : '隐藏'
      _.$confirm(`确定要${t}该评论`, `${t}评论`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Comment.handleComment(params).then(res => {
          if (res.data.code === 0) {
            _.getList()
            _.$message.success(`${t}成功`)
          }
        })
      })
    },
    fetch() {
      this.getCommentList()
    }
  }
}
</script>

<style lang='less' scoped>
/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}
</style>
