<template>
  <div>
    <!-- 抽屉框表单 -->
    <el-drawer
      :title="title"
      :visible.sync="open"
      :direction="direction"
      size="95%"
    >
      <div style="height: 100%;">
        <div class="warning">
          <i class="el-icon-s-opportunity"></i>
          系统检测以下人员（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%"
              border
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="name"
                label="姓名"
                width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="contact"
                label="联系电话"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="identifyNum"
                label="识别频次"
                width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="lastIdentifyTime"
                label="最近识别时间"
                :formatter="this.formatterDate"
                align="center"
              >
              </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 }} <br />
                  身份证号：{{ singleSelect.idNumber }}<br />
                  识别频次：{{ singleSelect.identifyNum }}
                </div>
              </div>
              <div>
                <el-button
                  type="primary"
                  @click="show = true"
                  style="width: 120px;height: 48px;line-height: 24px;font-size: 16px; font-weight: 600;"
                  >限制取号</el-button
                >
              </div>
            </div>
            <el-table :data="tableDataR" style="width: 100%" border>
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="monitorTime"
                label="监测时间"
                :formatter="this.formatterDate"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="monitorDevice"
                label="监测设备"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="reservationService"
                label="预约业务"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="reservationNumber"
                label="预约编号"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="checkInMethod"
                label="签到方式"
                align="center"
              >
              </el-table-column>
              <el-table-column
                property="monitorCertificate"
                label="监测凭证"
                align="center"
              >
                <template slot-scope="scope">
                  <img
                    style="width: 70px; height: 100px"
                    :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"
              style="text-align: end;"
            >
            </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 0.625rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.25rem;
  color: #f94545;
  padding-left: 20px;
  background: rgba(249, 69, 69, 0.1);
}
.drawer_box {
  display: flex;
  height: 100%;
  padding: 20px 10px;
}
.drawer_box_left {
  height: 100%;
  width: 37.5rem;
  padding: 0.625rem;
  border-right: 1px solid #f0f0f0;
}
.drawer_box_right {
  flex: 1;
  padding: 0.625rem;
}
.recognition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}
.recognition_name {
  font-size: 1.25rem;
  color: #000;
  font-weight: 600;
  margin-bottom: 0.3125rem;
}
.recognition_desc {
  font-size: 0.875rem;
  color: #666;
}
</style>
