<template>
    <el-drawer
        title="班组管理"
        :visible.sync="drawer"
        :before-close="handleClose"
    >
        <div class="content-wrapper">
            <el-form ref="form" :model="form" :rules="formRules">
                <el-form-item label="班组名称" prop="name">
                    <el-input
                        clearable
                        v-model="form.name"
                        placeholder="请输入名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="description">
                    <el-input
                        clearable
                        v-model="form.description"
                        placeholder="请输入备注"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div class="table-wrapper">
                <div class="rows" v-show="form.id">
                    <div class="rows-left">
                        <div class="rows-hr"></div>
                    </div>
                    <div class="rows-title">
                        <div class="text-overflow">班组成员</div>
                    </div>
                </div>
                <div class="table-content" v-show="form.id">
                    <el-table
                        height="100%"
                        :data="userArr"
                        v-loading="tableLoading"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.6)"
                    >
                        <el-table-column
                            type="index"
                            width="60"
                            label="序号"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            label="名称"
                            prop="fullname"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            label="账号"
                            prop="account"
                            align="center"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="btn-box">
                <el-button size="small" @click="handleClose"> 取 消 </el-button>
                <el-button
                    v-if="form.id"
                    size="small"
                    type="primary"
                    @click="handleUser"
                >
                    成员管理
                </el-button>
                <el-button
                    :loading="loading"
                    size="small"
                    type="primary"
                    @click="confirm"
                >
                    确 定
                </el-button>
            </div>
        </div>
        <!--  人员选择弹层  -->
        <UserSelectorDialog
            :is-show.sync="userDialog"
            :selected-content.sync="userArr"
        />
    </el-drawer>
</template>
<script>
import UserSelectorDialog from '@/components/TreeTableSelector/UserSelectorDialog/index.vue'
import {
    addGroup,
    editGroup,
    getGroupUser,
    addGroupUser,
} from '@/api/systemInterface'
import utils from '@/utils/utils'

export default {
    name: 'groupEdit',
    components: {UserSelectorDialog},
    data() {
        return {
            drawer: false,
            loading: false,
            userDialog: false,
            tableLoading: false,
            form: {
                name: '',
                code: '',
                description: '',
            },
            formRules: {
                name: [
                    {
                        required: true,
                        message: '名称不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            userArr: [],
        }
    },
    methods: {
        handleOpen(row) {
            row ? (this.form = {...row}) : null
            this.drawer = true
            if (this.form.id) {
                this.getUser()
            }
        },
        async getUser() {
            this.tableLoading = true
            try {
                const data = await getGroupUser(this.form.code)
                if (data && data.length) {
                    this.userArr = data
                } else {
                    this.userArr = []
                }
            } finally {
                this.tableLoading = false
            }
        },
        handleClose() {
            this.drawer = false
            this.form = {
                name: '',
                code: '',
                description: '',
            }
            this.$refs.form.clearValidate()
        },
        handleUser() {
            this.userDialog = true
        },
        async confirm() {
            this.loading = true
            this.$refs.form.validate(async (valid, object) => {
                if (valid) {
                    const myInterFace = this.form.id ? editGroup : addGroup
                    this.form.id ? null : (this.form.code = utils.uuid())
                    try {
                        const {state, message} = await myInterFace(this.form)
                        if (state) {
                            let message = this.form.id ? '编辑' : '新增'
                            this.$message.success(`班组${message}成功`)
                            this.$emit('reload')
                        } else {
                            this.$message.warning(message)
                        }
                    } finally {
                        this.loading = false
                    }
                    if (this.userArr.length) {
                        let codes = this.userArr.reduce((prev, cur) => {
                            return prev + cur.account + ','
                        }, '')
                        let name = this.userArr.reduce((prev, cur) => {
                            return prev + cur.fullname + ','
                        }, '')

                        let users = [{type: 'user', codes, name}]
                        try {
                            const data = await addGroupUser(
                                this.form.code,
                                users
                            )
                            console.log(data)
                        } finally {
                        }
                    }

                    this.handleClose()
                } else {
                    this.$message.warning(
                        `有${
                            Object.keys(object).length
                        }个字段未通过校验，请正确填写表单内容。`
                    )
                    this.loading = false
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-drawer__wrapper{

    .el-drawer__header{
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 0;
        background: url("~@/assets/img/publicLayout/header-bg.png") no-repeat 10% 100%, linear-gradient(180deg, $--system-module-color1 0%, $--system-module-color1 100%);
    }
    .el-drawer__header span{
        font-weight: bold;
        font-size: 16px;
        color: #fff;
    }
    .content-wrapper{
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    .btn-box{
        text-align: center;
        margin-top: 20px;
    }
    .rows {
        display: flex;
        align-items: center;
        border-bottom: 1px solid $--system-border-color2;
        margin-bottom: 16px;
        padding: 10px 0;

        .rows-left {
            margin-right: 10px;

            .rows-hr {
                width: 3px;
                height: 18px;
                background-color: $--system-border-color1;
                border-radius: 2px;
            }
        }

        .rows-title {
            .text-overflow {
                width: 100%;
                font-size: 16px;
                color: $--color-white;
            }
        }
    }
    .table-wrapper{
        height: calc(100% - 260px);
    }
    .table-content{
        height: calc(100% - 62px);
    }
}
</style>