<template>
    <el-card class="!border-none" shadow="never" :body-style="{ 'padding-right': '200px' }">
        <el-form class="ls-form" :model="formData" inline>
            <el-form-item label="服务名称">
                <el-input class="ls-input" v-model="formData.goodsInfo" placeholder="服务名称" />
            </el-form-item>
            <el-form-item label="用户信息">
                <el-input class="ls-input" v-model="formData.userInfo" placeholder="昵称/手机号" />
            </el-form-item>
            <el-form-item label="回复状态">
                <el-select v-model="formData.status" class="ls-input" placeholder="请选择">
                    <el-option label="全部" value />
                    <el-option label="待回复" value="0" />
                    <el-option label="已回复" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="用户评价">
                <el-select v-model="formData.commentLevel" class="ls-input" placeholder="请选择">
                    <el-option label="全部" value />
                    <el-option label="好评" :value="1" />
                    <el-option label="中评" :value="2" />
                    <el-option label="差评" :value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="服务师傅">
                <el-input class="ls-input" v-model="formData.staffInfo" placeholder="编号/姓名" clearable />
            </el-form-item>
            <el-form-item label="评价时间">
                <data-picker class="ls-input" style="width: 280px" v-model:startTime="formData.startTime" v-model:endTime="formData.endTime" />
            </el-form-item>
            <el-form-item>
                <div class="flex">
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card shadow="never" class="mt-4 !border-none">
        <el-table ref="tableDataRef" :data="pager.lists" style="width: 100%" v-loading="pager.loading">
            <el-table-column label="服务名称" min-width="180">
                <template #default="scope">
                    <div class="flex items-center">
                        <el-image
                            style="width: 60px; height: 60px"
                            :src="scope.row.goodsImageUrl"
                            :preview-src-list="[scope.row.goodsImageUrl]"
                            :hide-on-click-modal="true"
                            :preview-teleported="true"
                            :fit="'cover'"
                        />
                        <div class="ml-2 goods-info">{{ scope.row.goodsName }}</div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column property="userInfo" label="用户手机号" min-width="160">
                <template #default="scope">
                    <el-popover placement="top-start" width="200px" trigger="hover">
                        <div class="flex">
                            <span class="flex-none mr-2">头像：</span>
                            <el-image :src="scope.row.avatarUrl" style="width: 40px; height: 40px; border-radius: 50%" />
                        </div>
                        <div class="flex mt-2">
                            <span class="flex-none mr-2">昵称：</span>
                            <span>{{ scope.row.nickname }}</span>
                        </div>
                        <div class="flex mt-2">
                            <span class="flex-none mr-6">ID：</span>
                            <span>{{ scope.row.sn }}</span>
                        </div>
                        <template #reference>
                            <div class="pointer">
                                {{ scope.row.userMobile }}
                            </div>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="staffSn" label="师傅编号" min-width="160">
                <template #default="{ row }">{{ parseEmpty(row, 'staffSn') }}</template>
            </el-table-column>
            <el-table-column prop="staffName" label="师傅姓名" min-width="160">
                <template #default="{ row }">{{ parseEmpty(row, 'staffName') }}</template>
            </el-table-column>
            <el-table-column prop="commentLevel" label="用户评价" min-width="160">
                <template #default="scope">
                    <el-rate v-model="scope.row.serviceComment" disabled />
                    <div class="ml-[20px] lighter text-xs">
                        {{ scope.row.commentLevelName }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="客服评分" min-width="180">
                <template #default="scope">
                    <view class="editable">
                        <span>{{ parseComment(scope.row.customerServiceAppraise) }}</span>
                        <el-link type="primary" @click="handleEditable(scope)" class="ml-1">修改评分</el-link>
                    </view>
                </template>
            </el-table-column>

            <el-table-column label="评价内容" min-width="200">
                <template #default="scope">
                    <div class="m-l-10">{{ scope.row.comment }}</div>
                    <div class="m-t-10">
                        <div v-for="(item, index) in scope.row.commentUrlList" :key="index" class="inline mr-[5px]">
                            <el-image
                                style="width: 60px; height: 60px"
                                :src="item"
                                :preview-src-list="[item]"
                                :hide-on-click-modal="true"
                                :preview-teleported="true"
                                :fit="'cover'"
                            />
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="reply" label="回复内容" min-width="180">
                <template #default="scope">
                    {{ scope.row.reply || '-' }}
                </template>
            </el-table-column>
            <el-table-column property="statusName" label="回复状态" min-width="140">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.status === 0">待回复</el-tag>
                    <el-tag type="success" v-if="scope.row.status === 1">已回复</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="createTime" label="评价时间" min-width="180" />
            <el-table-column label="操作" min-width="180" fixed="right">
                <template #default="scope">
                    <div class="flex">
                        <evaluate-form
                            :id="scope.row.id"
                            :title="scope.row.status ? '编辑回复' : '回复评价'"
                            :reply="scope.row.reply"
                            @refresh="getLists"
                        />
                        <el-link class="ml-4" type="danger" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { apiCommentLists, apiCommentDel, apiCustomerServiceAppraise, apiStaffScore } from '@/api/service/evaluate'
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import DataPicker from '@/components/daterange-picker/index.vue'
import evaluateForm from './components/evaluate-form.vue'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import type { ElInput, ElTable } from 'element-plus'
import { useAuthStaffOperation } from '@/hooks/useCommon'
import { useCreateModal } from '@/hooks/useCreateModal'
import ScoreDialog from './components/scoreDialog.vue'
import { parseEmpty } from '@/utils/util'

const route = useRoute()

interface formDataObj {
    goodsInfo?: string
    userInfo?: string
    status?: string
    commentLevel: string
    startTime: string
    endTime: string
    staffInfo: any
}

const tableDataRef = ref<InstanceType<typeof ElTable>>()

const formData = ref<formDataObj>({
    goodsInfo: '',
    userInfo: '',
    status: '',
    commentLevel: '',
    startTime: '',
    endTime: '',
    staffInfo: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiCommentLists,
    params: formData.value
})
const commandComponent = useCreateModal(ScoreDialog)

// 删除广告位
const handleDelete = async (id: number): Promise<void> => {
    await feedback.confirm('确认要删除吗？')
    await apiCommentDel({ id })
    getLists()
}
// getLists()

/**编辑客服评分 */
const handleEditable = async (scope: any) => {
    // const data = await fetchStaffScore(scope)
    const { id, customerServiceAppraise, serviceComment, staffId } = scope.row
    const score = customerServiceAppraise ?? serviceComment
    commandComponent({
        title: '修改服务评分',
        width: 500,
        originScore: score,
        // staffScore: data,
        serviceComment: score,
        id,
        staffId,
        onConfirm: async payload => {
            try {
                const data = {
                    id,
                    customerServiceAppraise: payload.customerServiceAppraise
                }
                await apiCustomerServiceAppraise(data)
                feedback.msgSuccess('修改成功')
                getLists()
            } catch (error) {}
        }
    })
}
/**获取师傅修改后的评分 */
// const fetchStaffScore = (scope: any) => {
//     const { id, staffId, customerServiceAppraise, serviceComment } = scope.row
//     const score = customerServiceAppraise ?? serviceComment
//     return new Promise(async resolve => {
//         try {
//             const data = {
//                 id,
//                 staffId,
//                 score
//             }
//             const result = await apiStaffScore(data)
//             resolve(result)
//         } catch (error) {}
//     })
// }

const parseComment = (val: number) => {
    return val ? `${val}分` : ''
}

onMounted(() => {
    initParams()
    getLists()
})

/**设置路由传递过来的参数 */
function initParams() {
    if (!route.query && !Object.keys(route.query).length) return
    formData.value.staffInfo = route.query.staffInfo
}
</script>

<style lang="scss" scoped>
.ls-input {
    width: 280px;
}

.el-rate__item {
    line-height: 12px;

    i {
        margin-right: 2px !important;
    }
}

.goods-info {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    flex: 1;
}

.editable {
    display: flex;
    align-items: center;
    gap: 5px;

    .el-icon {
        cursor: pointer;
    }
}
</style>
