const branchUnionGroupManage = {
    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-input>
                    <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">
                        新增
                    </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 - 90) : null" border>
                    <el-table-column type="index" width="50" label="序号"></el-table-column>
                    <el-table-column prop="code" label="小组编码" width="120px"></el-table-column>
                    <el-table-column prop="name" label="小组名称" width="200px"></el-table-column>
                    <el-table-column prop="leaderInfos" label="组长信息"></el-table-column>
	                <el-table-column prop="unitInfos" label="组成单位"></el-table-column>
                    <el-table-column label="操作" width="200px">
                        <template slot-scope="{row}">
                            <el-button type="primary" size="mini" @click="onEdit(row)">
                                编辑
                            </el-button>
                            <el-button type="danger" size="mini" @click="onDelete(row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--#include("/layouts/pagination.html"){}#-->
            </el-card>

            <el-dialog :title="formData.id ? '编辑' : '新增'" :visible.sync="dialogFormVisible" width="600px"
                       :close-on-click-modal="false">
                <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
                    <el-form-item label="小组编码" prop="code">
                        <el-input v-model="formData.code" placeholder="小组编码" maxlength="10"
                                  show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="小组名称" prop="name">
                        <el-input v-model="formData.name" placeholder="小组名称" maxlength="100"></el-input>
                    </el-form-item>
	                <el-form-item label="组成单位" prop="unitIds">
		                <el-select clearable filterable placeholder="请选择组成单位" multiple
		                           style="width: 100%" v-model="formData.unitIds">
			                <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in units"></el-option>
		                </el-select>
	                </el-form-item>
                    <el-form-item label="小组长" prop="leaders">
                        <el-select
                            v-model="formData.leaders"
                            filterable
                            remote multiple
                            reserve-keyword
                            placeholder="请输入姓名查询"
                            :remote-method="getUserOptions"
                            style="width: 100%">
                            <el-option
                                v-for="item in userOptions"
                                :key="item.id"
                                :label="item.username+'('+item.unitName+')'"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    `,
    mixins: [initTableMixins],
    props: {
        union_id: {
            type: String,
            required: true
        },
        // 工会小组列表包含分页，父页面传入高度后预留分页区域。
        table_height: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            pageForm: {},
            formData: {},
            rules: {
                code: [{ required: true, message: "请输入小组编码", trigger: "blur" }],
                name: [{ required: true, message: "请输入小组名称", trigger: "blur" }],
                leaders: [{ required: true, message: "请选择小组长", trigger: "change" }],
                unitIds: [{ required: true, message: "请选择组成单位", trigger: "change" }],
            },
            userOptions: [],
            units: [],
        }
    },
    methods: {
        async openAdd() {
            this.dialogFormVisible = true
            await this.getUnits()
            this.$nextTick(() => {
                this.formData = {}
                this.$refs.formRef.clearValidate()
            })
        },

        async onEdit(row) {
            this.formData = { ...row }
            this.formData.unitIds = JSON.parse(row.unitIds)
            this.formData.leaders = JSON.parse(row.leaders)
            await this.getUnits(row.id)
            this.getUserOptions(null, this.formData.leaders)
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs.formRef.clearValidate()
            })
        },

        onSubmit() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    const { id } = this.formData
                    const url = "/platform/sys/unionGroup" + (id ? "/update" : "/insert")
                    const formData = clone(this.formData)
                    formData.unitIds = JSON.stringify(formData.unitIds)
                    formData.leaders = JSON.stringify(formData.leaders)
                    $.post(url, { ...formData, unionId: this.union_id }).then((res) => {
                        if (res.code === 0) {
                            this.$message.success(res.msg)
                            this.dialogFormVisible = false
                            this.doSearch()
                        }
                    })
                }
            })
        },

        onDelete(id) {
            this.$confirm("您确定要删除吗, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    $.post("/platform/sys/unionGroup/delete/" + id).then((res) => {
                        if (res.code === 0) {
                            this.$message.success(res.msg)
                            this.pageData()
                        }
                    })
                })
                .catch(() => {})
        },

        pageData() {
            $.get("/platform/sys/unionGroup/pageData", { ...this.pageForm, unionId: this.union_id }).then((res) => {
                if (res.code === 0) {
                    this.tableData = res.data.list
                    this.pageForm.totalCount = res.data.totalCount
                }
            })
        },

        getUserOptions(keyword, userIds = null) {
            $.get("/platform/sys/unionGroup/listUser", {
                keyword,
                unionId: this.union_id,
                userIds: JSON.stringify(userIds)
            }).then((res) => {
                if (res.code === 0) {
                    this.userOptions = res.data
                }
            })
        },
        async getUnits(val) {
            const resp = await this.$axios.post("/platform/sys/unionGroup/getUnits", {
                unionId: this.union_id,
                groupId: val
            })
            if (resp.code === 0) {
                this.units = resp.data
            }
        }
    }
}