<template>
    <div class="container">
        <header>
            <el-form :label-width="114">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="警员姓名">
                            <el-input
                                placeholder="请输入警员姓名"
                                v-model="query.name"
                                clearable
                                style="width: 220px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="警号">
                            <el-input
                                placeholder="请输入"
                                v-model="query.empNo"
                                clearable
                                style="width: 220px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="身份证">
                            <el-input
                                placeholder="请输入身份证号码"
                                v-model="query.idCode"
                                clearable
                                style="width: 220px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="电话">
                            <el-input
                                placeholder="请输入电话"
                                v-model="query.phone"
                                clearable
                                style="width: 220px"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属单位">
                            <div class="flex gap v-center" style="width: 100%">
                                <div style="width: 220px">
                                    <depart-tree-select
                                        v-model="query.departId"
                                    />
                                </div>
                                <el-checkbox
                                    v-model="query.departBranch"
                                    label="当前单位及所有子单位"
                                    size="large"
                                />
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="权限角色">
                            <el-select
                                v-model="query.roleId"
                                placeholder="请选择角色"
                                clearable
                            >
                                <el-option
                                    v-for="item in roles"
                                    :key="item.roleId"
                                    :value="item.roleId"
                                    :label="item.roleName"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="mb-25 flex between">
                <div class="flex gap">
                    <el-button
                        type="primary"
                        @click="handleAdd"
                        v-perms="['police:add']"
                    >
                        <template #icon>
                            <icon name="el-icon-Plus" />
                        </template>
                        新增警员</el-button
                    >

                    <el-upload
                        :multiple="false"
                        :show-file-list="false"
                        :action="`${BASE_PATH}/police/import`"
                        :headers="{ Authorization: getToken() }"
                        :before-upload="beforeUpload"
                        @success="handleSuccess"
                        @error="handleError"
                        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                        v-perms="['police:import']"
                    >
                        <el-button
                            type="primary"
                            
                        >
                            <template #icon>
                                <icon name="el-icon-Upload" />
                            </template>
                            导入警员</el-button
                        >
                    </el-upload>

                    <a
                        class="link"
                        :href="`${BASE_PATH}/templates/数字督察警员权限导入模板.xlsx`"
                        target="__blank"
                        style="padding: 8px"
                        v-perms="['police:import']"
                        >数字督察警员权限导入模板</a
                    >
                </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" v-loading="loading">
            <el-table :data="polices" row-key="id">
                <el-table-column type="expand">
                    <template #default="{ row }">
                        <div class="row mt-10">
                            <div class="col col-6">
                                <label>角色</label>
                                <span>{{
                                    getDictLable(
                                        dict.policeRole,
                                        row.policeRole
                                    )
                                }}</span>
                            </div>
                            <div class="col col-6">
                                <label>备注</label>
                                <span>{{ row.job }}</span>
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col col-6">
                                <label>电话</label>
                                <span>{{ row.mobile }}</span>
                            </div>
                            <div class="col col-6">
                                <label>入职时间</label>
                                <span>{{ row.employmentDate }}</span>
                            </div>
                            <div class="col col-6" v-if="row.employmentDate">
                                <label>工龄</label>
                                <span>{{
                                    getWorkYear(row.employmentDate)
                                }}</span>
                            </div>
                            <div class="col col-6">
                                <label>年龄</label>
                                <span>{{ getAge(row.idCode) }}</span>
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col col-6">
                                <label>创建时间</label>
                                <span>{{ row.createdAt || "/" }}</span>
                            </div>
                            <div class="col col-6">
                                <label>更新时间</label>
                                <span>{{ row.updatedAt }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" prop="name" width="90" />
                <el-table-column
                    label="警号"
                    prop="empNo"
                    width="100"
                    show-overflow-tooltip
                />
                <el-table-column label="所属机构" show-overflow-tooltip>
                    <template #default="{ row }">
                        <div class="flex gap-4">
                            <span v-if="row.parentDepartShortName"
                                >{{ row.parentDepartShortName }}/</span
                            ><span>{{ row.departShortName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="人员属性" width="120" align="center">
                    <template #default="{ row }">
                        <span>{{
                            getDictLable(dict.personType, row.personType)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="职位" width="120" align="center">
                    <template #default="{ row }">
                        <span v-if="row.position">
                            <span v-if="row.level === 0"
                                >局领导{{ row.position }}</span
                            >
                            <span v-if="row.level === 2"
                                >二级机构{{ row.position }}</span
                            >
                            <span v-if="row.level === 3"
                                >三机机构{{ row.position }}</span
                            >
                            <span v-if="row.level === 4"
                                >四机机构{{ row.position }}</span
                            >
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="身份证" prop="idCode" width="200" />
                <el-table-column label="角色" show-overflow-tooltip>
                    <template #default="{ row }">
                        <div class="flex gap" v-if="row.role">
                            <el-tag v-for="item in row.role.split(',')">{{
                                item
                            }}</el-tag>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="220">
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            link
                            @click="handleEdit(row)"
                            v-perms="['police:add']"
                            >编辑</el-button
                        >
                        <el-button
                            type="primary"
                            link
                            @click="handleEditAuth(row)"
                            v-perms="['police:auth']"
                            v-if="row.idCode"
                            >权限设置</el-button
                        >
                        <el-button
                            type="danger"
                            link
                            @click="handleDel(row)"
                            v-perms="['police:del']"
                            >删除</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>
    </div>

    <el-dialog
        title="权限设置"
        v-model="authShow"
        width="800"
        :lock-scroll="false"
    >
        <el-form :label-width="160">
            <el-form-item label="机构权限">
                <depart-tree-select
                    v-model="authForm.departs"
                    multiple
                    check-strictly
                    :show-root="true"
                />
            </el-form-item>
            <el-form-item label="业务权限（问题来源）">
                <el-tree-select
                    :data="dictProblemSources"
                    :props="{ value: 'id' }"
                    node-key="id"
                    clearable
                    filterable
                    v-model="authForm.sources"
                    multiple
                />
            </el-form-item>
        </el-form>
        <footer class="flex end">
            <el-button @click="authShow = false">取消</el-button>
            <el-button type="primary" @click="authSubmit">确定</el-button>
        </footer>
    </el-dialog>

    <el-dialog
        :title="mode === 'add' ? '新增警员' : '编辑警员'"
        v-model="show"
        width="600"
    >
        <el-form :model="form" :label-width="120" ref="fomrRef">
            <!-- <el-form-item label="头像" prop="avatarUrl">
                <el-avatar
                    shape="square"
                    :size="50"
                    :src="form.avatarUrl"
                    :icon="UserFilled"
                />
            </el-form-item> -->
            <el-form-item
                label="姓名"
                prop="name"
                :rules="{
                    required: true,
                    message: '请输入姓名',
                }"
            >
                <el-input
                    placeholder="请输入"
                    v-model="form.name"
                    style="width: 280px"
                />
            </el-form-item>
            <el-form-item
                label="警号"
                prop="empNo"
                :rules="{
                    required: true,
                    message: '请输入警号',
                }"
            >
                <el-input
                    placeholder="请输入"
                    v-model="form.empNo"
                    style="width: 280px"
                />
            </el-form-item>
            <el-form-item
                label="身份证"
                prop="idCode"
                :rules="{
                    required: true,
                    message: '请输入身份证',
                }"
            >
                <el-input
                    placeholder="请输入"
                    v-model="form.idCode"
                    style="width: 280px"
                />
            </el-form-item>
            <el-form-item
                label="所属单位"
                prop="orgId"
                :rules="{
                    required: true,
                    message: '请选择所属单位',
                }"
            >
                <div style="width: 280px">
                    <depart-tree-select v-model="form.orgId" :showRoot="true" />
                </div>
            </el-form-item>
            <el-form-item label="人员属性">
                <el-radio-group v-model="form.personType">
                    <el-radio
                        v-for="item in dict.personType"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item
                label="职位"
                prop="position"
                v-if="form.personType === PersonType.POLICE"
            >
                <el-select
                    v-model="form.position"
                    clearable
                    style="width: 280px"
                >
                    <el-option value="正职">正职</el-option>
                    <el-option value="副职">副职</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色" prop="policeRole">
                <el-select
                    clearable
                    v-model="form.policeRole"
                    style="width: 280px"
                >
                    <el-option
                        v-for="item in dict.policeRole"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
                <el-input
                    placeholder="请输入"
                    v-model="form.mobile"
                    style="width: 280px"
                />
            </el-form-item>
            <el-form-item label="入职时间">
                <div>
                    <el-date-picker
                        v-model="form.employmentDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择"
                        :disabled-date="
                            (time) => time.getTime() > new Date().getTime()
                        "
                        style="width: 280px"
                    />
                    <span class="ml-10" v-if="form.employmentDate"
                        >工龄：{{ getWorkYear(form.employmentDate) }}</span
                    >
                </div>
            </el-form-item>

            <!-- <el-form-item label="婚姻状况">
                <el-radio-group v-model="form.maritalStatus">
                    <el-radio
                        v-for="item in dict.maritalStatus"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item label="子女">
                <el-radio-group v-model="form.personType">
                    <el-radio value="无子女">无</el-radio>
                    <el-radio value="有子女">有</el-radio>
                </el-radio-group>
            </el-form-item> -->
            <!-- <el-form-item label="学历">
                <el-select v-model="form.education">
                    <el-option
                        v-for="item in dict.education"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        :label="item.dictLabel"
                    />
                </el-select>
            </el-form-item> -->
        </el-form>
        <footer class="flex end">
            <el-button @click="show = false">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </footer>
    </el-dialog>
</template>
<script setup>
import { BASE_PATH } from "@/api/request";
import { getToken } from "@/utils/token";
import { UserFilled } from "@element-plus/icons-vue";
import {
    listPolice,
    getPoliceAuths,
    addPolice,
    updatePolice,
    delPolice,
    updatePoliceAuths,
} from "@/api/system/police";
import { listRole } from "@/api/system/role";
import { PersonType } from "@/enums/dictEnums";
import useCatchStore from "@/stores/modules/catch";
import feedback from "@/utils/feedback";
import { getDictLable } from "@/utils/util";

import moment from "moment";

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "problemSources",
    "personType",
    "education",
    "maritalStatus",
    "policeRole",
]);

const dictProblemSources = catchStore.getDictProblemSources();

const polices = ref([]);
const query = ref({
    current: 1,
    size: 10,
});
const total = ref(0);
const loading = ref(false);
function getList() {
    loading.value = true;
    listPolice(query.value).then((data) => {
        loading.value = false;
        polices.value = data.records;
        total.value = data.total;
    });
}

const roles = ref([]);
onMounted(() => {
    getList();
    listRole().then((data) => {
        roles.value = data;
    });
});

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

const authShow = ref(false);
const authForm = ref({});
let activeIdCode = "";
function handleEditAuth(row) {
    getPoliceAuths(row.idCode).then((data) => {
        activeIdCode = row.idCode;
        authShow.value = true;
        authForm.value = data;
    });
}

function authSubmit() {
    updatePoliceAuths(activeIdCode, authForm.value).then(() => {
        authShow.value = false;
        feedback.msgSuccess("操作成功");
    });
}

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

function handleAdd() {
    show.value = true;
    if (mode.value === "edit") {
        form.value = {};
    }
    mode.value = "add";
}

function handleEdit(row) {
    show.value = true;
    form.value = { ...row };
    mode.value = "edit";
}

async function submit() {
    await fomrRef.value.validate();
    if (mode.value === "add") {
        await addPolice(form.value);
        form.value = {};
    } else {
        await updatePolice(form.value);
    }
    feedback.msgSuccess("操作成功");
    show.value = false;
    getList();
}

function getAge(idCode) {
    if (!idCode || idCode.length !== 18) {
        return "";
    }
    return new Date().getFullYear() - parseInt(idCode.substr(6, 4));
}

function getWorkYear(employmentDate) {
    if (!employmentDate) {
        return "";
    }
    const year =
        new Date().getFullYear() - parseInt(employmentDate.substr(0, 4));
    if (year > 0) {
        return year + "年";
    }
    const days = moment().diff(moment(employmentDate), "days");
    if (days < 30) {
        return days + "天";
    }
    return moment().diff(moment(employmentDate), "month") + "个月";
}

async function handleDel(row) {
    await feedback.confirm(`确定要删除 ${row.name} ？`);
    await delPolice(row.id);
    feedback.msgSuccess("操作成功");
    getList();
}

import { ElLoading } from "element-plus";
let importLoading;
function beforeUpload() {
    importLoading = ElLoading.service({
        lock: true,
        text: "数据导入中",
        background: "rgba(0, 0, 0, 0.7)",
    });
}
function handleSuccess(result) {
    console.log('handleSuccess', result)
    importLoading.close();
    if (result.code !== 200) {
        feedback.msgError(result.message);
        return
    }
    getList()
}
function handleError(result) {
    console.log(result)
    importLoading.close();
    feedback.msgError(result.message || "上传失败！");
}
</script>
<style lang="scss" scoped>
</style>