<template>
    <div class="container">
        <el-tabs>
            <el-tab-pane label="未下发">
                <header>
                    <el-form :label-width="114">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="预警类型">
                                    <el-input
                                        placeholder="请输入"
                                        v-model="query.systemKeyName"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="案事件名称">
                                    <el-input
                                        placeholder="请输入"
                                        v-model="query.title"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="发生单位">
                                    <depart-tree-select
                                        v-model="query.departId"
                                        placeholder="涉及单位"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="flex between mt-20 mb-26">
                        <div class="flex gap">
                            <el-button type="primary" @click="handleBathJoin">
                                <template #icon>
                                    <icon name="el-icon-Plus" />
                                </template>
                                批量加入</el-button
                            >
                            <el-badge :value="distributeList.length">
                                <el-button
                                    type="primary"
                                    :disabled="distributeList.length === 0"
                                    @click="manualShow = true"
                                    >分发列表</el-button
                                >
                            </el-badge>
                        </div>
                        <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="list" ref="tableRef">
                        <el-table-column
                            type="selection"
                            width="55"
                            :selectable="selectable"
                        />
                        <el-table-column
                            label="预警级别"
                            prop="alarmLevel"
                            width="100"
                            align="center"
                        >
                            <template #default="{ row }">
                                <span v-if="row.alarmLevel"
                                    >{{ row.alarmLevel }}级</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="预警类别"
                            prop="systemKeyName"
                        />
                        <el-table-column label="预警时间" prop="rqsj" />
                        <el-table-column label="案事件名称" prop="title" />
                        <el-table-column
                            label="发生单位名称"
                            prop="fsdwGajgmc"
                        />
                        <el-table-column label="下发状态" width="120">
                            <template #default="{ row }">
                                <span
                                    class="text-danger"
                                    v-if="row.distributionState === '0'"
                                    >未下发</span
                                >
                                <span
                                    class="text-success"
                                    v-if="row.distributionState === '1'"
                                    >已下发</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="160">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleShowInfo(row, false)"
                                    >查看详情</el-button
                                >
                                <el-button
                                    link
                                    @click="handleRemoveManuel(row)"
                                    v-if="distributeList.includes(row)"
                                    >移除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="flex end mt-8">
                    <el-pagination
                        @size-change="getList"
                        @current-change="getList"
                        :page-sizes="[10, 20, 50]"
                        v-model:page-size="query.size"
                        v-model:current-page="query.current"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="已下发">
                <header>
                    <el-form :label-width="114">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="预警类型">
                                    <el-input
                                        placeholder="请输入"
                                        v-model="query2.systemKeyName"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="案事件名称">
                                    <el-input
                                        placeholder="请输入"
                                        v-model="query2.title"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="发生单位">
                                    <depart-tree-select
                                        v-model="query2.departId"
                                        placeholder="涉及单位"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="flex end mt-20 mb-26">
                        <div>
                            <el-button type="primary" @click="getList2">
                                <template #icon
                                    ><icon name="el-icon-Search"
                                /></template>
                                查询</el-button
                            >
                            <el-button @click="reset1">重置</el-button>
                        </div>
                    </div>
                </header>
                <div class="table-container">
                    <el-table :data="list2">
                        <el-table-column
                            label="预警级别"
                            prop="alarmLevel"
                            width="100"
                            align="center"
                        >
                            <template #default="{ row }">
                                <span v-if="row.alarmLevel"
                                    >{{ row.alarmLevel }}级</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="预警类别"
                            prop="systemKeyName"
                        />
                        <el-table-column label="预警时间" prop="rqsj" />
                        <el-table-column label="案事件名称" prop="title" />
                        <el-table-column
                            label="发生单位名称"
                            prop="fsdwGajgmc"
                        />
                        <el-table-column
                            label="操作时间"
                            width="120"
                            prop="updateTime"
                        />
                        <el-table-column label="下发状态" width="120">
                            <template #default="{ row }">
                                <span
                                    class="text-danger"
                                    v-if="row.distributionState === '0'"
                                    >未下发</span
                                >
                                <span
                                    class="text-success"
                                    v-if="row.distributionState === '1'"
                                    >已下发</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleShowInfo(row, true)"
                                    >查看详情</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="flex end mt-8">
                    <el-pagination
                        @size-change="getList2"
                        @current-change="getList2"
                        :page-sizes="[10, 20, 50]"
                        v-model:page-size="query2.size"
                        v-model:current-page="query2.current"
                        layout="total, sizes, prev, pager, next"
                        :total="total2"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="无效">
                <header>
                    <el-form :label-width="114">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="预警类型">
                                    <el-input
                                        placeholder="请输入"
                                        v-model="query1.systemKeyName"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="案事件名称">
                                    <el-input
                                        placeholder="请输入"
                                        v-model="query1.title"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="发生单位">
                                    <depart-tree-select
                                        v-model="query1.departId"
                                        placeholder="涉及单位"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="flex end mt-20 mb-26">
                        <div>
                            <el-button type="primary" @click="getList1">
                                <template #icon
                                    ><icon name="el-icon-Search"
                                /></template>
                                查询</el-button
                            >
                            <el-button @click="reset1">重置</el-button>
                        </div>
                    </div>
                </header>
                <div class="table-container">
                    <el-table :data="list1">
                        <el-table-column
                            label="预警级别"
                            prop="alarmLevel"
                            width="100"
                            align="center"
                        >
                            <template #default="{ row }">
                                <span v-if="row.alarmLevel"
                                    >{{ row.alarmLevel }}级</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="预警类别"
                            prop="systemKeyName"
                        />
                        <el-table-column label="预警时间" prop="rqsj" />
                        <el-table-column label="案事件名称" prop="title" />
                        <el-table-column
                            label="发生单位名称"
                            prop="fsdwGajgmc"
                        />
                        <el-table-column
                            label="操作时间"
                            width="120"
                            prop="updateTime"
                        />
                        <el-table-column label="操作" width="180">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleShowInfo(row, true)"
                                    >查看详情</el-button
                                >
                                <el-button link @click="handleRestore(row)"
                                    >恢复数据</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="flex end mt-8">
                    <el-pagination
                        @size-change="getList1"
                        @current-change="getList1"
                        :page-sizes="[10, 20, 50]"
                        v-model:page-size="query1.size"
                        v-model:current-page="query1.current"
                        layout="total, sizes, prev, pager, next"
                        :total="total1"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
      <p>网上督察系统数据，自动同步该平台数据，人工筛查后进行问题下发核查办理。</p>
    </div>

    <el-dialog
        title="视频督察详情"
        v-model="show"
        width="80vw"
        top="2vh"
        style="margin-bottom: 0"
        v-loading="infoLoading"
    >
        <div v-loading="infoLoading">
            <div class="top-container">
                <div class="row">
                    <div class="col col-6">
                        <label>预警时间</label>
                        <span>{{ info.rqsj }}</span>
                    </div>
                    <div class="col col-6">
                        <label>预警级别</label>
                        <span v-if="info.alarmLevel"
                            >{{ info.alarmLevel }}级</span
                        >
                    </div>
                    <div class="col col-6">
                        <label>登记单位</label>
                        <span>{{ info.registrationDepartName }}</span>
                    </div>
                    <div class="col col-6">
                        <label>发生单位</label>
                        <span>{{ info.happenDepartName }}</span>
                    </div>
                    <div class="col col-12">
                        <label>督察方式</label>
                        <span>{{ info.systemKeyName }}</span>
                    </div>
                    <div class="col col-12">
                        <label>预警标题</label>
                        <span>{{ info.title }}</span>
                    </div>
                    <div class="col col-24">
                        <label>简要情况</label>
                        <span>{{ info.content }}</span>
                    </div>
                </div>
            </div>

            <el-row>
                <el-col :span="5">
                    <h5
                        class="text-center text-bold"
                        style="margin-bottom: 8px; margin-top: 8px"
                    >
                        证据图片时间
                    </h5>
                    <el-scrollbar max-height="500px">
                        <div
                            class="img-item pointer"
                            v-for="item in info.zlList"
                            :key="item"
                            @click="activeZl = item"
                            :active="activeZl.id === item.id"
                        >
                            {{ item.dmtbzrqsj }}
                        </div>
                    </el-scrollbar>
                </el-col>
                <el-col :span="19">
                    <div style="height: calc(96vh - 260px)">
                        <div class="row">
                            <div class="col col-12">
                                <label>发生单位</label>
                                <span>{{ info.happenDepartName }}</span>
                            </div>
                            <div class="col col-12">
                                <label>预警时间</label>
                                <span>{{ activeZl.dmtbzrqsj }}</span>
                            </div>
                        </div>
                        <div
                            style="height: calc(100% - 32px)"
                            class="flex center"
                        >
                            <img :src="activeZl.dzwjwz" alt="" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <footer class="flex end mt-20" style="min-height: 40px">
            <template v-if="!disabledFlag">
                <el-button
                    size="large"
                    type="danger"
                    @click="handleUpdateState"
                    v-if="!distributeList.includes(activeRow)"
                    >查否</el-button
                >
                <el-button
                    size="large"
                    @click="handleJoin"
                    v-if="!distributeList.includes(activeRow)"
                    ><template #icon> <icon name="el-icon-Plus" /> </template
                    >加入分发列表</el-button
                >
                <el-button
                    size="large"
                    @click="handleRemoveManuel(activeRow)"
                    v-else
                    ><template #icon> <icon name="el-icon-Minus" /> </template
                    >从分发列表移除</el-button
                >
                <el-button size="large" type="primary" @click="handleNext"
                    >下一条</el-button
                >
            </template>
        </footer>
    </el-dialog>

    <el-dialog
        title="视频督察数据下发"
        v-model="manualShow"
        width="80vw"
        top="5vh"
        :lock-scroll="false"
    >
        <div style="min-height: 500px">
            <div class="table-container">
                <el-table :data="distributeList">
                    <el-table-column
                        label="预警级别"
                        prop="alarmLevel"
                        width="90"
                        align="center"
                    >
                        <template #default="{ row }">
                            <span v-if="row.alarmLevel"
                                >{{ row.alarmLevel }}级</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column label="预警类别" prop="systemKeyName" />
                    <el-table-column label="预警时间" prop="rqsj" />
                    <el-table-column label="案事件名称" prop="title" />
                    <el-table-column label="发生单位名称" prop="fsdwGajgmc" show-overflow-tooltip />
                    <el-table-column label="操作" width="140">
                        <template #default="{ row }">
                            <el-button
                                type="info"
                                link
                                @click="handleRemoveManuel(row)"
                                >移除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <footer class="flex end mt-20">
            <el-button
                type="primary"
                size="large"
                :disabled="distributeList.length === 0"
                @click="handleShowDistributeDialog"
                >确认数据</el-button
            >
        </footer>
    </el-dialog>

    <el-dialog title="任务分发" v-model="distributeShow" width="50vw" top="5vh">
        <el-form
            :label-width="120"
            ref="formRef"
            :model="formData"
            v-loading="submitLoading"
        >
            <el-form-item
                label="任务名称"
                prop="taskName"
                :rules="{
                    required: true,
                    message: '请输入任务名称',
                }"
            >
                <el-input
                    v-model="formData.taskName"
                    style="width: 280px"
                    placeholder="请输入"
                />
            </el-form-item>
            <el-form-item label="指定办理单位" prop="handleDepartId">
                <div class="flex gap">
                    <div style="width: 280px">
                        <depart-tree-select v-model="formData.handleDepartId" />
                    </div>
                    <div class="tips mt-10">
                        <p>指定具体办理单位 指将问题分派给哪个单位办理。</p>
                    </div>
                </div>
            </el-form-item>
            <el-form-item
                label="业务类别"
                prop="businessTypeCode"
                :rules="{
                    required: true,
                    message: '请选择业务类别',
                    trigger: ['blur'],
                }"
            >
                <el-select
                    v-model="formData.businessTypeCode"
                    style="width: 280px"
                >
                    <el-option
                        v-for="item in dict.businessType"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="涉嫌问题"
                prop="involveProblem"
                :rules="{
                    required: true,
                    message: '请选择涉嫌问题',
                    trigger: ['blur'],
                }"
            >
                <el-select
                    v-model="formData.involveProblem"
                    multiple
                    clearable
                    style="width: 280px"
                >
                    <el-option
                        v-for="item in dict.suspectProblem"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="涉及警种" prop="policeType">
                <el-select
                    v-model="formData.policeType"
                    clearable
                    style="width: 280px"
                >
                    <el-option
                        v-for="item in dict.policeType"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                </el-select>
            </el-form-item>

            <el-form-item
                label="问题类型"
                prop=""
                v-for="(item, index) in formData.problems"
                :key="index"
            >
                <div class="flex v-center">
                    <problem-type-select v-model="item.threeLevelCode" />
                    <el-button
                        plain
                        type="danger"
                        size="small"
                        class="ml-20"
                        @click="handleRemoveProblem(index)"
                    >
                        <template #icon>
                            <icon name="el-icon-Delete" />
                        </template>
                        删除问题
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item
                label="办理时限"
                prop="timeLimit"
                :rules="{
                    required: true,
                    message: '请选择办理时限',
                }"
            >
                <time-limit-select
                    v-model="formData.timeLimit"
                    v-model:maxSignDuration="formData.maxSignDuration"
                    v-model:maxHandleDuration="formData.maxHandleDuration"
                    v-model:maxExtensionDuration="formData.maxExtensionDuration"
                />
            </el-form-item>

            <el-form-item
                label="下发流程"
                prop="distributionFlow"
                :rules="{
                    required: true,
                    message: '请选择下发流程',
                }"
            >
                <el-radio-group
                    v-model="formData.distributionFlow"
                    class="block"
                >
                    <el-radio
                        v-for="item in dict.distributionFlow"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item
                label="审核流程"
                prop="approvalFlow"
                :rules="{
                    required: true,
                    message: '请选择审核流程',
                }"
            >
                <el-radio-group v-model="formData.approvalFlow">
                    <el-radio
                        v-for="item in dict.approvalFlow"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel
                        }}{{ item.remark ? `(${item.remark})` : "" }}</el-radio
                    >
                </el-radio-group>
                <div class="tips mt-10">
                    <p>
                        三级审核　在问题提交办结时，需经过“所队—>二级机构—>市局”三级审核，通过后方可办结；
                    </p>
                    <p>
                        二级审核　在问题提交办结时，仅需经过“所队—>二级机构”两级审核，通过后即可办结；
                    </p>
                </div>
            </el-form-item>
        </el-form>
        <footer class="flex end mt-20">
            <el-button
                type="primary"
                size="large"
                @click="handleSubmit"
                v-loading="submitLoading"
                >确认下发</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import {
    listVideoInspection,
    getVideoInspectionInfo,
    distributeData,
    updateState,
} from "@/api/data/videoInspection";
import feedback from "@/utils/feedback";
import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "distributionState",
    "timeLimit",
    "approvalFlow",
    "distributionFlow",
    "businessType",
    "suspectProblem",
    "policeType",
]);

const query = ref({
    current: 1,
    size: 10,
    state: "1",
    distributionState: "0",
});

const list = ref([]);
const total = ref(0);
let pages = 1;
async function getList() {
    const data = await listVideoInspection(query.value);
    list.value = data.records;
    total.value = data.total;
    pages = data.pages;
}

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

function reset() {
    query.value = {
        current: 1,
        size: 10,
        state: "1",
        distributionState: '0'
    };
    getList();
}
//------------------------------
const query1 = ref({
    current: 1,
    size: 10,
    state: "0",
});
const list1 = ref([]);
const total1 = ref(0);
async function getList1() {
    const data = await listVideoInspection(query1.value);
    list1.value = data.records;
    total1.value = data.total;
}

function reset1() {
    query1.value = {
        current: 1,
        size: 10,
        state: "0",
    };
    getList1();
}

//------------------------------
const query2 = ref({
    current: 1,
    size: 10,
    state: "1",
    distributionState: '1'
});
const list2 = ref([]);
const total2 = ref(0);
async function getList2() {
    const data = await listVideoInspection(query2.value);
    list2.value = data.records;
    total2.value = data.total;
}

function reset2() {
    query2.value = {
        current: 1,
        size: 10,
        state: "1",
        distributionState: "1",
    };
    getList2();
}

const show = ref(false);
const infoLoading = ref(false);
const info = ref({});
const activeZl = ref({});

const activeRow = ref({});
const disabledFlag = ref(false);
async function handleShowInfo(row, disabled) {
    activeRow.value = row;
    show.value = true;
    disabledFlag.value = disabled;
}

const manualShow = ref(false);
const distributeList = ref([]);

const tableRef = ref();
function handleBathJoin() {
    const rows = tableRef.value.getSelectionRows();
    rows.forEach((row) => {
        if (
            distributeList.value.filter((item) => item.id === row.id).length ===
            0
        ) {
            distributeList.value.push(row);
        }
    });
}

function handleJoin() {
    if (
        distributeList.value.filter((item) => item.id === activeRow.value.id).length ===
        0
    ) {
        distributeList.value.push(activeRow.value);
    }
}

function selectable(row) {
    return row.distributionState === "0";
}

function handleRemoveManuel(row) {
    distributeList.value.splice(distributeList.value.indexOf(row), 1);
}

function handleShowDistributeDialog() {
    distributeShow.value = true;
}

const distributeShow = ref(false);
const formData = ref({});
const submitLoading = ref(false);
const formRef = ref();

async function handleSubmit() {
    await formRef.value.validate();
    formData.value.data = distributeList.value;
    submitLoading.value = true;
    try {
        await distributeData(formData.value);
    } catch (e) {
        submitLoading.value = false;
        throw e;
    }
    distributeShow.value = false;
    manualShow.value = false;
    submitLoading.value = false;
    getList();
    getList2();
    distributeList.value = [];
    await feedback.confirm("问题已下发，请到“综合查询”页面查看");
    router.push("/query");
}

async function handleNext() {
    let index = list.value.indexOf(activeRow.value);
    if (index === list.value.length - 1) {
        if (query.value.current === pages) {
            infoLoading.value = false;
            feedback.alert("当前已是最后一条数据！", "温馨提示");
            return;
        }
        query.value.current += 1;
        infoLoading.value = true;
        await getList();
        index = 0;
    } else {
        index++;
    }
    activeRow.value = list.value[index];
}

watch(activeRow, async () => {
    infoLoading.value = true;
    info.value = await getVideoInspectionInfo(activeRow.value.id);
    if (info.value.zlList.length > 0) {
        activeZl.value = info.value.zlList[0];
    } else {
        activeZl.value = {};
    }
    infoLoading.value = false;
});

async function handleUpdateState() {
    await feedback.confirm("确认要将该数据判断为无效？");
    infoLoading.value = true;
    await updateState(activeRow.value.id, "0");
    getList();
    getList1();
    handleNext();
}

async function handleRestore(row) {
    await feedback.confirm("确认要恢复该数据？");
    infoLoading.value = true;
    await updateState(row.id, "1");
    getList();
    getList1();
}
</script>
<style scoped lang="scss">
.top-container {
    border-bottom: 1px solid #e9ebfd;
    margin-bottom: 20px;
}
.img-item {
    height: 32px;
    line-height: 32px;

    padding-left: 20px;
    font-size: 12px;
    &:hover,
    &[active="true"] {
        background: #e1e5ff;
    }
}
</style>