<template>
    <el-dialog :title="'分配标签'" :close-on-click-modal="false" :close-on-press-escape="false"
        :visible.sync="visible" lock-scroll class="JNPF-dialog JNPF-dialog_center" width="600px">
        <el-form ref="dataForm" v-loading="formLoading" :model="dataForm" :rules="dataRule"
            label-width="90px">
            <el-form-item label="标签" prop="labelId">
                <el-select v-model="dataForm.labelId" multiple placeholder="请选择标签" filterable>
                    <el-option v-for="(item,index) in typeOptions" :key="index"
                        :label="item.labName" :value="item.id">
                        <span class="tag" :style="{ background: item.color, color: '#fff' }">
                            {{item.labName}}
                        </span>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
            <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
                {{$t('common.confirmButton')}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { createPosition, updatePosition, getPositionInfo } from '@/api/permission/position'

import { LabelManagementRelation } from '@/api/permission/user'
import request from '@/utils/request'

export default {
    data() {
        return {
            visible: false,
            formLoading: false,
            btnLoading: false,
            typeOptions: [],
            dataForm: {
                labelId: [],
            },
            userId: null,
            organizeIdTree: [],
            dataRule: {
                type: [
                    { required: true, message: '岗位类型不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        init(row) {
            this.userId = row.id



            this.visible = true
            this.organizeIdTree = []
            this.formLoading = true


            let _query = {
                ...this.listQuery,
                ...this.query,
                ...this.defListQuery,
                keyword: this.keyword,
                dataType: 0,
                menuId: this.menuId,
                moduleId: '610009872183864709',
                type: 1,
            };
            request({
                url: `/api/mp/LabelManagement/getList`,
                method: 'post',
                data: _query
            }).then(res => {
                var _list = [];
                for (let i = 0; i < res.data.list.length; i++) {
                    let _data = res.data.list[i];
                    _list.push(_data)
                }
                this.typeOptions = _list.map(o => ({
                    ...o,
                    ...this.expandObj,
                }))

                this.dataForm.labelId = []
                row.label.forEach(item => {
                    this.typeOptions.forEach(item2 => {
                        if (item.labName == item2.labName) {
                            this.dataForm.labelId.push(item2.id)
                        }
                    })
                })

            })


            this.$nextTick(() => {
                this.$refs['dataForm'].resetFields()
                // 获取岗位类型
                this.$store.dispatch('base/getDictionaryData', { sort: 'PositionType' }).then(res => {
                    this.typeOptions = res
                })

                this.formLoading = false
            })
        },
        dataFormSubmit() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.btnLoading = true
                    const formMethod = this.dataForm.id ? updatePosition : createPosition


                    let params = {
                        labelId: this.dataForm.labelId,
                        userId: this.userId
                    }

                    LabelManagementRelation(params).then(res => {
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false
                                this.btnLoading = false
                                this.$emit('refreshDataList')
                            }
                        })
                    }).catch(() => {
                        this.btnLoading = false
                    })
                }
            })
        }
    }
}
</script>


<style scoped>
.tag {
    padding: 5px 10px;
    border-radius: 4px;
}
</style>
