<template>
    <div>
        <!-- 班组选择弹层 -->
        <SuperTableSelectorDialog
            :close-on-click-modal="false"
            v-on="$listeners"
            v-bind="$attrs"
            title="班组选择"
            selectKey="code"
            select-title-name="已选班组"
            :isShowTree="false"
            isShowAddButton
            isSingleChoice
            :isShow.sync="isShowDialog"
            hintLanguage="提示：请在列表中选择班组后，点击确认。点击班组编辑管理班组成员。"
            :search-option="optionList"
            :defaultTreeExpandLevel="1"
            :table-data="tableData"
            :table-options="tableOptions"
            :table-loading="tableLoading"
            :tableParams="params"
            @add="handleAdd"
            @open="open"
            @closed="closed"
            @tableRefresh="getTableData"
            ref="superTableSelectorDialog"
        >
            <el-table-column
                align="center"
                slot="tableHandler"
                show-overflow-tooltip
                width="180"
                label="操作"
            >
                <template v-slot="{row}">
                    <el-link
                        :underline="false"
                        type="primary"
                        @click="handleGroupUser(row)"
                    >
                        编辑
                    </el-link>
                    <el-link
                        :underline="false"
                        type="danger"
                        @click="handleDeleteGroup(row)"
                    >
                        删除
                    </el-link>
                </template>
            </el-table-column>
        </SuperTableSelectorDialog>
        <GroupEditDialog
            ref="GroupEditDialog"
            @reload="getTableData"
        ></GroupEditDialog>
    </div>
</template>

<script>
import {getGroupPage, deleteGroup} from '@/api/systemInterface'
import {refineRequestBody} from '@/utils/requestWrappers'
import SuperTableSelectorDialog from '@/components/SuperTableSelectorDialog/index.vue'
import GroupEditDialog from '@/components/TreeTableSelector/GroupEditDialog'

export default {
    name: 'UserSelectorDialog',
    components: {SuperTableSelectorDialog, GroupEditDialog},
    props: {
        isShow: {
            default: false,
            type: Boolean,
        },
    },
    data() {
        return {
            orgData: [], // 组织树
            optionList: [
                {title: '名称', prop: 'name', type: 'input', default: true},
            ],
            tableOptions: [
                {label: '名称', minWidth: '100', prop: 'name'},
                {label: '备注', minWidth: '80', prop: 'description'},
            ],
            params: {
                pageBean: {pageSize: 20, page: 1, total: 0},
                querys: [
                    {
                        group: 'quick',
                        operation: 'LIKE',
                        property: 'name',
                        relation: 'OR',
                        value: '',
                    },
                ],
                sorter: [{direction: 'DESC', property: 'name'}],
            },
            tableData: [], // 岗位数据
            treeItem: {}, // 树选中
            tableLoading: false, // 表格loading
        }
    },
    computed: {
        isShowDialog: {
            get() {
                return this.isShow
            },
            set(val) {
                this.$emit('update:isShow', val)
            },
        },
    },
    created() {
        this.open()
    },
    methods: {
        // 打开弹层时触发
        open() {
            this.getTableData()
        },

        // 关闭弹层触发
        closed() {
            const {orgData} = this
            // 重置data中的数据
            Object.assign(this.$data, this.$options.data.call(this), {orgData})
        },

        //获取岗位列表数据
        async getTableData() {
            this.tableData = []
            this.tableLoading = true
            const {total = 0, rows = []} = await getGroupPage(
                refineRequestBody(this.params)
            )
            this.params.pageBean.total = total
            this.tableData = rows
            this.tableLoading = false
        },
        handleAdd() {
            this.$nextTick(() => {
                this.$refs.GroupEditDialog.handleOpen()
            })
        },
        handleGroupUser(row) {
            this.$nextTick(() => {
                this.$refs.superTableSelectorDialog.handleClearRow(row, true)
                this.$refs.GroupEditDialog.handleOpen(row)
            })
        },
        handleDeleteGroup(row) {
            this.$refs.superTableSelectorDialog.handleClearRow(row, true)
            this.$confirm('确定删除选中班组吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    let {state, message} = await deleteGroup(row.code)
                    if (state) {
                        this.$message.success(`班组删除成功`)
                        this.getTableData()
                    } else {
                        this.$message.error(message)
                    }
                })
                .catch((_) => _)
        },
    },
}
</script>

<style lang="scss" scoped>

</style>
