<template>
    <ap-container>
        <ap-aside margin="0100" style="border-right: 1px solid #e2e7ef;">
            <div class="layout-aside-header">
                <div class="layout-aside-header-title">基准岗位</div>
            </div>
            <div class="layout-aside-content" v-loading="loadingTreeFlag">
                <el-tree
                    ref="tSysJobStandardTreeRef"
                    node-key="fdId"
                    :data="standardTreeList"
                    :props="{children: 'children',label: 'fdName'}"
                    :check-on-click-node="true"
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    :check-strictly="false"
                    :filter-node-method="filterTreeNode"
                    @node-click="clickTreeEvent">
                </el-tree>
            </div>
        </ap-aside>
        <ap-container>
            <ap-header margin="0000" style="border-bottom: 1px solid #e2e7ef;">
                <el-form ref="tSysJobSearchForm" :model="tSysJobSearchForm" :rules="tSysJobSearchFormRules"
                         :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                    <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                        <el-input v-model="tSysJobSearchForm.likeStr" placeholder="名称/编码"></el-input>
                    </el-form-item>
                    <el-form-item label="是否有效:" class="layout-header-form-item" prop="fdDisabled">
                        <el-select v-model='tSysJobSearchForm.fdDisabled'>
                            <el-option key="" label="全部" value=""></el-option>
                            <el-option :key="0" label="有效" :value="0"></el-option>
                            <el-option :key="1" label="失效" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="searchEvent">查询</el-button>
                <ap-button type="primary" :click="syncJobInfo" style="display: none">更新EHR岗位</ap-button>
            </ap-header>
            <ap-main margin="0000">
                <ap-table ref="tSysJobRef" :options.sync="tSysJobOpt"></ap-table>
            </ap-main>
        </ap-container>
        <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.isVisible" @close="resetTSysJobForm"
                   width="600px">
            <el-form ref="tSysJobFormRef" :model="tSysJobForm" :rules="tSysJobFormRules"
                     v-loading="dialogInfo.formIsLoading"
                     label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='基准岗位' prop='fdStandardId'>
                            <ap-search-tree :options.sync="tSysJobFormStandardOptions"></ap-search-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='名称' prop='fdName'>
                            <el-input v-model='tSysJobForm.fdName'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='部门' prop='fdDeptId' style="width: 100%">
                            <dc-org-search ref="tSysJobFormDeptRef"
                                           :options.sync="tSysJobFormDeptOptions"
                                           style="width: 100%"></dc-org-search>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='编码' prop='fdCode'>
                            <el-input v-model='tSysJobForm.fdCode'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='排序' prop='fdSort'>
                            <el-input v-model='tSysJobForm.fdSort'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='是否有效' prop='fdDisabled'>
                            <el-radio-group v-model="tSysJobForm.fdDisabled">
                                <el-radio :label="0">有效</el-radio>
                                <el-radio :label="1">失效</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <span slot="footer">
                <el-button @click="dialogInfo.isVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveTSysJobForm"
                           :loading="dialogInfo.saveBtnIsLoading">确 定</el-button>
            </span>
        </el-dialog>
    </ap-container>
</template>

<script>
import ApSearchTree from 'ap-frame/frame/components/ApSearchTree'
import {convertToTreeData} from 'ap-util/util/DataUtil'
import DcOrgSearch from '@/components/DcOrgSearch'

export default {
    name: 'TSysJob',
    components: {
        ApSearchTree,
        DcOrgSearch,
    },
    data() {
        let columns = [
            {
                prop: 'fdName',
                label: '名称',
                type: 'input',
                width: 200
            }, {
                prop: 'fdStandardName',
                label: '基准岗位',
                type: 'input',
                width: 200
            }, {
                prop: 'fdCode',
                label: '基准岗位编码',
                type: 'input',
                width: 200
            }, {
                prop: 'fdDeptName',
                label: '部门',
                type: 'input'
            }, {
                prop: 'fdSort',
                label: '排序',
                type: 'input',
                align: "center",
                width: 100
            }, {
                prop: 'fdDisabled',
                label: '是否有效',
                type: 'select',
                align: "center",
                width: 80,
                selectOptions: [{label: "有效", value: 0}, {label: "失效", value: 1}],
                html: function (value, row) {
                    if (value == 1) {
                        return '<div class="ap-tag-danger">禁用</div>'
                    } else if (value == 0) {
                        return '<div class="ap-tag-success">启用</el-tag>';
                    }
                },
            },
        ];
        let toolbarBtn = [
            {type: "add", onClick: this.openAddDialog},
            {type: "edit", onClick: this.openEditDialog},
            "del", "refresh"
        ];
        let tableOpt = {
            title: "岗位列表",
            columns: columns,
            dataUrl: "/apm/sys/job/getTSysJobGridList",
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apm/sys/job/deleteTSysJobGridData",
            toolbarBtn: toolbarBtn,
            initData: true, // 默认false
            pagination: {pageSizes: [100, 1000, 3000], pageSize: 100},
            params: () => {
                return {
                    likeStr: this.tSysJobSearchForm.likeStr,
                    fdDisabled: this.tSysJobSearchForm.fdDisabled,
                    fdStandardId: this.tSysJobSearchForm.fdStandardId,
                }
            }
        };
        let tSysJobFormStandardOptions = {
            searchTreeText: "",
            searchTreeValue: "",
            searchTreeUrl: "/apm/sys/jobStandard/getTSysJobStandardList",
            searchTreeConfirm: (checkedNodes) => {
                // 修改组件显示值
                this.tSysJobFormStandardOptions.searchTreeValue = checkedNodes[0].fdId;
                this.tSysJobFormStandardOptions.searchTreeText = checkedNodes[0].fdName;
                // 修改表单值
                this.tSysJobForm.fdStandardId = checkedNodes[0].fdId;
                this.tSysJobForm.fdStandardName = checkedNodes[0].fdName;
                return true;
            },
            searchTreeClear: () => {
                this.tSysJobFormStandardOptions.searchTreeValue = "";
                this.tSysJobFormStandardOptions.searchTreeText = "";

                this.tSysJobForm.fdStandardId = "";
                this.tSysJobForm.fdStandardName = "";
                return true;
            },
        };

        let tSysJobFormDeptOptions = {
            searchText: "",
            searchValue: "",
            searchTreeExpandAll: true,
            searchTreeParams: {},
            searchConfirm: (selectData) => {
                if (Array.isArray(selectData)) {
                    // 单选
                    this.tSysJobFormDeptOptions.searchValue = selectData[0].fdId;
                    this.tSysJobFormDeptOptions.searchText = selectData[0].fdName;

                    this.tSysJobForm.fdDeptId = this.tSysJobFormDeptOptions.searchValue;
                    this.tSysJobForm.fdDeptName = this.tSysJobFormDeptOptions.searchText;
                }
                return true;
            },
            searchClear: () => {
                this.tSysJobFormDeptOptions.searchValue = "";
                this.tSysJobFormDeptOptions.searchText = "";

                this.tSysJobForm.fdDeptId = "";
                this.tSysJobForm.fdDeptName = "";
                return true;
            }
        };

        let tSysJobForm = {
            fdName: '',
            fdStandardId: '',
            fdStandardName: '',
            fdDeptId: '',
            fdDeptName: '',
            fdCode: '',
            fdSort: '',
            fdDisabled: '',
        };


        return {
            // 左侧树
            loadingTreeFlag: false,
            treeFilterText: '',
            standardList: [],
            standardTreeList: [],
            selectedTree: {
                fdId: '',
                fdCode: '',
                fdName: '',
            },

            tSysJobOpt: tableOpt,
            // 表单
            tSysJobForm: tSysJobForm,
            // 基准岗位选择
            tSysJobFormStandardOptions: tSysJobFormStandardOptions,
            // 部门选择
            tSysJobFormDeptOptions: tSysJobFormDeptOptions,
            tSysJobFormRules: {
                fdName: [{required: true, message: "请输入岗位名称", trigger: 'blur'},
                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}],
                fdDisabled: [{required: true, message: "请选择是否生效", trigger: 'blur'}]
            },
            dialogInfo: {
                title: "",
                isAdd: false,
                isVisible: false,
                saveBtnIsLoading: false,
                formIsLoading: false
            },
            tSysJobSearchForm: {
                likeStr: "",
                fdDisabled: 0,
                fdStandardId: ""
            },
            tSysJobSearchFormRules: {

                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            }
        }
    },
    created() {
        this.loadTreeData();
    },
    methods: {
        // 左侧树：加载数据
        loadTreeData() {
            this.loadingTreeFlag = true;

            // 加载数据
            this.$request({
                url: '/apm/sys/jobStandard/getTSysJobStandardList',
                method: 'post',
                data: {
                    fdDisabled: 0
                }
            }).then(response => {
                // 数据格式转换：数组 -> tree
                this.standardTreeList = convertToTreeData(response.data, {
                    idKey: "fdId",
                    parentKey: "fdParentId",
                    childrenKey: "children",
                });
                this.standardList = response.data;
            }).finally(() => {
                this.loadingTreeFlag = false;
            })
        },
        // 左侧树：过滤节点
        filterTreeNode(value, data) {
            if (!value) return true;
            return data.fdName.indexOf(value) !== -1 || data.fdCode.indexOf(value) !== -1;
        },
        // 左侧树：click事件
        clickTreeEvent(data, node, comp) {
            // 判断是否已选中
            if (this.selectedTree.fdId == data.fdId) {
                // 点击的是已选中节点，进行取消选择
                this.selectedTree.fdId = '';
                this.selectedTree.fdName = '';
                this.selectedTree.fdCode = '';
                this.tSysJobOpt.title = `岗位列表`;
                this.$refs.tSysJobStandardTreeRef.setCurrentKey(null);
            } else {
                // 选中新节点
                this.selectedTree.fdId = data.fdId;
                this.selectedTree.fdName = data.fdName;
                this.selectedTree.fdCode = data.fdCode;
                this.tSysJobOpt.title = `岗位列表 -【${data.fdName}】-【${data.fdCode}】`;
            }
            this.tSysJobSearchForm.fdStandardId = this.selectedTree.fdId;
            this.$refs.tSysJobRef.refresh();
        },
        // 打开添加dialog
        openAddDialog() {
            this.dialogInfo.isAdd = true;
            this.dialogInfo.title = "添加数据";
            this.dialogInfo.isVisible = true;

            // 默认 生效
            this.tSysJobForm.fdDisabled = 0
        },
        // 打开编辑dialog
        openEditDialog() {
            let selectedRows = this.$refs.tSysJobRef.getSelection();
            if (selectedRows.length < 1) {
                this.$message.error("请选择需要编辑的行！");
                return;
            }
            if (selectedRows.length > 1) {
                this.$message.error("只能选择单行数据进行编辑！");
                return;
            }

            this.dialogInfo.isAdd = false;
            this.dialogInfo.title = "编辑数据";
            this.dialogInfo.isVisible = true;
            this.dialogInfo.formIsLoading = true;
            // 获取单条数据
            this.$request({
                url: '/apm/sys/job/getTSysJobByFdId',
                method: 'post',
                data: {
                    fdId: selectedRows[0].fdId
                }
            }).then(response => {
                this.tSysJobForm = response.data;
                // 基准岗位资料
                this.tSysJobFormStandardOptions.searchTreeValue = this.tSysJobForm.fdStandardId;
                this.tSysJobFormStandardOptions.searchTreeText = this.tSysJobForm.fdStandardName;
                // 部门资料赋值
                this.tSysJobFormDeptOptions.searchValue = this.tSysJobForm.fdDeptId;
                this.tSysJobFormDeptOptions.searchText = this.tSysJobForm.fdDeptName;
            }).finally(() => {
                this.dialogInfo.formIsLoading = false;
            })
        },
        // 重置表单
        resetTSysJobForm() {
            this.tSysJobFormStandardOptions.searchTreeValue = "";
            this.tSysJobFormStandardOptions.searchTreeText = "";

            this.tSysJobFormDeptOptions.searchValue = "";
            this.tSysJobFormDeptOptions.searchText = "";

            this.$refs.tSysJobFormRef.resetFields();
        },
        // dialog表单保存
        saveTSysJobForm() {
            // 表单rules认证
            this.$refs.tSysJobFormRef.validate((valid) => {
                if (!valid) {
                    this.$message.error('数据校验错误！');
                    return false;
                }
                this.dialogInfo.saveBtnIsLoading = true;

                let fnName = this.dialogInfo.isAdd ? "insertTSysJob" : "updateTSysJob";
                // 添加数据
                this.$request({
                    url: '/apm/sys/job/' + fnName,
                    method: 'post',
                    data: this.tSysJobForm
                }).then(response => {
                    this.$message.success(`保存成功！`)
                    this.dialogInfo.isVisible = false;
                    // 刷新表格
                    this.$refs.tSysJobRef.refresh();
                }).finally(() => {
                    this.dialogInfo.saveBtnIsLoading = false;
                })
            });
        },
        // 查询
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysJobSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysJobRef.refresh();
            });
        },
        syncJobInfo() {
            return new Promise((resolve) => {
                this.$request({
                    url: '/apm/sys/job/syncJob',
                    method: 'post',
                }).then(response => {
                    this.$message.success(`岗位资料更新完成！`);
                    this.$refs.tSysJobRef.refresh();
                }).finally(() => {
                    resolve();
                });
            });
        }
    }
}
</script>

<style scoped>
</style>
