<template>
    <div class="users">
        <el-form :inline="true" label-position="labelPosition" label-width="95px" :model="formData" :rules="rules" ref="form" class="option">
            <el-form-item label="审批意见" prop="enforce_result">
                <el-radio v-model="formData.enforce_result" label="PASS">批准</el-radio>
                <el-radio v-model="formData.enforce_result" label="REJECT">驳回</el-radio>
            </el-form-item>
            <el-form-item label="备注说明" prop="info">
                <el-input
                        v-model="formData.info"
                        type="textarea"
                        show-word-limit
                        :rows="5"
                        maxlength="300"
                        placeholder="请输入"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="被检查单位" prop="companyName" v-if="formData.enforce_result === 'PASS'">
                <el-select v-model="formData.companyName" placeholder="选择被检查单位"
                           @focus="showChooseResource=true"></el-select>
            </el-form-item>
            <el-form-item label="执法机构" prop="enforce_org_id" v-if="formData.enforce_result === 'PASS'">
                <el-cascader
                    class="custom-cascader"
                    v-model="enforce_org_id"
                    :props="orgProps"
                    ref="cascaderAddr"
                    :options="orgOptions"
                    @change="orgChanged">
                </el-cascader>
            </el-form-item>
            <el-form-item label="检查成员" prop="executors" v-if="formData.enforce_result === 'PASS'">
                <el-select v-model="selectUsers" multiple clearable placeholder="检查成员"
                           @change="selectApprove">
                    <el-option v-for="item in orgUsers" :key="item.id" :value="item.id"
                               :label="item.name"/>
                </el-select>
            </el-form-item>
            <el-form-item label="检查期限" prop="last_enforce_date" v-if="formData.enforce_result === 'PASS'">
                <el-date-picker
                    v-model="formData.last_enforce_date"
                    type="month"
                    value-format="yyyy-MM"
                    :picker-options="pickerOptions0"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <el-dialog title="选择被检查单位" :visible.sync="showChooseResource" append-to-body class="custom-dialog">
            <choose-resource @changeResource="changeResource"></choose-resource>
        </el-dialog>
    </div>
</template>

<script>
import ChooseResource from '@/component/ChooseResource'
import {getUserByOrg} from '@/api/base'
import { orgMixin } from '@/mixin/org';

export default {
    name: 'ApproveStatus',
    components: {
        ChooseResource
    },
    mixins: [orgMixin],
    data() {
        let enforce_org_idValid = (rule, value, callback) => {
                let tmp = this.formData.enforce_org.enforce_org_id;
                if (!tmp || tmp === '') {
                    callback(new Error('请选择执法机构'))
                }else {
                    callback()
                }
            }
        let selectUsersValid =(rule, value, callback) => {
            let tmp = this.formData.executors;
            if (!tmp || tmp.length < 1) {
                callback(new Error('请选择执法人员'))
            }else {
                callback()
            }
        }
        return {
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            labelPosition:'right',
            loading: false,
            formData: {
                enforce_result: undefined,
                info: undefined,
                company: '',
                companyName: '',
                last_enforce_date: '',
                executors:[],
                enforce_org:{
                    enforce_org_id:'',
                    enforce_org_name:''
                }
            },
            orgUsers: [],
            selectOrg: [],
            enforce_org_id: '',
            initShow: true,
            selectUsers: [],//已选择的人
            showChooseResource: false,

            rules: {
                enforce_result: [
                    {required: true, message: '请选择审核状态', trigger: 'change'}
                ],
                info: [
                    {required: true, message: '请输入信息内容', trigger: 'change'}
                ],
                companyName: [
                    {required: true, message: '请选择检查单位', trigger: 'change'}
                ],
                last_enforce_date: [
                    {required: true, message: '请选择检查期限', trigger: 'change'}
                ],
                enforce_org_id: [
                    { required: true,validator: enforce_org_idValid,message:'请选择执法机构', trigger: 'change' }
                ],
                executors: [
                    { required: true,validator: selectUsersValid,message:'请选择执法人员', trigger: 'change' }
                ]
            }
        }
    },
    mounted() {
        this.loadOrgTree();
    },
    methods: {
        changeResource(data) {
            if (data) {
                this.formData.company = data.id
                this.formData.companyName = data.enforce_obj_name
            }
            this.showChooseResource = false
        },
        orgChanged(data) {
            let arr = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels;
            let thsAreaCode = arr[arr.length-1];
            this.formData.enforce_org.enforce_org_name = thsAreaCode;
            this.formData.enforce_org.enforce_org_id = data.length > 0 ? data[data.length - 1] : null
            this.orgUsers = [];
            this.selectUsers=[]
            this.getOrgUsers()
        },
        getOrgUsers() {
            if (this.formData.enforce_org.enforce_org_id) {
                getUserByOrg(1, 10000, this.formData.enforce_org.enforce_org_id).then(res => {
                    if (res && res.data) {
                        this.orgUsers = res.data
                    }
                })
            } else {
                this.$message.warning('请先选择执法机构')
            }
        },
        cancel(formName) {
            this.$message.warning("取消成功")
        },
        //选择了审核人员
        selectApprove() {
            let userList = [], res = [];
            this.selectUsers.map(id => {
                res = this.orgUsers.filter(item => id == item.id);
                if (res.length > 0) {
                    userList.push({
                        user_id: res[0].uid,
                        user_name: res[0].name,
                        phone: res[0].phone_num,
                    });
                }
            });
            this.formData.executors = userList;
        }
    }
}
</script>

<style lang="scss" scoped>
    .info {
        padding-right: 60px;
    }
</style>