<template>
    <div>
        <!-- 搜索项 -->
        <search-bar ref="searchbar" :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
        <new-table
            ref="table"
            rowKey="id"
            :tableUrl="tableUrl"
            :condition="condition"
            :tableHeader="tableHeader"
            :pagination-props="paginationProps"
            :selection="true"
            lazyLoad
        ></new-table>
        <div v-footer>
            <dg-button @click="$emit('close')">取消</dg-button>
            <dg-button type="primary" @click="handleAdd()">添加</dg-button>
        </div>
    </div>
</template>
<script>
import { notRelUserTableUrl, batchSetUser } from "@/api/environment-manage"
import { searchOpt } from "@/mixins/page-opt"
import newTable from "@/components/new-table"
import searchBar from "@/components/search-bar"
export default {
    props: {
        elementId: String
    },
    components: { newTable, searchBar },
    mixins: [searchOpt],
    data() {
        return {
            conditionForm: [
                {
                    label: "单位名称",
                    name: "orgId",
                    op: "=",
                    value: "",
                    nodeKey: "id",
                    type: "APP",
                    component: "SelectOrgTree",
                    placeholder: "请选择单位名称",
                    filterable: true
                },
                {
                    label: "姓名",
                    name: "name",
                    op: "like",
                    value: "",
                    component: "ElInput"
                },
                {
                    name: "elementId",
                    value: this.elementId,
                    clearable: false,
                    op: "="
                }
            ],
            condition: {
                elementId: {
                    value: this.elementId,
                    op: "="
                }
            },
            tableUrl: notRelUserTableUrl,
            tableHeader: [
                { label: "姓名", prop: "name" },
                { label: "警号", prop: "policeNumber" },
                { label: "身份证号码", prop: "idcard" },
                { label: "单位名称", prop: "orgName" }
            ],
            paginationProps: {
                currentPage: 1,
                pageSizes: [50, 100, 150],
                pageSize: 50,
                layout: "total, sizes, prev, pager, next, jumper"
            }
        }
    },
    methods: {
        handleAdd() {
            const userList = this.$refs.table.newChooseArr
            if (userList.length == 0) {
                this.$message.warning("请至少选择一个用户！")
                return
            }
            const params = {
                elementId: this.elementId,
                userIds: userList.map(item => item.id)
            }
            batchSetUser(params).then(res => {
                this.$message.success("操作成功!")
                this.$emit("success")
            })
        },
        receiveSearch(value) {
            this.condition = value
            if (this.$refs.table) {
                this.$refs.table.handleClearSelection()
            }
            this.handleSearch()
        }
    }
}
</script>

<style lang="scss"></style>
