<template>
    <div class="container">
        <header>
            <el-form :label-width="114">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="问题发生时间">
                            <date-time-range-picker-ext
                                v-model="query.happenTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="问题来源">
                            <el-select v-model="query.problemSources">
                                <el-option
                                    v-for="item in dict.problemSources"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="业务类别">
                            <el-select v-model="query.businessType">
                                <el-option
                                    v-for="item in dict.businessType"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="涉嫌问题">
                            <el-select>
                                <el-option
                                    v-for="item in dict.suspectProblem"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="问题内容">
                            <el-input placeholder="请输入问题内容" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="涉及单位">
                            <depart-tree-select
                                v-model="query.involveDepartId"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="办理单位">
                            <depart-tree-select
                                v-model="query.involveDepartId"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="办理状态">
                            <el-select></el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row> </el-row>
            </el-form>
            <div class="mb-25 flex end">
                <div>
                    <el-button type="primary" @click="getList">
                        <template #icon>
                            <icon name="el-icon-Search" />
                        </template>
                        查询</el-button
                    >
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </header>
        <div class="table-container">
            <el-table :data="favs">
                <el-table-column type="expand">
                    <template #default="{ row }">
                        <div class="row mt-10">
                            <div class="col col-6">
                                <label>样本源头编号</label>
                                <span>{{ row.originId }}</span>
                            </div>
                            <div class="col col-6">
                                <label>问题发现时间</label>
                                <span>{{ row.discoveryTime }}</span>
                            </div>
                            <div class="col col-6">
                                <label>问题发生时间</label>
                                <span>{{ row.happenTime }}</span>
                            </div>
                            <div class="col col-6">
                                <label>问题来源</label>
                                <span>{{ row.problemSources }}</span>
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col col-6" v-if="row.responderName">
                                <label>投诉反映人</label>
                                <span>{{ row.responderName }}</span>
                            </div>
                            <div class="col col-6" v-if="row.contactPhone">
                                <label>联系电话</label>
                                <span>{{ row.contactPhone }}</span>
                            </div>
                            <div class="col col-6">
                                <label>业务类别</label>
                                <span>{{ row.businessTypeName }}</span>
                            </div>
                            <div class="col col-6">
                                <label>涉嫌问题</label>
                                <span>{{ getInvolveProblem(row.involveProblem, dict.suspectProblem) || '/' }}</span>
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col col-6">
                                <label>涉及警种</label>
                                <span>{{ row.policeTypeName || '/' }}</span>
                            </div>
                            <div class="col col-6">
                                <label>涉及单位</label>
                                <span>{{ row.involveDepartName }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="问题发现时间" prop="discoveryTime" />
                <el-table-column label="问题来源" prop="problemSources" />
                <el-table-column label="业务类别" prop="businessTypeName" />
                <el-table-column label="涉嫌问题">
                    <template #default="{ row }">
                        <span>{{ getInvolveProblem(row.involveProblem, dict.suspectProblem) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="问题内容"
                    prop="thingDesc"
                    show-overflow-tooltip
                />
                <el-table-column label="涉及单位" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span>{{ row.involveDepartName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            link
                            @click="handleAction(row)"
                            >详情</el-button
                        >
                        <el-button
                            type="danger"
                            link
                            @click="handleDelFav(row.negativeId)"
                            >取消收藏</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :current-page="query.current"
                :page-sizes="[10, 20, 50]"
                :page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>

    <negative-dialog v-model="show" :id="activeNegativeId" />
</template>
<script lang="ts" setup>
import { listFav, delFav } from "@/api/work/fav";
import feedback from "@/utils/feedback";
import useCatchStore from "@/stores/modules/catch";
import { getDictLable, getInvolveProblem } from "@/utils/util";

const dict = useCatchStore().getDicts([
    "problemSources",
    "businessType",
    "suspectProblem",
    "processingStatus",
]);
console.log(dict);

const favs = ref([]);
const query = ref({
    current: 1,
    size: 10,
});
const total = ref(0);

function getList() {
    listFav().then((data) => {
        favs.value = data.records;
        total.value = data.total;
    });
}

onMounted(() => {
    getList();
});

function reset() {
    query.value = {
        current: 1,
        size: 10,
    };
    getList();
}

const show = ref(false);
const activeNegativeId = ref("");

function handleAction(row) {
    show.value = true;
    activeNegativeId.value = row.negativeId;
}

async function handleDelFav(negativeId) {
    await feedback.confirm("确定要取消收藏？");
    await delFav(negativeId);
    getList();
}
</script>