<template>
    <div>
        <!-- 抽屉框表单 -->
        <el-drawer
                :title="title"
                :visible.sync="open"
                :direction="direction"
                size="90%">
            <div>
                <div class="warning">系统检测以下人员（20人）识别频次过高：</div>
                <div class="drawer_box">
                    <div class="drawer_box_left">
                        <el-table
                            ref="singleTable"
                            :data="tableDataL"
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                label="序号"
                                width="50">
                            </el-table-column>
                            <el-table-column
                                property="name"
                                label="姓名"
                                width="80">
                            </el-table-column>
                            <el-table-column
                                property="contact"
                                label="联系电话">
                            </el-table-column>
                            <el-table-column
                                property="identifyNum"
                                label="识别频次"
                                width="80">
                            </el-table-column>
                            <el-table-column
                                property="lastIdentifyTime"
                                label="最近识别时间"
                                :formatter= "this.formatterDate">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="drawer_box_right">
                        <div class="recognition">
                            <div>
                                <div class="recognition_name">{{ singleSelect.name }}</div>
                                <div class="recognition_desc">联系电话：{{ singleSelect.contact }} | 身份证号：{{ singleSelect.idNumber }} | 识别频次：{{ singleSelect.identifyNum }}</div>
                            </div>
                            <div>
                                <el-button type="primary" @click="show= true">限制取号</el-button>
                            </div>
                        </div>
                        <el-table
                            :data="tableDataR"
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                label="序号"
                                width="50">
                            </el-table-column>
                            <el-table-column
                                property="monitorTime"
                                label="监测时间"
                                :formatter= "this.formatterDate">
                            </el-table-column>
                            <el-table-column
                                property="monitorDevice"
                                label="监测设备">
                            </el-table-column>
                            <el-table-column
                                property="reservationService"
                                label="预约业务">
                            </el-table-column>
                            <el-table-column
                                property="reservationNumber"
                                label="预约编号">
                            </el-table-column>
                            <el-table-column
                                property="checkInMethod"
                                label="签到方式">
                            </el-table-column>
                            <el-table-column
                                property="monitorCertificate"
                                label="监测凭证">
                                <template slot-scope="scope">
                                    <img :src="scope.row.monitorCertificate" alt="图片">
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            @size-change="changeSize"
                            @current-change="changePage"
                            :current-page="this.params.page"
                            :page-size="this.params.size"
                            layout="total, prev, pager, next"
                            :total="this.total">
                        </el-pagination>
                    </div>
                </div>
        </div>
        </el-drawer>
        <el-dialog title="限制取号" :visible.sync="show" width="31.25rem" append-to-body>
            <el-form ref="form" :model="restrict" :label-position="right" label-width="7.5rem">
                <el-form-item label="姓名：">{{ restrict.name }}</el-form-item>
                <el-form-item label="联系电话：">{{ restrict.contact }}</el-form-item>
                <el-form-item label="身份证号：">{{ restrict.idNumber }}</el-form-item>
                <el-form-item label="识别频次：">{{ restrict.identifyNum }}</el-form-item>
                <el-form-item label="限制取号：">
                    <el-input placeholder="请输入内容" v-model="restrict.times">
                        <template slot="append">次 / 天</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="show= false">确 定</el-button>
                <el-button @click="show= false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import table from "@/assets/mixins/table";
export default {
    name: "dataDrawerShow",
    components: {
    },
    mixins: [table],
    created() {

    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 弹出层标题
            title: "监测预警",
            // 是否显示弹出层
            open: false,
            // 限制取号
            show: false,
            direction:"rtl",
            // 左侧表格数据
            tableDataL:[],
            // 左侧被选中的数据
            singleSelect: {},
            // 右侧表格数据
            tableDataR: [],
            params: {
                size: 10,
                page: 1
            },
            total: 0,
            restrict:{
                name: '',
                contact: '',
                idNumber: '',
                identifyNum: '',
                times: ''
            }
        }
    },

    methods: {
        view(row) {
            this.open=true
            this.getAllMonitor()
        },
        async getAllMonitor(){
            const res = await this.$post('monitor/alarm/list')
            if(res && res.code == 1){
                this.tableDataL= res.data.data
                console.log(res)
                this.total= res.data.total
                this.params.page= res.data.current_page
                this.params.size= res.data.per_page
                this.$refs.singleTable.setCurrentRow(this.tableDataL[0]) // 默认选中第一条
            }
        },
        async handleCurrentChange(row){
            this.singleSelect= row
            this.restrict= {...row}
            const res = await this.$post('monitor/alarm/record/list')
            if(res && res.code == 1){
                this.tableDataR= res.data.data
            }
        },
        // 监听size改变
        changeSize (newSize) {
            this.size = newSize
        },
        // 页码改变
        changePage (newPage) {
            this.page = newPage
        },
    },
};
</script>
<style scope>
.warning{
    padding: 0 .625rem;
    height: 1.875rem;
    line-height: 1.875rem;
    font-size: 1.25rem;
    color: #F94545;
}
.drawer_box{
    display: flex;
}
.drawer_box_left{
    width: 37.5rem;
    padding: .625rem;
}
.drawer_box_right{
    flex: 1;
    padding: .625rem;
}
.recognition{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .625rem;
}
.recognition_name{
    font-size: 1.25rem;
    color: #333;
    margin-bottom: .3125rem;
}
.recognition_desc{
    font-size: .875rem;
    color: #666;
}
</style>