<template>
    <div class="app-container">
      <el-tabs v-model="goodsType" @tab-click="onChangeGoodsType">
        <el-tab-pane  label="普通商品" name="0"></el-tab-pane>
        <el-tab-pane  label="生活服务" name="2"></el-tab-pane>
        <el-tab-pane  label="汽车美容" name="3"></el-tab-pane>
      </el-tabs>
        <!-- 搜索区域卡片 -->
        <el-card class="search-card" shadow="never">
            <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" label-width="100px">
                <el-form-item prop="goodsId">
                    <el-select v-model="queryParams.goodsId" placeholder="选择商品" clearable filterable style="width: 220px" @change="handleQuery">
                        <el-option v-for="item in goodsList" :key="item.id" :label="item.goodsName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="phoneNumber">
                    <el-input v-model="queryParams.phoneNumber" placeholder="客户手机号" clearable style="width: 180px" @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="queryCreateTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px" @change="getCreateTime" />
                </el-form-item>
                <el-form-item label="评论类型" prop="commentType">
                    <el-radio-group v-model="queryParams.commentType">
                        <el-radio-button label="0">好评</el-radio-button>
                        <el-radio-button label="1">差评</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 操作按钮区域 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd" v-hasPermi="['goods:goodsComment:add']">新增评论</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-dropdown @command="handleBatchCommand" v-show="!multiple">
                    <el-button type="primary" plain> 批量操作<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="show">显示评论</el-dropdown-item>
                        <el-dropdown-item command="hide">隐藏评论</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 评论列表 -->
        <Page uri="/mapi/goods/goodsComment/list" :request-params="queryParams" ref="pagination" :selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" fixed="left" />
                <el-table-column label="商品信息" align="left" min-width="200">
                    <template slot-scope="scope">
                        <div v-for="(sku, index) in scope.row.skuList" :key="index" class="goods-info">
                            <div class="goods-detail">
                                <div class="goods-name">{{ sku.goodsName }}</div>
                                <div class="sku-name text-gray">{{ sku.skuName }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="评分" align="center" width="150">
                    <template slot-scope="scope">
                        <div class="score-type">
                            <el-rate v-model="scope.row.commentScore" disabled text-color="#ff9900" score-template="{value}" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="类型" align="center" width="120">
                    <template slot-scope="scope">
                        <div class="comment-status">
                            <el-tag :type="scope.row.commentType === '0' ? 'success' : 'danger'" size="small">
                                {{ scope.row.commentType === '0' ? '好评' : '差评' }}
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="评论内容" align="left" min-width="250">
                    <template slot-scope="scope">
                        <div class="comment-content">
                            <div class="text">{{ scope.row.commentContent }}</div>
                            <div class="images" v-if="scope.row.commentImgs">
                                <el-image v-for="(img, index) in getimgList(scope.row.commentImgs)" :key="index" :src="img" :preview-src-list="getimgList(scope.row.commentImgs)" fit="cover" style="width: 60px; height: 60px; margin-right: 8px; border-radius: 4px" />
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" width="180">
                    <template slot-scope="scope">
                        <div class="comment-status">
                            <el-tag :type="scope.row.isShow === 'Y' ? 'success' : 'info'" effect="plain">
                                {{ scope.row.isShow === 'Y' ? '显示中' : '已隐藏' }}
                            </el-tag>
                            <el-tag type="warning" effect="plain" v-if="scope.row.isVirtual === 'Y'">虚拟评论</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.isVirtual === 'Y'" type="text" icon="el-icon-edit" @click="editreplyComment(scope.row)">编辑</el-button>
                        <el-button type="text" :icon="scope.row.isShow === 'N' ? 'el-icon-view' : 'el-icon-hide'" @click="scope.row.isShow === 'N' ? handleShow2(scope.row) : handleNoShow2(scope.row)">{{ scope.row.isShow === 'N' ? '显示' : '隐藏' }}</el-button>
                        <el-dropdown trigger="click">
                            <el-button type="text"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="replyComment(scope.row)"> <i class="el-icon-chat-line-round"></i> 回复评论 </el-dropdown-item>
                                <el-dropdown-item @click.native="showReplyComment(scope.row)"> <i class="el-icon-tickets"></i> 查看回复 </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </Page>

        <!-- 添加或修改评论对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="商品" prop="goodsId">
                    <el-select v-model="form.goodsId" placeholder="请选择商品" clearable filterable style="width: 100%" :disabled="form.id ? true : false" @change="getSkuList(form.goodsId)">
                        <el-option v-for="item in goodsList" :key="item.id" :label="item.goodsName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="规格" prop="goodsSkuId">
                    <el-select v-model="form.goodsSkuId" placeholder="请选择规格" clearable filterable style="width: 100%" :disabled="form.id ? true : false">
                        <el-option v-for="item in skuList" :key="item.id" :label="item.skuValues" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="评分" prop="commentScore">
                    <el-rate v-model="form.commentScore" :max="5" :colors="['#ff9900', '#ff9900', '#ff9900']" />
                </el-form-item>
                <el-form-item label="评论内容" prop="commentContent">
                    <el-input v-model="form.commentContent" type="textarea" placeholder="请输入评论内容" :rows="4" maxlength="255" show-word-limit />
                </el-form-item>
                <el-form-item label="评论图片">
                    <image-upload v-model="form.commentImgs" :limit="9" />
                </el-form-item>
                <el-form-item label="是否显示" prop="isShow">
                    <el-radio-group v-model="form.isShow">
                        <el-radio label="Y">显示</el-radio>
                        <el-radio label="N">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 评论回复对话框 -->
        <el-dialog :title="replayCommentTitle" :visible.sync="addreplayCommentOpen" width="500px" :before-close="handleClose">
            <el-form ref="replayForm" :model="replayForm" :rules="replayrules">
                <el-form-item prop="commentContent">
                    <el-input type="textarea" :rows="4" placeholder="请输入回复内容" v-model="replayForm.commentContent" maxlength="200" show-word-limit />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="replyLoading" @click="addreplayCommentSubmit">确 定</el-button>
                <el-button @click="addreplayCommentOpen = false">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 回复列表对话框 -->
        <el-dialog title="评论回复记录" :visible.sync="ReplyCommentType" width="680px" append-to-body>
            <div class="reply-list">
                <el-timeline>
                    <el-timeline-item v-for="(item, index) in ReplyCommentList" :key="index" :type="item.userId ? 'primary' : 'success'" :timestamp="item.createTime" placement="top">
                        <el-card class="reply-card" shadow="never">
                            <div class="reply-header">
                                <span class="reply-user">{{ item.userId ? '用户回复' : '商家回复' }}</span>
                                <!-- <el-button v-if="!item.userId" type="text" size="mini" @click="commentUpdate(item)">编辑</el-button> -->
                            </div>
                            <div class="reply-content">{{ item.commentContent }}</div>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
                <div class="no-data" v-if="ReplyCommentList.length === 0">
                    <i class="el-icon-chat-dot-square"></i>
                    <span>暂无回复记录</span>
                </div>
            </div>
            <div v-if="ReplyCommenttotal > 0" class="reply-pagination">
                <pagination :total="ReplyCommenttotal" :page.sync="queryCommentReply.pageNum" :limit.sync="queryCommentReply.pageSize" @pagination="getReplyCommentList" />
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.app-container {
    .search-card {
        margin-bottom: 16px;
    }

    .goods-info {
        display: flex;
        align-items: center;
        padding: 8px 0;

        .goods-detail {
            .goods-name {
                font-size: 14px;
                margin-bottom: 4px;
            }

            .sku-name {
                font-size: 13px;
                color: #909399;
            }
        }
    }

    .score-type {
        .el-rate {
            margin-bottom: 8px;
        }
    }

    .comment-content {
        .text {
            margin-bottom: 8px;
            line-height: 1.5;
        }

        .images {
            display: flex;
            flex-wrap: wrap;
        }
    }

    .comment-status {
        .el-tag + .el-tag {
            margin-left: 8px;
        }
    }

    .reply-list {
        max-height: 500px;
        overflow-y: auto;
        padding: 0 20px;

        .reply-card {
            .reply-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;

                .reply-user {
                    font-size: 14px;
                    font-weight: 500;
                }
            }

            .reply-content {
                color: #606266;
                line-height: 1.5;
            }
        }

        .no-data {
            text-align: center;
            color: #909399;
            padding: 32px 0;

            i {
                font-size: 32px;
                margin-bottom: 8px;
            }

            span {
                display: block;
            }
        }
    }

    .reply-pagination {
        border-top: 1px solid #ebeef5;
        padding-top: 16px;
        margin-top: 16px;
    }
}

.text-gray {
    color: #909399;
}
</style>

<script>
import { listGoodsComment, getGoodsComment, delGoodsComment, addGoodsComment, updateGoodsComment, updateGoodsCommentStatus, noShowComment, showComment, getCommentgood, getCommentSku, getCommentReply, getQueryCommentReply } from '@/api/core/goodsComment'

export default {
    name: 'GoodsComment',
    dicts: ['sys_normal_disable','goods_type', 'sys_yes_no', 'sys_job_status'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 商品评论表格数据
            goodsCommentList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                goodsSkuId: null,
                userId: null,
                goodsId: null,
                commentScore: null,
                commentType: null,
                commentContent: null,
                commentImgs: null,
                commentSrcType: null,
                isShow: null,
                isVirtual: null,
                phoneNumber: null,
                createTimeFrom: '',
                createTimeTo: ''
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                goodsId: [{ required: true, message: '商品不能为空', trigger: 'change' }],
                goodsSkuId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
                commentScore: [{ required: true, message: '评分不能为空', trigger: 'blur' }],
                commentType: [{ required: true, message: '评论类型不能为空', trigger: 'blur' }],
                commentContent: [{ required: true, message: '评论内容不能为空', trigger: 'blur' }],
                isShow: [{ required: true, message: '是否显示不能为空', trigger: 'blur' }]
            },
            goodsType: null,
            goodsList: [],
            skuList: [],
            queryCreateTime: null,
            addreplayCommentOpen: false,
            replayForm: {
                // usercomment: '',
                // commentImgs: '',
                commentContent: '',
                goodsCommentId: ''
            },
            replayrules: {
                commentContent: [{ required: true, message: '评论回复不能为空', trigger: 'blur' }]
            },

            replayCommentTitle: '',
            ReplyCommentType: false,
            queryCommentReply: {
                goodsCommentId: 0,
                pageNum: 1,
                pageSize: 10
            },
            ReplyCommentLoading: false,
            ReplyCommenttotal: 0,
            ReplyCommentList: [],
            submitLoading: false,
            replyLoading: false
        }
    },
    created() {
        this.goodsType = this.getUrlParam('goodsType')
        this.queryParams.goodsType = this.getUrlParam('goodsType')
        this.queryParams.goodsId = this.getUrlParam('goodsId')
        this.getList()
        this.getGoodsList()
    },
    methods: {
        getCreateTime() {
            if (this.queryCreateTime != null) {
                this.queryParams.createTimeFrom = this.queryCreateTime[0]
                this.queryParams.createTimeTo = this.queryCreateTime[1]
            }
        },
      onChangeGoodsType() {
        this.queryParams.goodsType = this.goodsType
        this.handleQuery()
        this.getGoodsList()
      },
        /** 查询商品评论列表 */
        getList() {
            this.$nextTick(() => {
                this.$refs.pagination.handleSearch(true)
            })
        },
        getGoodsList() {
            getCommentgood({
                pageNum: 1,
                pageSize: 999,
                goodsType: this.goodsType
            }).then((response) => {
                this.goodsList = response.data
            })
        },
        getSkuList(id) {
          this.skuList = []
          this.form.goodsSkuId = ''
            getCommentSku({
                pageNum: 1,
                pageSize: 999,
                goodsType: this.goodsType,
                goodsId: id
            }).then((response) => {
                this.skuList = response.data
            })
        },
        //处理图片数组
        getimgList(data) {
            return data ? data.split(',') : []
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
            this.getList()
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                goodsSkuId: null,
                userId: null,
                orderId: null,
                commentScore: null,
                commentType: null,
                commentContent: null,
                commentImgs: null,
                commentSrcType: null,
                delFlag: null,
                createBy: null,
                createById: null,
                createTime: null,
                updateBy: null,
                updateById: null,
                updateTime: null,
                remark: null,
                isShow: null
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加商品评论'
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const id = row.id || this.ids
            getGoodsComment(id).then((response) => {
                this.form = response.data
                this.open = true
                this.title = '修改商品评论'
            })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // console.log(this.form)
                    this.form.goodsCommentId = this.form.id
                    this.form.goodsType = this.goodsType

                    if (this.form.id != null) {
                        updateGoodsComment(this.form).then((response) => {
                            this.$modal.msgSuccess('修改成功')
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addGoodsComment(this.form).then((response) => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        /** 显示按钮操作 */
        handleShow2(row) {
            const ids = []
            ids.push(row.id)
            this.$modal
                .confirm('是否确认将评论在APP显示？')
                .then(function () {
                    return showComment(ids)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('操作成功')
                })
                .catch(() => {})
        },
        /** 隐藏按钮操作 */
        handleNoShow2(row) {
            const ids = []
            ids.push(row.id)
            this.$modal
                .confirm('是否确认将评论在APP隐藏？')
                .then(function () {
                    return noShowComment(ids)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('操作成功')
                })
                .catch(() => {})
        },
        /** 显示按钮操作 */
        handleShow() {
            const ids = this.ids
            if (!ids || ids.length <= 0) {
                this.$modal.msgError('请选择需要操作的数据')
                return
            }
            this.$modal
                .confirm('是否确认将评论在APP显示？')
                .then(function () {
                    return showComment(ids)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('操作成功')
                })
                .catch(() => {})
        },
        /** 隐藏按钮操作 */
        handleNoShow() {
            const ids = this.ids
            if (!ids || ids.length <= 0) {
                this.$modal.msgError('请选择需要操作的数据')
                return
            }
            this.$modal
                .confirm('是否确认将评论在APP隐藏？')
                .then(function () {
                    return noShowComment(ids)
                })
                .then(() => {
                    this.getList()
                    this.getList()
                    this.$modal.msgSuccess('操作成功')
                })
                .catch(() => {})
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'mapi/goods/goodsComment/export',
                {
                    ...this.queryParams
                },
                `goodsComment_${new Date().getTime()}.xlsx`
            )
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {
                    this.cancel()
                })
                .catch(() => {})
        },
        replyComment(row) {
            // this.replayForm.usercomment = row.commentContent;
            // this.replayForm.commentImgs = row.commentImgs;
            this.replayForm.goodsCommentId = row.id
            this.addreplayCommentOpen = true
            this.replayCommentTitle = '新增评论回复'
        },
        handleClose(done) {
            this.$confirm('是否关闭表单？')
                .then((_) => {
                    done()
                })
                .catch((_) => {})
        },
        addreplayCommentSubmit(formName) {
            if (!this.replayForm.commentContent) {
                this.$modal.msgError('请输入回复内容')
                return
            }
            getCommentReply({
                goodsCommentId: this.replayForm.goodsCommentId,
                commentContent: this.replayForm.commentContent
            })
                .then((response) => {
                    this.$modal.msgSuccess('回复成功')
                    this.addreplayCommentOpen = false
                    this.getList()
                })
                .finally(() => {
                    this.replayForm = {
                        commentContent: '',
                        goodsCommentId: ''
                    }
                })
            /*this.$refs[formName].validate((valid) => {
  if (valid) {
    getCommentReply({
      goodsCommentId: this.replayForm.goodsCommentId,
      commentContent: this.replayForm.commentContent
    }).then(response => {
      this.$modal.msgSuccess("回复成功");
      this.addreplayCommentOpen = false;
      this.getList();
    });
  }
});*/
        },
        showReplyComment(row) {
            this.queryCommentReply.goodsCommentId = row.id
            this.ReplyCommentList = []
            this.queryCommentReply.pageNum = 1
            this.ReplyCommentType = true
            this.getReplyCommentList()
        },
        getReplyCommentList() {
            this.ReplyCommentLoading = true
            getQueryCommentReply({
                goodsCommentId: this.queryCommentReply.goodsCommentId,
                pageNum: this.queryCommentReply.pageNum,
                pageSize: this.queryCommentReply.pageSize
            })
                .then((response) => {
                    this.ReplyCommentList = response.rows
                    this.ReplyCommenttotal = response.total
                    this.ReplyCommentLoading = false
                })
                .finally(() => {
                    this.ReplyCommentLoading = false
                })
        },
        commentUpdate(row) {
            this.replayCommentTitle = '编辑评论回复'
            let objform = Object.assign({}, row)
            this.replayForm.goodsCommentId = objform.goodsCommentId
            this.replayForm.commentContent = objform.commentContent
            this.addreplayCommentOpen = true
        },
        //评论编辑
        async editreplyComment(row) {
            this.getSkuList(row.goodsId)
            this.form = Object.assign({}, row)
            this.form.goodsSkuId = row.skuList[0].goodsSkuId
            this.open = true
            this.title = '编辑商品评论'
        }
    }
}
</script>
