<template>
  <div class="comment_manage_page">
    <div class="content">
      <el-tabs
        v-model="formParams.type"
        @tab-click="selectItem"
      >
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.name"
          :name="item.id"
        />
      </el-tabs>
      <div class="toolbar">
        <el-form
          :inline="true"
          :model="formParams"
        >
          <el-form-item label="商家名称">
            <el-input v-model="formParams.storeName" size="mini" />
          </el-form-item>

          <el-form-item label="商家编码">
            <el-input v-model="formParams.tenantCode" size="mini" />
          </el-form-item>

          <el-form-item label="商品ID">
            <el-input v-model="formParams.productId" size="mini" />
          </el-form-item>

          <el-form-item label="关键词">
            <el-input v-model="formParams.keyword" size="mini" />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              @click="query"
            >
              查询
            </el-button>
            <el-button
              plain
              size="mini"
              @click="reset"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="content_table">
        <div class="table">
          <el-table
            :data="tableData.commentDTOList"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="storeName"
              label="商家名称"
            />
            <el-table-column
              prop="tenantCode"
              label="商家编码"
            />
            <el-table-column
              prop="productId"
              label="商品ID"
            />
            <el-table-column
              prop="memberAccount"
              label="评论人"
            />
            <el-table-column
              prop="createTime"
              label="评论日期"
            />
            <el-table-column label="操作">
              <template
                slot-scope="scope"
              >
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="details(scope.row)"
                >
                  查看
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="handle(scope.row)"
                >
                  {{ scope.row.hideFlag? '显示' : '隐藏' }}
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="deletes(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="tableData.total > 0"
          :limit.sync="formParams.pageSize"
          :page.sync="formParams.pageIndex"
          :total="Number(tableData.total)"
          @pagination="fetch"
        />
      </div>
    </div>
    <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 detail from './details'
import { Dialog } from 'element-ui'
import Comment from '@/api/Comment'
export default {
  components: {
    Pagination,
    Dialog,
    detail
  },
  data() {
    return {
      formParams: {
        keyword: '',
        storeName: '',
        tenantCode: '',
        productId: '',
        pageSize: 10,
        pageIndex: 1,
        type: '1'
      },
      date: [],
      tableData: {},
      tabList: [
        { name: '全部评论', id: '1' },
        { name: '敏感评论', id: '2' }
      ],
      dialog: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await Comment.getList(this.formParams)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    query() {
      this.getList()
    },
    details(info) {
      this.dialog = {
        title: '评论详情',
        visible: true,
        info
      }
    },
    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}成功`)
          }
        })
      })
    },
    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('删除成功')
          }
        })
      })
    },
    reset() {
      this.formParams = {
        keyword: '',
        storeName: '',
        tenantCode: '',
        productId: '',
        pageSize: 10,
        pageIndex: 1
      }
    },
    fetch() {
      this.getList()
    },
    selectItem() {
      this.getList()
    },
    close() {
      this.dialog = {}
    }
  }
}
</script>

<style lang='less' scoped>

.comment_manage_page{
    padding: 10px 20px;
    box-sizing: border-box;
    .content {
        background-color: #fff;
        padding: 20px;
        .toolbar {
            padding: 10px;
        }
    }
}

/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;
  }
}

/deep/ .el-dialog__wrapper {
  .el-dialog__header {
    height: 70px;
    background-color: #3A68F2;
    .el-dialog__title {
      font-size:24px;
      color: #fff;
    }
  }
}

/deep/ .el-message-box__btns .el-button {
    margin-right: 10px !important;
}
</style>

