<template>
    <div class="info">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="80px" class="custom-form">
            <el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="执法机构" prop="enforce_org_id">
                            <el-cascader
                                    class="custom-cascader"
                                    v-model="enforce_org_id"
                                    :props="orgProps"
                                    ref="cascaderAddr"
                                    :options="orgOptions"
                                    @change="orgChanged">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="检查成员" prop="selectUsers">
                            <el-select v-model="selectUsers" multiple clearable placeholder="审批人员"
                                       @change="selectApprove($event)">
                                <el-option v-for="item in orgUsers" :key="item.id" :value="item.id"
                                           :label="item.name"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="检查日期" prop="last_enforce_date">
                            <el-date-picker
                                    v-model="formData.last_enforce_date"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <el-form-item>
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary" @click="saveOrEditJob('formData')">确定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    import {resourceMixin} from '@/mixin/resource'
    import {updateJobBasic} from '@/api/job'
    import {getUserByOrg} from '@/api/base'
    import { orgMixin } from '@/mixin/org';

    export default {
        components: {},
        mixins: [resourceMixin, orgMixin],
        data() {
            return {
                orgUsers: [],
                selectOrg: [],
                enforce_org_id: '',
                initShow: true,
                selectUsers: [],//已选择的疑
                formData: {
                    id: '',
                    // job_type: '',
                    allot_status: '1',
                    executors: []
                },
                rules: {
                    last_enforce_date: [
                        {required: true, message: '请选择检查时间', trigger: 'change'}
                    ],
                    enforce_org_id: [
                        {
                            validator: (rule, value, callback) => {
                                let tmp = this.formData.enforce_org_id;
                                if (!tmp || tmp === '') {
                                    callback(new Error('请选择执法机构'))
                                } else {
                                    callback();
                                }

                            },
                            trigger: 'blur'
                        }
                    ],
                    selectUsers: [
                        {
                            validator: (rule, value, callback) => {
                                let tmp = this.formData.executors;
                                if (!tmp || tmp.length < 1) {
                                    callback(new Error('请选择执法人员'))
                                } else {
                                    callback();
                                }

                            },
                            trigger: 'blur'
                        }
                    ]
                },
                showMap: false,//地图组件
                showChooseResource: false,//选择单位组件
                approveUsers: [] //审核人员列表
            }
        },
        computed: {},
        mounted() {
            this.loadOrgTree();
        },

        props: {
            jobType: {
                type: String
            },
            id: {
                type: Number
            }
        },
        methods: {
            orgChanged(data) {
                // console.log(data);
                let thsAreaCode = this.$refs['cascaderAddr'].inputValue;
                this.formData.enforce_org_name = thsAreaCode;
                this.formData.enforce_org_id = data.length > 0 ? data[data.length - 1] : null
                this.orgUsers = [];
                this.getOrgUsers()
            },
            getOrgUsers() {
                if (this.formData.enforce_org_id) {
                    getUserByOrg(1, 10000, this.formData.enforce_org_id).then(res => {
                        if (res && res.data) {
                            this.orgUsers = res.data
                        }
                    })
                } else {
                    this.$message.warning('请先选择执法机构')
                }
            },
            cancel(formName) {
                this.$message.warning("取消成功")
                this.$emit('changeDispatchVisible')
            },
            //选择了审核人员
            selectApprove(userIdList) {
                // console.log(userIdList)

                // this.formData.approve_user_id = userId;
                let userList = [];
                this.orgUsers.forEach(item => {
                    userIdList.forEach(userId => {
                        if (item['userId'] == userId) {
                            let user = {};
                            user['user_id'] = item.userId;
                            user['user_name'] = item.userName;
                            user['phone'] = item.userCellphoneNo;
                            userList.push(user);
                        }
                    });
                });
                console.log(userList);
                this.formData.executors = userList;
            },
            //保存
            saveOrEditJob(formName) {
                // console.log(this.formData)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.formData.executors.length > 0 && this.formData.enforce_org_id && this.formData.last_enforce_date) {
                            updateJobBasic(this.id, this.formData).then(res => {
                                this.$emit("changeDispatchVisible")
                                this.$emit("resetForm")
                            })
                        }
                    }
                });

            }
        }
    }
</script>

<style lang="scss" scoped>
    .info {
        display: flex;
        flex-direction: column;
        padding: 16px 16px 0;
        background-color: #FFFFFF;
        border-radius: 10px;
    }
</style>