<template>
    <div>
        <el-dialog
            title="选择人员"
            :visible.sync="dialogVisible"
            width="70%"
            appendToBody
            :close-on-click-modal="false"
            top="5vh"
            @close="closeDialog"
            v-if="dialogVisible"
        >
            <el-container>
                <el-main style="padding: 10px; height: 350px">
                    <form v-form>
                        <table
                            class="table table-bordered"
                            style="
                                border-spacing: 0;
                                width: 100%;
                                max-height: 400px;
                                overflow: initial;
                            "
                        >
                            <thead>
                                <th style="width: 60px">类型</th>
                                <th>内容</th>
                                <th style="width: 60px">操作</th>
                            </thead>
                            <tbody>
                                <tr
                                    v-for="(item, $index) in selectItems"
                                    :key="item.title"
                                    :data-index="$index"
                                    data-subname="selectItems"
                                >
                                    <th>{{ item.title }}</th>
                                    <td>
                                        <eip-user-selector
                                            v-if="item.type == 'user'"
                                            :appendToBody="true"
                                            v-model="item.name"
                                            :config="{account: 'item.codes'}"
                                        />
                                        <eip-role-selector
                                            v-if="item.type == 'role'"
                                            :appendToBody="true"
                                            v-model="item.name"
                                            :config="{code: 'item.codes'}"
                                        />
                                        <eip-post-selector
                                            v-if="item.type == 'pos'"
                                            :appendToBody="true"
                                            v-model="item.name"
                                            :config="{code: 'item.codes'}"
                                        />
                                        <eip-org-selector
                                            v-if="item.type == 'org'"
                                            :appendToBody="true"
                                            v-model="item.name"
                                            :config="{code: 'item.codes'}"
                                        />
                                    </td>
                                    <td>
                                        <el-button
                                            @click="updateSelectItems($index)"
                                            style="margin-left: 5px"
                                            >重置</el-button
                                        >
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </el-main>
            </el-container>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleClose" size="medium"
                    >确 定</el-button
                >
                <el-button @click="closeDialog" size="medium">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import utils from '@/hotent-ui-util.js'

const eipUserSelector = () =>
    import('@/components/selector/EipUserSelector.vue')
const eipRoleSelector = () =>
    import('@/components/selector/EipRoleSelector.vue')
const eipOrgSelector = () => import('@/components/selector/EipOrgSelector.vue')
const eipPostSelector = () =>
    import('@/components/selector/EipPostSelector.vue')

export default {
    components: {
        eipUserSelector,
        eipRoleSelector,
        eipOrgSelector,
        eipPostSelector,
    },
    props: {
        selectType: {
            type: Array,
            required: false,
            default: () => ['org', 'role', 'pos', 'user'],
        },
    },
    data() {
        return {
            dialogVisible: false,
            noNeedSetArr: [],
            selectItems: [],
            right: '',
            permissionList: [],
            curSelectItem: {},
            autoClose: true,
            showNeedRight: '',
        }
    },
    computed: {
        selectOptions: {
            set(newValue) {
                this.selectItems = newValue
            },
            get() {
                let temp = []
                this.selectType.forEach((item) => {
                    if (item == 'org') {
                        temp.push({
                            type: 'org',
                            title: '组织',
                            name: '',
                            codes: '',
                        })
                    } else if (item == 'role') {
                        temp.push({
                            type: 'role',
                            title: '角色',
                            name: '',
                            codes: '',
                        })
                    } else if (item == 'pos') {
                        temp.push({
                            type: 'pos',
                            title: '岗位',
                            name: '',
                            codes: '',
                        })
                    } else if (item == 'user') {
                        temp.push({
                            type: 'user',
                            title: '用户',
                            name: '',
                            codes: '',
                        })
                    }
                })
                return temp
            },
        },
    },
    mounted() {
        this.selectItems = this.selectOptions
    },
    methods: {
        showDialog(row) {
            this.dialogVisible = true
            if (row && row.json) {
                let rowData = JSON.parse(row.json)
                let temp = utils.deepClone(this.selectOptions);
                temp.forEach((options) => {
                    rowData.forEach((item) => {
                        if (options.type == item.type) {
                            options.codes = item.codes?item.codes:item.code
                            options.name = item.name
                        }
                    })
                })
                this.selectItems = temp
            }else{
                this.selectItems = utils.deepClone(this.selectOptions);
            }
        },
        closeDialog() {
            this.dialogVisible = false
            this.selectItems = utils.deepClone(this.selectOptions);
        },
        handleClose() {
            let jsonParams = []
            if (this.selectItems.length) {
                this.selectItems.forEach((item) => {
                    if (item.codes) {
                        jsonParams.push({
                            codes: item.codes,
                            name: item.name,
                            type: item.type,
                        })
                    }
                })
            }
            this.$emit('select', jsonParams)
            this.selectItems = utils.deepClone(this.selectOptions);
        },
        updateSelectItems(index) {
            this.selectItems[index].codes = ''
            this.selectItems[index].name = ''
        },
    },
}
</script>

<style  scoped>
div >>> .el-dialog__body {
    padding: 10px;
}

.table > thead > tr > th,
.table > thead > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 1px solid #e7eaec;
    border-left: 1px solid #e7eaec;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: middle;
}
.table {
    border-bottom: 1px solid #e7eaec;
    border-right: 1px solid #e7eaec;
}
.filed_body >>> .el-button {
    float: right;
}
</style>
