<template>
    <el-container class="fullheight" style="border: 1px solid #eee">
        <el-aside
            width="230px"
            style="overflow-x: hidden; border: 1px solid #eee"
        >
            <ht-select
                v-model="selectOrgId"
                class="org-select"
                :options="orgList"
                @change="demChange"
            />
            <ht-tree
                :data="treeData"
                :props="defaultProps"
                node-key="id"
                highlight-current
                :expand-on-click-node="false"
                :support-filter="true"
                @node-click="orgTreeClick"
                @refresh="handleRefresh"
                ref="htTree"
                class="orgTree"
                @row-click="rowClick"
            >
            </ht-tree>
        </el-aside>
        <el-container>
            <el-main class="main-ht-table">
                <ht-table
                    @row-click="rowClick"
                    @load="loadData"
                    :data="data"
                    :pageResult="pageResult"
                    :selection="true"
                    :default-sorter="[
                        {direction: 'DESC', property: 'updateTime'},
                    ]"
                    quick-search-props="account,fullname,mobile"
                    :show-custom-column="false"
                    :show-export="false"
                    ref="htTable"
                    @select="selectRow"
                    @select-all="selectRow"
                >
                    <template v-slot:toolbar>
                        <el-button
                            slot="reference"
                            size="small"
                            @click="handleLockout('lockUser')"
                            type="danger"
                            icon="el-icon-lock"
                            >锁定
                        </el-button>
                        <el-button
                            size="small"
                            @click="handleLockout('unLockUser')"
                            icon="el-icon-unlock"
                            type="primary"
                            plain
                            >解锁</el-button
                        >
                    </template>
                    <template>
                        <ht-table-column
                            type="index"
                            width="50"
                            align="center"
                            label="序号"
                        />
                        <ht-table-column
                            prop="lockedStatus"
                            label="是否锁定"
                            width="110"
                            :filters="[
                                {text: '正常', value: 1},
                                {text: '已锁定', value: 2},
                            ]"
                        >
                            <template v-slot="{row}">
                                <el-tag v-if="row.lockedStatus == 1"
                                    >正常</el-tag
                                >
                                <el-tag
                                    type="danger"
                                    v-if="row.lockedStatus == 2"
                                    >已锁定</el-tag
                                >
                            </template>
                        </ht-table-column>
                        <ht-table-column
                            prop="fullname"
                            label="名称"
                            :sortable="true"
                            :show-overflow-tooltip="true"
                        />
                        <ht-table-column
                            prop="account"
                            label="账号"
                            :sortable="true"
                        />
                        <ht-table-column
                            prop="sex"
                            label="性别"
                            width="80"
                            :filters="[
                                {text: '男士', value: '男'},
                                {text: '女士', value: '女'},
                            ]"
                        >
                            <template v-slot="{row}">
                                <el-tag v-if="row.sex == '男'">男士</el-tag>
                                <el-tag type="success" v-if="row.sex == '女'"
                                    >女士</el-tag
                                >
                            </template>
                        </ht-table-column>
                        <ht-table-column prop="email" label="邮箱" />
                        <ht-table-column
                            prop="lockedTime"
                            label="锁定时间"
                            sortable
                            :show-overflow-tooltip="true"
                        />
                    </template>
                </ht-table>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import uc from '@/api/uc.js'
import org from '@/api/org.js'
import utils from '@/hotent-ui-util.js'

export default {
    components: {},
    computed: {},
    data() {
        return {
            selectOrgId: '',
            selectOrgName: '',
            orgList: [], //下拉框待选择的组织
            demList: [], //下拉框待选择的维度
            treeData: [], //树形菜单展示的数组
            orgCode: '',
            dimenList: [],
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            reFresh: true,
            data: [],
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            selectSelection: [],
        }
    },
    mounted() {
        this.$validator = this.$root.$validator
        //维度-组织数据
        this.getAllDemList()
    },
    methods: {
        rowClick(row, column, event) {
            this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
        },
        getAllDemList() {
            org.getDescAll()
                .then((resp) => {
                    for (let i = 0; i < resp.length; i++) {
                        this.orgList.push({
                            key: resp[i].id,
                            value: resp[i].demName,
                        })
                        this.demList.push({
                            key: resp[i].code,
                            value: resp[i].demName,
                        })
                        this.dimenList = resp
                        if (resp[i].isDefault === 1) {
                            this.selectOrgId = resp[i].id
                        }
                    }
                })
                .then((params) => {
                    var dem = {
                        demId: this.selectOrgId,
                    }
                    org.getByParentAndDemToTree(dem).then((data) => {
                        this.treeData = utils.tile2nest(data)
                    })
                })
        },
        demChange(data) {
            this.selectOrgId = data
            this.orgCode = ''
            this.loadTreeData()
        },
        orgTreeClick(orgbytree) {
            //重置数据
            let ary = this.$refs.htTable.querys
            for (var i = 0; i < ary.length; i++) {
                if (ary[i].group && ary[i].group == 'orgTree') {
                    ary.remove(ary[i])
                }
            }
            let quickSearchEl = document.querySelector('.quick-search input')
            if (quickSearchEl && !quickSearchEl.value) {
                this.$refs.htTable.querys = []
            }
            if (!orgbytree.code) {
                this.$refs.htTable.querys.push({
                    property: 'DEM_ID_',
                    value: orgbytree.demId,
                    group: 'orgTree',
                    relation: 'AND',
                    operation: 'EQUAL',
                })
            } else {
                this.orgCode = orgbytree.code
                let ids = []
                let trees = ''
                this.getOrgTrees(orgbytree, ids)
                trees = ids.join(',')
                if (trees != '') {
                    this.$refs.htTable.querys.push({
                        property: 'ORG_ID_',
                        value: trees,
                        group: 'orgTree',
                        relation: 'AND',
                        operation: 'IN',
                    })
                }
            }
            this.$refs.htTable.load()
        },
        getOrgTrees(node, ids) {
            ids.push(node.id)
            let arr = node.children
            if (arr) {
                for (var i = 0; i < arr.length; i++) {
                    this.getOrgTrees(arr[i], ids)
                }
            }
        },
        handleRefresh(cb) {
            this.loadTreeData(cb)
            //重置数据
            let ary = this.$refs.htTable.querys
            for (var i = 0; i < ary.length; i++) {
                if (ary[i].group && ary[i].group == 'orgTree') {
                    ary.remove(ary[i])
                }
            }
            this.$refs.htTable.load()
        },
        loadTreeData(cb) {
            var param = {
                demId: this.selectOrgId,
            }
            org.getByParentAndDemToTree(param).then((data) => {
                this.treeData = utils.tile2nest(data)
                cb && cb()
            })
        },
        loadData(param, cb) {
            uc.getOrgUserQuery(param)
                .then((response) => {
                    this.data = response.rows
                    this.pageResult = {
                        page: response.page,
                        pageSize: response.pageSize,
                        total: response.total,
                    }
                })
                .finally(() => cb())
        },
        selectRow(selection, row) {
            this.selectSelection = selection
        },
        handleLockout(actionType) {
            // actionType  lockUser 锁定 unLockUser 解锁
            if (this.selectSelection.length <= 0) {
                this.$message.warning('请选择用户！')
                return
            }
            let selectRow = this.selectSelection[0]
            if (selectRow.lockedStatus == 2 && actionType == 'lockUser') {
                this.$message.warning('该账号当前已是锁定状态！')
                return
            } else if (
                selectRow.lockedStatus == 1 &&
                actionType == 'unLockUser'
            ) {
                this.$message.warning('该账号当前已是解锁状态！')
                return
            } else {
                this.$confirm(`确定${actionType== 'lockUser'?'锁定':'解锁'}该用户, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        let account = selectRow.account
                        let userNumber = selectRow.userNumber
                        let param = {}
                        if (!account) {
                            // 没有account 才用userNumber
                            param.userNumber = userNumber
                        } else {
                            param.account = account
                        }
                        uc.accountLockout(param, actionType).then((res) => {
                            console.log(res)
                            this.$refs.htTable.load()
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: `已取消${actionType== 'lockUser'?'锁定':'解锁'}`,
                        })
                    })
            }
        },
    },
}
</script>
<style lang="scss" scoped>
div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
    border-color: #f56c6c;
}

>>> .el-tree .el-tree-node__label {
    font-size: 12px;
}
>>> .import_row {
    margin-bottom: 15px;
}
</style>
