<template>
    <div class="fullheight" style="background-color:#fff">
        <ht-table
            @load="loadData"
            :data="data"
            :pageResult="pageResult"
            :selection="true"
            quick-search-props="name,code"
            :show-export="false"
            :show-custom-column="false"
            ref="htTable"
            @row-click="rowClick"
        >
            <template v-slot:toolbar>
               
                    <el-button
                        size="small"
                        @click="showDialog()"
                        icon="el-icon-plus"
                        type="primary"
                        >添加</el-button
                    >
                    <ht-delete-button
                        url="${uc}/uc/Machine/v1/"
                        :htTable="$refs.htTable"
                        >删除</ht-delete-button
                    >
                
            </template>
            <template>
                <ht-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号"
                />
                <!-- <ht-table-column
                    prop="tenantId"
                    label="租户Id"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                >
                </ht-table-column> -->

                <ht-table-column
                    prop="name"
                    label="设备名称"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{row}">
                        <el-link
                            type="primary"
                            @click="showDialog(row.id)"
                            title="查看详情"
                            >{{ row.name }}</el-link
                        >
                    </template>
                </ht-table-column>
                <ht-table-column
                    prop="code"
                    label="设备编码"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                >
                </ht-table-column>
                <!-- （参考系统字典） -->
                <ht-table-column
                    prop="securityGrade"
                    label="密级"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                    :filters="filtersOptions"
                >
                    <template v-slot="{row}">
                        <el-tag
                            type="info"
                            v-if="row.securityGrade == 'NON_SECRET'"
                            >非密</el-tag
                        >
                        <el-tag
                            type="success"
                            v-if="row.securityGrade == 'INTERIOR'"
                            >内部</el-tag
                        >
                        <el-tag v-if="row.securityGrade == 'SECRET'"
                            >秘密</el-tag
                        >
                        <el-tag
                            type="warning"
                            v-if="row.securityGrade == 'CONFIDENTIALITY'"
                            >机密</el-tag
                        >
                        <el-tag
                            type="danger"
                            v-if="row.securityGrade == 'TOP_SECRET'"
                            >绝密</el-tag
                        >
                    </template>
                </ht-table-column>
                <ht-table-column
                    prop="ip"
                    label="IP地址"
                    :show-overflow-tooltip="true"
                >
                </ht-table-column>
                <ht-table-column
                    prop="memo"
                    label="备注"
                    :show-overflow-tooltip="true"
                >
                </ht-table-column>
                <ht-table-column label="操作">
                    <template v-slot="{row}">
                        <el-button
                            size="mini"
                            icon="el-icon-user"
                            @click="reletePerson(row)"
                        >
                            关联人员
                        </el-button>
                    </template>
                </ht-table-column>
            </template>
        </ht-table>
        <ht-sidebar-dialog
            width="32%"
            title="安全中心--设备管理"
            class="sp-manager__dialog"
            :visible="dialogVisible"
            :before-close="beforeCloseDialog"
        >
            <el-form v-form data-vv-scope="SecurityMachineForm">
                <ht-form-item label="设备名称">
                    <ht-input
                        v-model="SecurityMachine.name"
                        validate="required"
                    />
                </ht-form-item>
                <ht-form-item label="设备编码">
                    <ht-input
                        v-pinyin="SecurityMachine.name"
                        v-model="SecurityMachine.code"
                        validate="required"
                    />
                </ht-form-item>
                <ht-form-item label="IP地址">
                    <ht-input
                        v-model="SecurityMachine.ip"
                        :validate="{
                            required: true,
                            regex: {exp: ipReg, message: '请输入有效的IP地址'},
                        }"
                    />
                </ht-form-item>
                <ht-form-item label="密级">
                    <dict-select
                        dictCode="mj"
                        :hasDefaultOption="true"
                        clearable
                        v-model="SecurityMachine.securityGrade"
                    ></dict-select>
                </ht-form-item>
                <ht-form-item label="备注">
                    <ht-input
                        type="textarea"
                        :cols="40"
                        :autosize="{minRows: 2, maxRows: 4}"
                        v-model="SecurityMachine.memo"
                    />
                </ht-form-item>
            </el-form>
            <div slot="footer" style="text-align: center">
                <ht-submit-button
                    url="${uc}/uc/Machine/v1/saveMachine"
                    :model="SecurityMachine"
                    :request-method="saveMethod"
                    scope-name="SecurityMachineForm"
                    @after-save-data="afterSaveData"
                    >{{ $t('eip.common.save') }}</ht-submit-button
                >
                <el-button @click="beforeCloseDialog">{{
                    $t('eip.common.cancel')
                }}</el-button>
            </div>
        </ht-sidebar-dialog>
        <device-person append-to-body ref="devicePerson"></device-person>
    </div>
</template>
<script>
const DevicePerson = () => import('./DevicePerson.vue')
export default {
    components: {
        DevicePerson,
    },
    data() {
        return {
            dialogVisible: false,
            relationDialogVisible: false,
            data: [],
            userData: [], // 关联人员表
            options: [
                {key: undefined, value: '请选择'},
                {key: 'NON_SECRET', value: '非密'},
                {key: 'INTERIOR', value: '内部'},
                {key: 'SECRET', value: '秘密'},
                {key: 'CONFIDENTIALITY', value: '机密'},
                {key: 'TOP_SECRET', value: '绝密'},
            ],
            filtersOptions: [
                {value: 'NON_SECRET', text: '非密'},
                {value: 'INTERIOR', text: '内部'},
                {value: 'SECRET', text: '秘密'},
                {value: 'CONFIDENTIALITY', text: '机密'},
                {value: 'TOP_SECRET', text: '绝密'},
            ],
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            SecurityMachine: {
                name: '',
                code: '',
                ip: '',
                securityGrade: '',
                memo: '',
            },
            saveMethod: 'POST',
            ipReg:
                '^((25[0-5]|2[0-4]\\d|[1]{1}\\d{1}\\d{1}|[1-9]{1}\\d{1}|\\d{1})($|(?!\\.$)\\.)){4}$',
        }
    },
    mounted() {
        this.$validator = this.$root.$validator
    },
    methods: {
        rowClick(row, column, event) {
            this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
        },
        showDialog(id) {
            if (id) {
                this.saveMethod = 'POST'
                this.$http.get('${uc}/uc/Machine/v1/' + id).then(
                    (resp) => {
                        this.SecurityMachine = resp.data
                        this.dialogVisible = true
                    },
                    (error) => {
                        reject(error)
                    }
                )
            } else {
                this.saveMethod = 'POST'
                this.dialogVisible = true
            }
        },
        beforeCloseDialog() {
            this.SecurityMachine = {}
            this.dialogVisible = false
        },
        beforeCloseRelationDialog() {
            this.SecurityMachine = {}
            this.relationDialogVisible = false
        },
        loadData(param, cb) {
            this.$http
                .post('${uc}/uc/Machine/v1/query', param)
                .then(
                    (resp) => {
                        let response = resp.data
                        this.data = response.rows
                        this.pageResult = {
                            page: response.page,
                            pageSize: response.pageSize,
                            total: response.total,
                        }
                    },
                    (error) => {
                        reject(error)
                    }
                )
                .finally(() => cb())
        },
        afterSaveData() {
            setTimeout(() => {
                this.beforeCloseDialog()
                this.$refs.htTable.load()
            }, 500)
        },
        reletePerson(row) {
            this.$refs.devicePerson.showDialog(row.id)
        },
    },
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
    height: calc(100% - 170px);
}
</style>
