<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
        >
            <el-form-item label="订单编号" prop="orderIndex" style="margin-right: 35px;">
                <el-input
                    v-model="queryParams.orderIndex"
                    placeholder="请输入订单编号"
                    maxlength="30"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="服务主题" prop="goodsName" style="margin-right: 35px;">
                <el-input
                    v-model="queryParams.goodsName"
                    placeholder="请输入服务主题"
                    maxlength="30"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item
                label="服务人员手机号"
                prop="phone"
                label-width="110px"
                style="margin-right: 35px;"
            >
                <el-input
                    v-model="queryParams.phone"
                    placeholder="请输入服务人员手机号"
                    maxlength="11"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="服务人员姓名" prop="realName">
                <el-input
                    v-model="queryParams.realName"
                    placeholder="请输入服务人员姓名"
                    maxlength="20"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="评分" prop="score" style="margin-right: 55px;">
                <el-select
                    v-model="queryParams.scoreStart"
                    placeholder="请选择"
                    size="mini"
                    style="width: 100px"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                </el-select>
                -
                <el-select
                    v-model="queryParams.scoreEnd"
                    placeholder="请选择"
                    size="mini"
                    style="width: 100px"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="评价日期">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 280px"
                    size="small"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    style="margin-left: 55px;"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <el-table :data="commentList" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                    >
                        <el-row style="width: 2000px">
                            <el-col :span="24">
                                <el-form-item label="评价内容">
                                    <span>{{ props.row.content }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" style="margin-top: 20px">
                                <el-form-item label="视频图片">
                                    <el-row style="width: 1500px">
                                        <template
                                            v-for="item in resourceList.filter(
                                                (item) =>
                                                    item.commentId ==
                                                    props.row.commontId
                                            )"
                                        >
                                            <video-play
                                                :key="item.id"
                                                style="
                                                    width: 100px;
                                                    height: 100px;
                                                    margin: 20px 0 0 20px;
                                                    display: inline-block;
                                                "
                                                :videoUrl="item"
                                                v-if="item.type == '002'"
                                            ></video-play>
                                            <el-image
                                                :key="item.id"
                                                v-if="item.type == '001'"
                                                :src="item.url"
                                                style="
                                                    width: 100px;
                                                    height: 100px;
                                                    margin: 20px 0 0 20px;
                                                "
                                                @click="vbs(item)"
                                                :preview-src-list="srcList"
                                            />
                                        </template>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item
                                    label="追评"
                                    prop="reContent"
                                    v-if="props.row.reContent !== null"
                                >
                                    <span
                                        >{{ props.row.reContent }}
                                        {{ props.row.reContentTime }}</span
                                    >
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item
                                    label="商家回复"
                                    v-if="props.row.reply !== null"
                                >
                                    <span
                                        >{{ props.row.reply }}
                                        {{ props.row.replyTime }}</span
                                    >
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <br />
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                label="订单编号"
                prop="orderIndex"
            ></el-table-column>
            <el-table-column label="服务主题" prop="goodsName"></el-table-column>
            <el-table-column
                label="服务类型"
                prop="categoryName"
            ></el-table-column>
            <el-table-column
                label="服务人员手机号"
                prop="phone"
            ></el-table-column>
            <el-table-column
                label="服务人员姓名"
                prop="realName"
            ></el-table-column>
            <el-table-column label="评分" prop="goodScore"></el-table-column>
            <el-table-column
                label="各维度评分"
                prop="evaluate"
            ></el-table-column>
            <el-table-column label="评价时间" prop="createTime">
                <template slot-scope="scope">
                    {{ scope.row.createTime | dateFormat("YYYY-MM-DD HH:mm") }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="props">
                    <el-button
                        v-if="props.row.reply == null"
                        @click="handleUpdate(props.row)"
                        >回复</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <!--回复评价-->
        <el-dialog
            :visible.sync="open"
            :title="title"
            width="500px"
            append-to-body
        >
            <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="form.reply"
                :rows="5"
                maxlength="100"
                show-word-limit
                style="margin-bottom: 10px"
            />
            <template #footer>
                <el-button type="primary" @click="submitReply()"
                    >保存</el-button
                >
                <el-button @click="cancel()">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {
    listGoodsCommentByOrderType,
    getComment,
    delComment,
    addComment,
    updateComment,
    exportComment,
} from "@/api/system/goodsComment";
import VideoPlay from "./videoPlay";
import { listResource } from "../../api/system/goodsCommentResource";
import { getInfo } from "@/api/login";
import moment from "moment";

export default {
    name: "index",
    components: { VideoPlay },
    data() {
        return {
            // 日期范围
            dateRange: [],
            srcList: [],
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 商品评价表格数据
            commentList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                orderTypeList: [],
                goodsName: null,
                pageNum: 1,
                pageSize: 10,
                memberId: null,
                serverId: null,
                orderId: null,
                merchantId: null,
                goodsId: null,
                content: null,
                score: null,
                reply: null,
                replyTime: null,
                reContent: null,
                reContentTime: null,
                isAnonymous: null,
                phone: null,
                realName: null,
                commentCreateTime: null,
                scoreStart: null,
                scoreEnd: null,
                beginTime: null,
                endTime: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                delFlag: [
                    {
                        required: true,
                        message: "删除标志不能为空",
                        trigger: "blur",
                    },
                ],
            },
            options: [
                {
                    value: "选项1",
                    label: "0",
                },
                {
                    value: "选项2",
                    label: "1",
                },
                {
                    value: "选项3",
                    label: "2",
                },
                {
                    value: "选项4",
                    label: "3",
                },
                {
                    value: "选项5",
                    label: "4",
                },
                {
                    value: "选项6",
                    label: "5",
                },
            ],
            activeNames: [0],
            resourceList: [],
        };
    },

    created() {
        this.getList();
    },
    methods: {
        updateReply() {
            this.open = true;
        },

        /** 获取商品评价资源*/
        listResource() {
            let param = {
                merchantId: this.queryParams.merchantId,
            };
            listResource(param).then((res) => {
                this.resourceList = res.rows;
            });
        },
        vbs(row) {
            (this.srcList = []), this.srcList.push(row.url);
        },
        /** 查询商品评价列表 */
        getList() {
            getInfo().then((r) => {
                if (r.roles[0] == "merchant") {
                    if (r.merchant.merchantId != null) {
                        this.queryParams.merchantId = r.merchant.merchantId;
                    }
                }
                this.loading = true;
                // 查询预订服务订单评价列表
                this.queryParams.orderTypeList.push('001');
                this.queryParams.orderTypeList.push('002');
                if (this.dateRange) {
                    this.queryParams.beginTime = this.dateRange[0];
                    this.queryParams.endTime = this.dateRange[1]; 
                }
                // 查询评价列表  listComment(this.addDateRange(this.queryParams, this.dateRange))
                listGoodsCommentByOrderType(this.queryParams).then((response) => {
                    this.commentList = response.rows;
                    for (let i in this.commentList) {
                        if (this.commentList[i].reContentTime != null) {
                            var zoneDate = new Date(
                                this.commentList[i].reContentTime
                            ).toJSON();
                            var date = new Date(
                                +new Date(zoneDate) + 8 * 3600 * 1000
                            )
                                .toISOString()
                                .replace(/T/g, " ")
                                .replace(/\.[\d]{3}Z/, "");
                            this.commentList[i].reContentTime = date;
                        }
                    }
                    this.listResource();
                    this.total = response.total;
                    this.loading = false;
                });
            });
        },
        /** 修改回复操作*/
        submitReply() {
            if (!this.form.reply) {
                this.$message.warning("请输入回复内容");
                return;
            }
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10
                    ? "0" + new Date().getMinutes()
                    : new Date().getMinutes();
            let ss =
                new Date().getSeconds() < 10
                    ? "0" + new Date().getSeconds()
                    : new Date().getSeconds();
            var gettime =
                yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
            this.form.replyTime = gettime;
            updateComment(this.form).then((res) => {
                this.open = false;
                this.getList();
                this.$message.success("操作成功");
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.dateRange = [];
            this.queryParams = {
                orderTypeList: [],
                goodsName: null,
                pageNum: 1,
                pageSize: 10,
                memberId: null,
                serverId: null,
                orderId: null,
                merchantId: null,
                goodsId: null,
                content: null,
                score: null,
                reply: null,
                replyTime: null,
                reContent: null,
                reContentTime: null,
                isAnonymous: null,
                phone: null,
                realName: null,
                commentCreateTime: null,
                scoreStart: null,
                scoreEnd: null,
                beginTime: null,
                endTime: null,
            };

            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.reset();
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.commontId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const commontId = row.commontId || this.ids;
            getComment(commontId).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "回复";
            });
        },
    },
};
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
