const branchUnionPartUnitManage = {
    template: `
        <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-setting" style="margin-left: auto" @click="openAdd" v-if="$auth.hasPermission('sys.manager.union.partUnit')">设置组成单位</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" border>
                    <el-table-column type="index" width="50" label="序号"></el-table-column>
                    <el-table-column prop="unitcode" label="单位编码"></el-table-column>
                    <el-table-column prop="name" label="单位名称"></el-table-column>
                </el-table>
            </el-card>
    
            <el-dialog title="设置组成单位" :visible.sync="dialogFormVisible" width="1000px" :close-on-click-modal="false">
                <el-transfer
                    ref="transferRef"
                    :titles="['可选二级单位', '当前成员单位']"
                    filterable
                    :props="{
                        key: 'id',
                        label: 'name'
                    }"
                    :filter-method="filterUnit"
                    v-model="selectUnitsIds"
                    :data="allUnits"
                ></el-transfer>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    `,
    mixins: [initTableMixins],
    props: {
        union_id: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            dialogFormVisible: false,
            selectUnitsIds: [],
            allUnits: []
        }
    },
    watch: {
        union_id(val) {
            // this.doSearch()
        }
    },

    methods: {
        openAdd() {
            this.dialogFormVisible = true
            if (this.$refs.transferRef) {
                this.$refs.transferRef.clearQuery("left")
                this.$refs.transferRef.clearQuery("right")
            }
            $.get("/platform/sys/union/branchUnionPartUnitTransferData", { unionId: this.union_id }).then((res) => {
                this.selectUnitsIds = res.data.selectUnitIds
                this.allUnits = res.data.allUnits
            })
        },

        filterUnit(query, item) {
            return item.name.indexOf(query) > -1
        },

        doSubmit() {
            $.post("/platform/sys/union/branchUnionPartUnitSet", {
                unitIds: JSON.stringify(this.selectUnitsIds),
                unionId: this.union_id
            }).then((res) => {
                if (res.code === 0) {
                    this.dialogFormVisible = false
                    this.$message.success(res.msg)
                    this.doSearch()
                }
            })
        },

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