<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div v-show="showSearch" class="search">
                <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="85px">
                    <el-form-item label="反馈类型" prop="feedbackType">
                        <el-select v-model="queryParams.feedbackType" placeholder="请选择反馈类型" clearable>
                            <el-option v-for="dict in sys_complaint_type" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户姓名" prop="customerName">
                        <el-input v-model="queryParams.customerName" placeholder="请输入客户姓名" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>

        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button v-hasPermi="['system:complaint:remove']" type="danger" plain icon="Delete"
                            :disabled="multiple" @click="handleDelete()">删除</el-button>
                    </el-col>
                    <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
                </el-row>
            </template>

            <el-table v-loading="loading" :data="complaintList" border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="反馈类型" align="center" prop="feedbackType" width="120">
                    <template #default="scope">
                        <dict-tag :options="sys_complaint_type" :value="scope.row.feedbackType" />
                    </template>
                </el-table-column>
                <el-table-column label="反馈内容" align="center" prop="content" :show-overflow-tooltip="true" />
                <el-table-column label="图片" align="center" width="160">
                    <template #default="scope">
                        <div v-if="scope.row.imageUrls"
                            style="display:flex;gap:4px;justify-content:center;flex-wrap:wrap">
                            <el-image v-for="(url, idx) in scope.row.imageUrls.split(',')" :key="idx" :src="url"
                                :preview-src-list="scope.row.imageUrls.split(',')" :initial-index="(idx as number)"
                                fit="cover" style="width:40px;height:40px;border-radius:4px" preview-teleported />
                        </div>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户昵称" align="center" prop="customerNickname" width="120" />
                <el-table-column label="提交时间" align="center" prop="createTime" width="160" />
                <el-table-column label="操作" align="center" width="80">
                    <template #default="scope">
                        <el-button v-hasPermi="['system:complaint:remove']" link type="danger" icon="Delete"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                :total="total" @pagination="getList" />
        </el-card>
    </div>
</template>

<script setup name="Complaint" lang="ts">
import { listComplaint, delComplaint } from '@/api/system/complaint';
import { ComplaintVO, ComplaintQuery } from '@/api/system/complaint/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_complaint_type } = toRefs<any>(proxy?.useDict('sys_complaint_type'));

const complaintList = ref<ComplaintVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();

const data = reactive<PageData<object, ComplaintQuery>>({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        feedbackType: undefined,
        customerName: undefined
    },
    rules: {}
});

const { queryParams } = toRefs(data);

const getList = async () => {
    loading.value = true;
    const res = await listComplaint(queryParams.value);
    complaintList.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const handleSelectionChange = (selection: ComplaintVO[]) => {
    ids.value = selection.map((item) => item.id);
    multiple.value = !selection.length;
};

const handleDelete = async (row?: ComplaintVO) => {
    const _ids = row?.id || ids.value;
    await proxy?.$modal.confirm('是否确认删除所选投诉建议数据？').finally(() => (loading.value = false));
    await delComplaint(_ids);
    proxy?.$modal.msgSuccess('删除成功');
    await getList();
};

onMounted(() => {
    getList();
});
</script>
