<!--
    配额下发
    @Author:
    @Date:  2020-09-16
-->
<template>
    <el-row class="quato-content" :gutter="10">
        <el-col :span="12">
            <div class="card-title">计算方式</div>
            <div class="card-body">
                <el-form
                    ref="quatoForm"
                    :model="quatoForm"
                    label-suffix=":"
                    label-position="right"
                    label-width="120px"
                    :rules="quaFormRules"
                >
                    <el-form-item label="角色名称">
                        <el-input disabled v-model="quatoForm.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色层级">
                        <dg-select disabled v-model="quatoForm.roleLevel" code="DM_ROLE_LEVEL"></dg-select>
                    </el-form-item>
                    <el-form-item label="下发机构">
                        <el-input disabled v-model="quatoForm.targetOrgName"></el-input>
                    </el-form-item>
                    <el-form-item label="空闲名额">
                        <el-input disabled v-model="quatoForm.freeNum"></el-input>
                    </el-form-item>
                    <el-form-item label="配额计算规则" prop="rules">
                        <dg-select
                            v-model="quatoForm.rules"
                            placeholder="请选择配额计算规则"
                            :data="peiRules"
                            clearable
                        ></dg-select>
                    </el-form-item>
                    <el-form-item label="单位类别">
                        <dg-tree-drop
                            v-model="quatoForm.unitClass"
                            placeholder="请选择单位类别"
                            :props="props"
                            :data="options"
                            :tree-props="treeOptions"
                            clearable
                            filterable
                            multiple
                            style="width:100%"
                        ></dg-tree-drop>

                        <!--<dg-tree-drop-->
                        <!--v-model="quatoForm.unitClass"-->
                        <!--placeholder="请选择单位类别"-->
                        <!--:props="props"-->
                        <!--:data="options"-->
                        <!--multiple-->
                        <!--visible-type="leaf"-->
                        <!--clearable-->
                        <!--filterable-->
                        <!--&gt;-->
                        <!--</dg-tree-drop>-->
                    </el-form-item>
                    <el-form-item label="匹配单位数">
                        <template>
                            <span style="display: inline-block">{{ metaUniclass }}</span>
                            <div style="text-align: right;display: inline-block;float: right">
                                <dg-button type="primary" @click="getMetaCount">计算</dg-button>
                            </div>
                        </template>
                    </el-form-item>
                    <el-form-item label="固定配额" prop="addNum">
                        <el-input clearable v-model.number="quatoForm.addNum"></el-input>
                    </el-form-item>
                    <el-form-item label="分配范围">
                        <dg-select
                            :data="rangeList"
                            v-model="quatoForm.targetOrgLevel"
                            clearable
                            filterable
                        ></dg-select>
                    </el-form-item>
                    <el-form-item label="">
                        <template>
                            <div style="text-align: right">
                                <dg-button type="primary" @click="handleSave">保存</dg-button>
                            </div>
                        </template>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="card-title">计算结果</div>
            <div class="card-body" style="min-height: 440px">
                <dg-tree
                    node-key="value"
                    icon-class="el-icon-folder-opened"
                    icon-leaf="el-icon-document"
                    :data="resultTreeData"
                    :props="resultProps"
                    :load="loadNode"
                    lazy
                ></dg-tree>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import * as commonApi from "@/api/common";
import * as empowerApi from "@/api/empower-manage";

export default {
    name: "quato-distribution",
    // 接收父页面传过来的属性
    props: {
        sizeForm: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        // 监听单位层级变化 获取分配范围
        "quatoForm.unitClass"(v) {
            this.handleChangeUniClass(v);
        }
    },
    // 页面数据绑定
    data() {
        var checkSeq = (rule, value, callback) => {
            if (value && !Number.isInteger(value)) {
                callback(new Error("无效的数字值"));
            } else {
                callback();
            }
        };
        return {
            quatoForm: {
                addNum: "",
                appId: "",
                appOrgId: "",
                initNum: 0,
                initNumOld: 0,
                roleId: "",
                roleName: "",
                roleLevel: "",
                rootId: "",
                targetOrgId: "",
                targetOrgName: "",
                targetOrgLevel: "",
                unitClass: "",
                upOrgId: "",
                freeNum: "",
                rules: "0",
                range: ""
            },
            props: {
                value: "CODE",
                label: "VALUE",
                children: "children"
            },
            treeOptions: {
                checkOnClickNode: true,
                accordion: true,
                lazyLoad: false
                // isFrozenRoot: true
            },
            options: [],
            // 配额规则
            peiRules: [
                {
                    value: "0",
                    label: "按单位数分配"
                }
            ],
            // 分配范围
            rangeList: [],

            // 校验规则
            quaFormRules: {
                rules: [{ required: true, message: "请选择配额计算规则", trigger: "change" }],
                addNum: [
                    { required: true, message: "请输入固定配额", trigger: "blur" },
                    { validator: checkSeq, trigger: "blur" }
                ]
            },

            // 匹配单位数
            metaUniclass: "",

            resultProps: {
                value: "value",
                label: "label",
                isLeaf(data) {
                    return data.parent !== true;
                }
            },
            resultTreeData: []
        };
    },
    // 计算属性
    computed: {},
    // 方法
    methods: {
        handleChangeUniClass(val) {
            const that = this;
            that.quatoForm.range = "";
            that.rangeList = [];
            let queryParams = {
                orgId: that.quatoForm.targetOrgId,
                roleLevel: that.quatoForm.roleLevel,
                unitClass: val || ""
            };
            commonApi.distribuAction(queryParams).then(res => {
                that.rangeList = res;
            });
        },

        // 匹配单位数
        getMetaCount() {
            const that = this;
            const data = {
                orgId: that.quatoForm.targetOrgId,
                roleLevel: that.quatoForm.roleLevel,
                unitClass: that.quatoForm.unitClass
            };
            empowerApi.getMateCount(data).then(res => {
                that.metaUniclass = res.count || "0";
                that.resultTreeData = res.treeList;
            });
        },
        loadNode(node, resolve) {
            const that = this;
            that.getResult(node.level === 0 ? void 0 : node.key, resolve, node.level);
        },
        // 计算结果
        getResult(id, resolve, level) {
            const that = this;
            const data = {
                id: id,
                // orgId: that.quatoForm.targetOrgId,
                roleLevel: that.quatoForm.roleLevel,
                unitClass: that.quatoForm.unitClass
            };
            empowerApi.getQuataTreeYB(data).then(res => {
                resolve(res || []);
            });
        },
        // 保存
        handleSave() {
            const that = this;
            const { quatoForm } = that;
            that.$refs.quatoForm.validate(valid => {
                if (!valid) {
                    return false;
                } else {
                    empowerApi
                        .orgQuotaSave(quatoForm)
                        .then(res => {
                            that.$message.success("保存成功!");
                            that.$emit("success", true);
                        })
                        .catch(err => {
                            that.$message.error(err);
                        });
                }
            });
        }
    },
    // 创建组件时调用
    created() {
        const that = this;
        // debugger;
        this.quatoForm = {
            ...this.sizeForm,
            addNum: "",
            rules: "0",
            range: ""
        };
        // 单位类别
        commonApi.uniClass2().then(({ arr, tree }) => {
            that.options = tree;
            // console.log(that.options);
        });

        // 分配范围
        that.handleChangeUniClass();
    }
};
</script>

<style scoped lang="scss">
.quato-content {
    .card-title {
        height: 32px;
        line-height: 32px;
        padding: 0 15px;
        border: 0 none;
        background-color: #eef2fa;
    }
    .card-body {
        padding: 10px;
        margin-bottom: 0;
        border: 1px solid #e7eaec;
    }
}
</style>
