<template>
    <div class="container">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="情指行" name="情指行"> </el-tab-pane>
            <el-tab-pane label="重点人员" name="重点人员"> </el-tab-pane>
            <el-tab-pane label="民意感知" name="民意感知"> </el-tab-pane>
        </el-tabs>
        <header>
            <el-row>
                <el-col :span="12">
                    <div class="form-row flex">
                        <label class="text-center">{{ activeName }}</label>
                        <div class="flex wrap query-box">
                            <el-input
                                placeholder="单位编码"
                                v-model="query.externalId"
                                clearable
                                style="width: 200px"
                            />
                            <el-input
                                placeholder="单位名称"
                                v-model="query.externalName"
                                clearable
                                style="width: 200px"
                            />
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="form-row flex">
                        <label class="text-center">数字督察</label>
                        <div class="flex wrap query-box">
                            <div style="width: 280px">
                                <depart-tree-select
                                    v-model="query.internalId"
                                    placeholder="请选择机构"
                                />
                            </div>
                            <el-select
                                style="width: 200px"
                                placeholder="单位层级"
                                v-model="query.level"
                            >
                                <el-option
                                    value="2"
                                    label="二级单位"
                                ></el-option>
                                <el-option
                                    value="3"
                                    label="三级单位"
                                ></el-option>
                                <el-option
                                    value="4"
                                    label="四级单位"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="flex between mt-20 mb-26">
                <el-button type="primary" @click="handleAdd">
                    <template #icon><icon name="el-icon-Plus" /></template>
                    新增</el-button
                >
                <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>
        <p></p>
        <el-tabs v-model="activeMaping">
            <el-tab-pane label="全部" name="all">
                <div class="table-container">
                    <el-table :data="list">
                        <el-table-column
                            :label="`${activeName}单位编码`"
                            prop="externalId"
                            width="150"
                        />
                        <el-table-column
                            :label="`${activeName}单位名称`"
                            prop="externalName"
                        />
                        <el-table-column
                            label="数字督察单位"
                            prop="internalName"
                        />
                        <el-table-column
                            label="单位层级"
                            prop="level"
                            width="100"
                            align="center"
                        >
                            <template #default="{ row }">
                                <span v-if="row.level === 2">二级单位</span>
                                <span v-if="row.level === 3">三级单位</span>
                                <span v-if="row.level === 4">四级单位</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="最后修改时间"
                            prop="updateTime"
                            width="160"
                        />
                        <el-table-column label="操作" width="160">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleEdit(row)"
                                    >编辑</el-button
                                >
                                <el-button
                                    type="danger"
                                    link
                                    @click="handleDel(row)"
                                    >删除</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]"
                        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="未映射" name="noMaping">
                <template #label>
                    <el-badge :value="0">
                        <span>未映射</span>
                    </el-badge>
                </template>
                <div class="table-container">
                    <el-table :data="list">
                        <el-table-column
                            :label="`${activeName}单位编码`"
                            prop="externalId"
                            width="150"
                        />
                        <el-table-column
                            :label="`${activeName}单位名称`"
                            prop="externalName"
                        />
                        <el-table-column
                            label="数字督察单位"
                            prop="internalName"
                        />
                        <el-table-column
                            label="单位层级"
                            prop="level"
                            width="100"
                            align="center"
                        >
                            <template #default="{ row }">
                                <span v-if="row.level === 2">二级单位</span>
                                <span v-if="row.level === 3">三级单位</span>
                                <span v-if="row.level === 4">四级单位</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="最后修改时间"
                            prop="updateTime"
                            width="160"
                        />
                        <el-table-column label="操作" width="160">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleEdit(row)"
                                    >编辑</el-button
                                >
                                <el-button
                                    type="danger"
                                    link
                                    @click="handleDel(row)"
                                    >删除</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]"
                        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-tabs>
    </div>

    <el-dialog
        v-model="show"
        :title="mode === 'add' ? '新增机构映射' : '编辑机构映射'"
        width="600"
    >
        <el-form :label-width="140" :model="formData" ref="fomrRef">
            <el-form-item
                label="来源"
                prop="source"
                :rules="{
                    required: true,
                    message: '请选择',
                    trigger: ['blur'],
                }"
            >
                <el-select
                    v-model="formData.source"
                    clearable
                    style="width: 280px"
                >
                    <el-option label="情指行" value="情指行"></el-option>
                    <el-option label="重点人员" value="重点人员"></el-option>
                    <el-option label="民意感知" value="民意感知"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="单位编码"
                prop="externalId"
                :rules="{
                    required: true,
                    message: '请输入',
                    trigger: ['blur'],
                }"
            >
                <el-input
                    v-model="formData.externalId"
                    clearable
                    style="width: 280px"
                    placeholder="请输入"
                />
            </el-form-item>
            <el-form-item
                label="单位名称"
                prop="externalName"
                :rules="{
                    required: true,
                    message: '请输入',
                    trigger: ['blur'],
                }"
            >
                <el-input
                    v-model="formData.externalName"
                    clearable
                    style="width: 280px"
                    placeholder="请输入"
                />
            </el-form-item>
            <el-form-item
                label="数字督察单位"
                prop="internalId"
                :rules="{
                    required: true,
                    message: '请选择',
                    trigger: ['blur'],
                }"
            >
                <depart-tree-select
                    v-model="formData.internalId"
                    placeholder="请选择"
                    style="width: 280px"
                />
            </el-form-item>
        </el-form>
        <footer class="flex end mt-40">
            <el-button @click="show = false" size="large">取消</el-button>
            <el-button type="primary" @click="submit" size="large"
                >确定</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import {
    listDepartMaping,
    addDepartMaping,
    updateDepartMaping,
    delDepartMaping,
} from "@/api/system/departMaping";
import feedback from "@/utils/feedback";
const activeName = ref("情指行");
const activeMaping = ref("all");
const query = ref({
    current: 1,
    size: 10,
});

const list = ref([]);
const total = ref(0);
function getList() {
    listDepartMaping(activeName.value, query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
    });
}

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

watch(activeName, () => {
    getList();
});

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

const show = ref(false);
const mode = ref("add");
const formData = ref({});
const fomrRef = ref();

function handleAdd() {
    formData.value = {
        source: activeName.value,
    };
    show.value = true;
    mode.value = "add";
}
function handleEdit(row) {
    formData.value = { ...row };
    formData.value.source = activeName.value;
    show.value = true;
    mode.value = "edit";
}

async function handleDel(row) {
    await feedback.confirm("确定要删除该数据？");
    await delDepartMaping(row.id);
    getList();
    feedback.msgSuccess("删除成功");
}

async function submit() {
    await fomrRef.value.validate();
    if (mode.value === "add") {
        await addDepartMaping(formData.value);
    } else {
        await updateDepartMaping(formData.value);
    }
    show.value = false;
    formData.value = {
        source: activeName.value,
    };
    getList();
    feedback.msgSuccess("操作成功");
}
</script>
<style lang="scss" scoped>
</style>