const branchUnionUserManage = {
    template:
        /*language=HTML*/
        `
            <div>
                <el-card shadow="never" style="border: 1px solid var(--border-color-lighter); margin-top: 10px">
                    <el-row type="flex" style="column-gap: 10px">
                        <el-input
                            placeholder="请输入内容"
                            size="small"
                            style="width: 400px"
                            clearable
                            v-model="pageForm.searchKeyword"
                            @keyup.enter.native="doSearch"
                        >
                            <el-select v-model="pageForm.searchName" slot="prepend" size="small" placeholder="查询类型"
                                       style="width: 80px !important;">
                                <el-option label="角色" value="roleName"></el-option>
                                <el-option label="姓名" value="username"></el-option>
                                <el-option label="工号" value="loginname"></el-option>
                            </el-select>
                        </el-input>
                        <el-select
                            v-model="pageForm.j"
                            placeholder="届数"
                            size="small"
                            clearable
                            class="j-search-select"
                            @change="handleJChange"
                        >
                            <el-option
                                v-for="item in jOptions"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            >
                                <span>{{ item.name }}</span>
                                <span v-if="hasCadreData(item.code)" class="j-used-mark">*</span>
                            </el-option>
                        </el-select>
                        <el-button type="primary" size="small" icon="el-icon-search" @click="doSearch"></el-button>
                        <el-button type="primary" size="small" icon="el-icon-plus" style="margin-left: auto"
                                   @click="openAdd" v-if="$auth.hasPermission('sys.manager.union.branchOfficer')">添加
                        </el-button>
                    </el-row>
                </el-card>
                <el-card shadow="never" style="border: 1px solid var(--border-color-lighter); margin-top: 10px">
                    <el-table :data="tableData" :height="table_height ? Math.max(200, table_height - 40) : null" border size="small">
	                    <el-table-column prop="loginName" label="工号"></el-table-column>
                        <el-table-column prop="userName" label="姓名"></el-table-column>
                        <el-table-column prop="mobile" label="联系方式"></el-table-column>
                        <el-table-column label="届数">
                            <template scope="{row}">
                                {{ row.jName || row.j }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="roleName" label="职务"></el-table-column>
                        <el-table-column prop="displayStatus" label="当前状态"></el-table-column>
                        <el-table-column label="操作" width="150px"
                                         v-if="$auth.hasPermission('sys.manager.union.branchOfficer')">
                            <template scope="scope">
                                <el-button
                                    v-if="!isLeft(scope.row)"
                                    size="mini"
                                    type="warning"
                                    icon="el-icon-switch-button"
                                    @click="openLeave(scope.row)"
                                ></el-button>
                                <el-button size="mini" type="danger" icon="el-icon-delete"
                                           @click="doDelete(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-dialog title="添加" :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false">
                    <el-form :model="formData" ref="form" size="small" label-width="80px">
                        <el-form-item prop="roleCode" label="角色">
                            <el-select v-model="formData.roleCode" placeholder="请选择角色" @change="handleRoleChange">
                                <el-option v-for="item in roleOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="isUnitPartySecretary()" prop="unitIds" label="所属单位">
                            <el-select v-model="formData.unitIds" multiple collapse-tags placeholder="请选择单位">
                                <el-option v-for="item in partySecretaryUnitOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="j" label="届数">
                            <dict-select v-model="formData.j" code="TEACHER_CONGRESS_J" placeholder="请选择届数"></dict-select>
                        </el-form-item>
                        <el-form-item prop="userId" label="人员">
                            <user-select
                                v-model="formData.userId"
                                style="width: 100%"
                                api="/platform/sys/union/listUnion"
                                :api_params="{ unionId: union_id }"
                                :option_label_func="
                                    (item) => {
                                        return item.username + item.loginname + '(' + item.unitName + ')'
                                    }
                                "
                            ></user-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="doSubmit">确 定</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="离任" :visible.sync="leaveDialogVisible" width="420px" :close-on-click-modal="false">
                    <el-form :model="leaveForm" ref="leaveForm" size="small" label-width="90px">
                        <el-form-item label="离任时间" required>
                            <el-date-picker
                                v-model="leaveForm.leaveDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择离任时间"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="leaveDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="doLeave">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        `,
    mixins: [initTableMixins],
    props: {
        union_id: {
            type: String,
            required: true
        },
        // 父页面可传入可用高度；默认值保持组件在其他页面的原有展示能力。
        table_height: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            pageForm: {
                searchName: "username",
                j: ""
            },
            dialogFormVisible: false,
            formData: {},
            roleOptions: [],
            partySecretaryUnitOptions: [],
            leaveDialogVisible: false,
            leaveForm: {
                id: "",
                leaveDate: ""
            },
            jOptions: [],
            usedJCodes: []
        }
    },
    watch: {
        union_id(val) {
            this.pageForm.j = ""
            this.initJSearch()
        }
    },
    methods: {
        loadJOptions() {
            return $.get("/open/common/dictOptions", { code: "TEACHER_CONGRESS_J" }).then((res) => {
                this.jOptions = res.data || []
            })
        },
        loadUsedJCodes() {
            if (!this.union_id) {
                this.usedJCodes = []
                return $.Deferred().resolve().promise()
            }
            return $.get("/platform/sys/union/branchUnionUserUsedJData", {
                unionId: this.union_id
            }).then((res) => {
                if (res.code === 0) {
                    this.usedJCodes = res.data || []
                }
            })
        },
        hasCadreData(code) {
            return this.usedJCodes.includes(code)
        },
        getHighestUsedJ() {
            if (!this.usedJCodes.length) {
                return ""
            }
            for (let i = this.jOptions.length - 1; i >= 0; i--) {
                if (this.usedJCodes.includes(this.jOptions[i].code)) {
                    return this.jOptions[i].code
                }
            }
            return this.usedJCodes[0]
        },
        initJSearch() {
            const optionTask = this.jOptions.length ? $.Deferred().resolve().promise() : this.loadJOptions()
            $.when(optionTask, this.loadUsedJCodes()).then(() => {
                // 页面初始化时不限定届次，默认展示该分工会所有届次的干部。
                this.pageForm.j = ""
                this.pageData()
            })
        },
        handleJChange(val) {
            this.pageForm.j = val || ""
            this.doSearch()
        },
        isLeft(row) {
            return row.isServing === false || row.isServing === 0 || row.displayStatus === "离任"
        },
        isUnitPartySecretary() {
            return this.formData.roleCode === "UNIT_PARTY_SECRETARY"
        },
        loadRoleOptions() {
            return $.get("/platform/sys/union/branchUnionRoleOptions").then((res) => {
                if (res.code === 0) {
                    this.$set(this, "roleOptions", res.data || [])
                }
            })
        },
        loadPartySecretaryUnitOptions() {
            return $.get("/platform/sys/union/branchUnionPartySecretaryUnitOptions", {
                unionId: this.union_id
            }).then((res) => {
                if (res.code === 0) {
                    this.$set(this, "partySecretaryUnitOptions", res.data || [])
                    // 新增二级党委书记时，默认授权当前分工会下的全部二级单位。
                    this.$set(this.formData, "unitIds", this.partySecretaryUnitOptions.map(item => item.id))
                }
            })
        },
        handleRoleChange() {
            if (this.isUnitPartySecretary()) {
                this.loadPartySecretaryUnitOptions()
                return
            }
            this.$set(this.formData, "unitIds", [])
        },
        openAdd() {
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.formData = {}
            })
        },
        openLeave(row) {
            this.leaveForm = {
                id: row.id,
                leaveDate: ""
            }
            this.leaveDialogVisible = true
        },
        doSubmit() {
            if (!this.formData.j) {
                this.$message.error("请选择届数")
                return
            }
            if (this.isUnitPartySecretary() && (!this.formData.unitIds || this.formData.unitIds.length === 0)) {
                this.$message.error("请选择所属单位")
                return
            }
            const submitUrl = this.isUnitPartySecretary()
                ? "/platform/sys/union/insertBranchUnionPartySecretaryRole"
                : "/platform/sys/union/insertBranchUnionUserRole"
            $.post(submitUrl, {
                ...this.formData,
                unitIds: JSON.stringify(this.formData.unitIds || []),
                unionId: this.union_id
            }).then((res) => {
                if (res.code === 0) {
                    this.dialogFormVisible = false
                    this.$message.success(res.msg)
                    this.loadUsedJCodes()
                    this.doSearch()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        doLeave() {
            if (!this.leaveForm.leaveDate) {
                this.$message.error("请选择离任时间")
                return
            }
            $.post("/platform/sys/union/leaveBranchUnionUserRole", this.leaveForm).then((res) => {
                if (res.code === 0) {
                    this.leaveDialogVisible = false
                    this.$message.success(res.msg)
                    this.doSearch()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        doDelete({ userId, roleCode }) {
            this.$confirm("您确定要删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "info"
            }).then((res) => {
                $.post("/platform/sys/union/deleteBranchUnionUserRole", {
                    userId,
                    roleCode,
                    unionId: this.union_id
                }).then((res) => {
                    if (res.code === 0) {
                        this.$message.success(res.msg)
                        this.loadUsedJCodes()
                        this.doSearch()
                    }
                })
            })
        },
        pageData() {
            $.get("/platform/sys/union/branchUnionUserPageData", {
                ...this.pageForm,
                unionId: this.union_id,
                j: this.pageForm.j || ""
            }).then((res) => {
                if (res.code === 0) {
                    this.tableData = res.data
                }
            })
        }
    },
    created() {
        this.loadRoleOptions()
        this.initJSearch()
    },
    style: /*language=CSS*/ `
        /deep/ .el-select {
            width: 100% !important;
        }
        /deep/ .j-search-select {
            width: 80px !important;
        }
        .j-used-mark {
            color: #f56c6c;
            margin-left: 4px;
            font-weight: 700;
        }
    `
}