<template>
    <div class="_box">
        <!-- <div><el-button type="primary" size="medium" @click="cancel" style="position: absolute; right: 30px; top: 15px;">返回</el-button></div> -->
        <div class="_title"><i class="el-icon-info"></i>&nbsp;&nbsp;{{title}}基础信息
        </div>
        <div class="formArea">
            <el-form ref="taskForm" :rules="taskRules" :model="form" label-width="70px">
                <el-form-item label="审批角色:" prop="approveRole">
                    <el-select v-model="form.approveRole" clearable filterable placeholder="请选择审批角色" style="width: 100%" @change="roleChange">
                        <el-option
                            v-for="item in roleOptions"
                            :key="item.roleId"
                            :label="item.roleName"
                            :value="item.roleId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请人：">
                    <el-input v-model="form.userName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="审批事项:" prop="reason">
                    <el-input v-model="form.reason" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div style="text-align: center; margin-top: 30px; margin-bottom: 30px;">
            <el-button type="primary" size="medium" @click="submit">提交</el-button>
            <el-button type="danger" size="medium" @click="clearForm">清空</el-button>
            <el-button size="medium" @click="cancel">返回</el-button>
        </div>
    </div>
</template>

<script type="text/javascript">
    import {  getCookie } from '@/utils/util.js';
    export default {
        name: 'userApplyStart',
        props: {
            design: {
                type: String,
                default: ''
            },
            companyId: {
                type: String,
                default: ''
            },
            dataItem: {
                type: Object,
                default: () => {}
            }
        },
        data () {
            return {
                title: '',
                approveStatus: '审批人员', // 区分提交选择审批人情况
                form: {
                    userName: '',
                    startTime: '', // 请假开始时间
                    endTime: '', // 请假结束时间
                    leaveTime: '', // 请假总天数
                    approveRole: '',
                    approveuser: '',
                    reason: ''
                },
                formKey: '',
                firstTaskParameters: '', //当前首个审批节点参数信息
                userId: '',
                roleOptions: '', //角色列表
                userOptions: [], //用户列表
                taskRules: {
                    approveRole: [
                        {required: true, message: '审批角色不能为空', trigger: 'change'}
                    ],
                    reason: [
                        {required: true, message: '审批事项不能为空', trigger: 'change'}
                    ]
                }
            }
        },
        mounted () {
            // 获取当前用户
            this.userId = getCookie('userId');
            this.getUserName(this.userId );
            this.formKey = this.dataItem.key;
            this.title = this.dataItem.name;
            this.getRoleOptions();
        },
        methods: {
            // 根据userId获取申请人姓名
            getUserName (id) {
                this.axios.get('pass/v1/sysusers/' + id).then(async(res) => {
                    if(res.code === '0') {
                        this.form.userName = res.data.userName;
                    } else {
                        this.$message.error(res.message)
                    }
                });
            },
            // 获取角色列表
            getRoleOptions () {
                this.axios.get('pass/v1/sysroles/?pageNum=1&pageSize=100000').then(res => {
                    if (res.code === '0') {
                        this.roleOptions = res.data.list;
                    } else {
                        this.$message.error(res.message);
                    }
                }).catch((err) => {
                    console.log(err);
                })
            },
            roleChange () {
                this.getUserOptions();
            },
            // 获取角色下用户列表
            getUserOptions (id) {
                this.axios.get('pass/v1/sysuserroles/getUsersByRoleId?roleId=' + this.form.approveRole + '&companyId=' + this.companyId).then(res => {
                    if (res.code === '0') {
                        this.userOptions = res.data.list;
                    } else {
                        this.$message.error(res.message);
                    }
                }).catch((error) => {
                    console.log(error);
                })
            },
            submit () {
                if (this.userOptions.length > 0) {
                    let userList = [];
                    this.userOptions.forEach(item => {
                        userList.push(item.id);
                    })
                    this.$refs['taskForm'].validate((valid) => {
                        if (valid) {
                            let params = {
                                id: this.userId,
                                reason: this.form.reason,
                                userList: userList,
                                companyId: this.companyId
                            }
                            this.axios.post('pass/act/v1/act/startProcess/var?userId=' + this.userId + '&formKey=' + this.formKey, params, {individualType:'json'}).then(res => {
                                if (res.code === '0') {
                                    this.$message.success('提交成功');
                                    this.$emit('on-then', 'success');
                                } else {
                                    this.$message.error(res.message)
                                }
                            })
                        }
                    })
                } else {
                    this.$message.warning('未获取到用户列表，请稍后提交！')
                }
            },
            clearForm () {
                this.$refs['taskForm'].resetFields();
            },
            cancel () {
                // this.$router.back();
                this.$emit('on-then', '');
                this.clearForm();
            }
        }
    }
</script>

<style type="text/css" scoped>
    ._box {
        margin: 0px 30px auto 50px;
    }
    ._title {
        height: 50px;
        padding: 15px 15px;
        font-size: large;
        border-bottom: solid 1px #ddd;
    }
    .formArea {
        margin-top: 20px;
        padding: 15px 10%
    }
    .el-form-item {
        margin-bottom: 20px;
    }
</style>
