<template>
  <div
    :class="['scroll', isFullScreen ? 'full container' : 'container']"
    :style="{ backgroundImage: `url(${bg})` }"
  >
    <div class="logo-area">
      <img class="logo" :src="logo" alt="加载失败" @dblclick="fullScreen">
    </div>
    <audio
      v-if="alarm"
      id="audio"
      src="../../../../public/alarm.mp3"
      autoplay
      loop="loop"
    />
    <!-- 预警弹框-->
    <el-dialog
      v-if="$store.getters.isControlEarlyWarning == 1 && checkRole([5])"
      title="预警信息"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <vue-seamless-scroll
        v-if="warning_list.length > 1 && warning_list"
        :data="warning_list"
        :class-option="defaultOption"
      >
        <!-- <dialogList :warningList="warning_list" @clickList="clickList"/> -->
        <div v-for="(item, index) in warning_list" :key="index">
          <el-descriptions title="" :column="2" border>
            <el-descriptions-item label="设备名称">{{
              item.snName
            }}</el-descriptions-item>
            <el-descriptions-item label="过闸时间">{{
              item.faceTime
            }}</el-descriptions-item>
            <el-descriptions-item label="预警人员姓名">{{
              item.name
            }}</el-descriptions-item>
            <el-descriptions-item label="预警人员证件号">{{
              item.idNumber
            }}</el-descriptions-item>
            <el-descriptions-item label="预警人员现场照片">
              <el-image
                style="width: 100px; height: 100px"
                :src="item.photo"
                :preview-src-list="[item.photo]"
              />
            </el-descriptions-item>
            <el-descriptions-item label="布控人员姓名">
              {{ item.controlName }}
            </el-descriptions-item>
            <el-descriptions-item label="布控人员手机号">
              {{ item.controlPhone }}
            </el-descriptions-item>
            <el-descriptions-item label="布控人员单位">
              {{ item.controlUnit }}
            </el-descriptions-item>
          </el-descriptions>
          <el-button
            class="sure"
            type="primary"
            @click="warningSure(item.id)"
          >确 定</el-button>
        </div>
      </vue-seamless-scroll>
      <div v-for="(item, index) in warning_list" v-else :key="index">
        <el-descriptions title="" :column="2" border>
          <el-descriptions-item label="设备名称">{{
            item.snName
          }}</el-descriptions-item>
          <el-descriptions-item label="过闸时间">{{
            item.faceTime
          }}</el-descriptions-item>
          <el-descriptions-item label="预警人员姓名">{{
            item.name
          }}</el-descriptions-item>
          <el-descriptions-item label="预警人员证件号">{{
            item.idNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="预警人员现场照片">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.photo"
              :preview-src-list="[item.photo]"
            />
          </el-descriptions-item>
          <el-descriptions-item label="布控人员姓名">
            {{ item.controlName }}
          </el-descriptions-item>
          <el-descriptions-item label="布控人员手机号">
            {{ item.controlPhone }}
          </el-descriptions-item>
          <el-descriptions-item label="布控人员单位">
            {{ item.controlUnit }}
          </el-descriptions-item>
        </el-descriptions>
        <el-button
          class="sure"
          type="primary"
          @click="warningSure(item.id)"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!--上层-->
    <div class="area-top">
      <!--标题-->
      <div class="top">
        <img class="icon" src="@/icons/index/icon.png" alt="">
        <p class="title">终端分布情况</p>
        <img class="line margin-left" src="@/icons/index/line.png" alt="">
        <img class="underLine" src="@/icons/index/underLine.png" alt="">
      </div>
      <!--设备数-->
      <div class="machine">
        <div class="mc-item">
          <img class="zj" src="@/icons/index/zj.png" alt="">
        </div>
        <div class="mc-item">
          <p class="dp-text">{{ pass_msg.totalNum | matchNull }}</p>
          <p class="dp-title-text">闸机通行总人数</p>
          <img class="dp" src="@/icons/index/dp.png" alt="">
        </div>
        <div class="mc-item">
          <p class="dp2-text">{{ machine_msg.deviceAllNum | matchNull }}</p>
          <p class="dp2-title-text">设备总数</p>
          <img class="dp2" src="@/icons/index/dp2.png" alt="">
        </div>
        <div class="mc-item">
          <p class="dp2-text text-blue">
            {{ machine_msg.deviceOnlineNum | matchNull }}
          </p>
          <p class="dp2-title-text">在线设备数</p>
          <img class="dp2" src="@/icons/index/dp2.png" alt="">
        </div>
        <div class="mc-item">
          <p class="dp2-text text-blue-m">
            {{ machine_msg.deviceOfflineNum | matchNull }}
          </p>
          <p class="dp2-title-text">离线设备总数</p>
          <img class="dp2" src="@/icons/index/dp2.png" alt="">
        </div>
      </div>
    </div>
    <!--下层-->
    <div class="area-bottom">
      <div :style="{flex: openInOutStatistics ? 'none' : 'auto', width: openInOutStatistics ? '500px' : 'auto', marginRight: openInOutStatistics ? '50px' : '0'}">
        <!--标题-->
        <div class="top">
          <img class="icon" src="@/icons/index/icon.png" alt="">
          <p class="title">今日通行情况</p>
          <img class="line margin-left" src="@/icons/index/line.png" alt="">
          <img class="underLine" src="@/icons/index/underLine.png" alt="">
        </div>
        <!--记录-->
        <div class="records" style="margin-top: 65px;">
          <!--记录数1-->
          <div class="record">
            <div class="mc-item">
              <p class="dp-text">{{ pass_msg.todayNum | matchNull }}</p>
              <p class="dp-title-text">今日通行总人数</p>
              <img class="dp" src="@/icons/index/dp.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div v-if="openInOutStatistics" style="flex:auto;">
        <!--标题-->
        <div class="top">
          <img class="icon" src="@/icons/index/icon.png" alt="">
          <p class="title">进出人员数据</p>
          <img class="line margin-left" src="@/icons/index/line.png" alt="">
          <img class="underLine" src="@/icons/index/underLine.png" alt="">
        </div>
        <div class="record-pro">
          <el-dropdown @command="inoutHandleCommand">
            <span class="el-dropdown-link" style="color:#fff;font-size: 18px;font-weight: 400;">
              {{ inoutDateTypes[inoutDateTypeIndex] }}<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in inoutDateTypes" :key="index" :command="index">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <template v-if="inoutDateTypeIndex === 1">
            <el-date-picker
              v-model="inoutDateRange"
              type="daterange"
              style="margin-left: 50px;width:270px;background-color:transparent;border-color: #51799B;"
              align="right"
              unlink-panels
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="false"
              :editable="false"
            />
            <el-button type="primary" style="margin-left: 20px;" @click="inoutSearch">搜索</el-button>
          </template>
        </div>
        <!--记录-->
        <div class="records" style="justify-content: flex-start;align-items: flex-start;margin-top: 40px;">
          <!--记录数1-->
          <div class="record-inout">
            <div class="record-inout-prompt">进入人员数</div>
            <div class="record-inout-number">{{ inoutInfo.inNum | matchNull }}</div>
            <img src="@/icons/index/dp4.png">
          </div>
          <div class="record-inout">
            <div class="record-inout-prompt">出去人员数</div>
            <div class="record-inout-number">{{ inoutInfo.outNum | matchNull }}</div>
            <img src="@/icons/index/dp4.png">
          </div>
          <div class="record-inout">
            <div class="record-inout-prompt">滞留人员数</div>
            <div class="record-inout-number" style="color: #99B8F3;">{{ inoutInfo.stayNum | matchNull }}</div>
            <img src="@/icons/index/dp3.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPicture } from '@/api/user'
import { getAdminData, getDeviceNumber, getInOutData } from '@/api/ordinary_user'
import screenfull from 'screenfull'
import { earlyWarningConfirm, getListLog } from '@/api/monitor_management'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { checkRole } from '@/utils/checkRole'

export default {
  name: 'ScreenOrdinary',
  components: {
    vueSeamlessScroll
  },
  filters: {
    matchNull(val) {
      if (val === '' || val === undefined) {
        return '***'
      } else {
        return val
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      warning_list: [],
      // 背景图片
      bg: require('@/icons/index/bg1.jpg'),
      // 设备数量信息
      machine_msg: {},
      // 通行信息
      pass_msg: {},
      // 定时
      interval: null,
      // 是否全屏
      isFullScreen: false,
      alarm: false, // 布控声音
      logo: '',
      inoutDateTypeIndex: 0,
      inoutDateTypes: ['今日数据', '数据检索'],
      inoutDateRange: [new Date(), new Date()],
      inoutInfo: {
        inNum: 0, // 进门人数
        outNum: 0, // 出门人数
        stayNum: 0 // 滞留人数
      }
    }
  },
  computed: {
    ...mapGetters(['openInOutStatistics']),
    defaultOption() {
      return {
        step: this.warning_list.length > 1 ? 1 : 0, // 数值越大速度滚动越快
        limitMoveNum: this.warning_list.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
    this.fetchData()
    this.getWarningList()
    this.getPicture()
    var interval = this.$store.getters.interval
    if (interval) {
      clearInterval(interval)
    }
    interval = setInterval(() => {
      this.fetchData()
      this.getWarningList()
    }, 5 * 1000)
    this.$store.commit('user/SET_INTERVAL', interval)
  },
  beforeDestroy() {
    var interval = this.$store.getters.interval
    if (interval) {
      clearInterval(interval)
    }
  },
  methods: {
    checkRole,
    fetchData() {
      getDeviceNumber().then((res) => {
        this.machine_msg = res.data
      })
      getAdminData().then((res) => {
        this.pass_msg = res.data
      })
      if (this.openInOutStatistics) {
        this.inoutSearch()
      }
    },
    getWarningList() {
      getListLog().then((res) => {
        this.warning_list = res.data
        if (this.warning_list.length <= 0) {
          this.dialogVisible = false
          this.alarm = false
        } else {
          this.dialogVisible = true
          this.alarm = true
        }
      })
    },
    // 预警确认
    warningSure(id) {
      earlyWarningConfirm(id).then((res) => {
        this.getWarningList()
        if (this.warning_list.length <= 0) {
          this.dialogVisible = false
        }
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    // 全屏
    fullScreen() {
      this.isFullScreen = !this.isFullScreen
      screenfull.toggle()
    },
    // 获取背景
    getPicture() {
      getPicture().then((res) => {
        this.logo = res.data.logo
        // console.log(res.data.title);
        document.title = res.data.title
      })
    },
    inoutHandleCommand(command) {
      if (this.inoutDateTypeIndex !== command) {
        this.inoutDateTypeIndex = command
        if (command === 0) {
          // 今日搜索
          this.inoutDateRange = [new Date(), new Date()]
          this.inoutSearch()
        }
      }
    },
    inoutSearch() {
      let startDate = this.inoutDateRange[0] || new Date()
      let endDate = this.inoutDateRange[1] || new Date()
      startDate = this.formatDate(startDate)
      endDate = this.formatDate(endDate)
      // console.info('inoutDateRange-->1', startDate)
      // console.info('inoutDateRange-->2', endDate)
      getInOutData({ startDate, endDate }).then((res) => {
        // console.info('--->', res.data)
        this.inoutInfo = res.data
      })
    },
    formatDate(date) {
      var s1 =
        date.getFullYear() +
        '-' +
        (date.getMonth() + 1) +
        '-' +
        date.getDate() +
        ' 00:00:00'
        // date.getHours() +
        // ':' +
        // date.getMinutes() +
        // ':' +
        // date.getSeconds()
      return s1
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog .el-dialog__body {
  overflow: hidden;
  /* margin-top: 20px; */
  max-height: 400px;
}
.sure {
  display: block;
  margin: 10px auto 50px;
}

p {
  margin: 0 !important;
  padding: 0 !important;
}
.container {
  position: relative;
  width: 100%;
  min-width: 1400px;
  height: calc(100vh - 50px);
  min-height: 1080px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0px 50px 50px 50px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  overflow: auto !important;
}
.full {
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh !important;
}
/*上层*/
.area-top {
  flex: 1;
}
.top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  /*border: 1px solid red;*/
}
/*标题*/
.icon {
  width: 26px;
  height: 26px;
}
.title {
  background: linear-gradient(180deg, #abceff 19.35%, #6ea2ff 74.19%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 22px;
  font-weight: 700;
}
.line {
  width: 180px;
  height: 2px;
}
.underLine {
  width: 374px;
  height: 20px;
  position: absolute;
  margin-top: 25px;
  margin-left: -20px;
}
/*设备*/
.machine {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 0 50px 0;
  flex: 2;
}
.mc-item {
  position: relative;
  height: 200px;
  display: flex;
  align-items: flex-end;
}
.mc-item .zj {
  width: 140px;
  height: 120px;
}
.mc-item .dp {
  width: 337px;
  height: 144px;
}
.dp-title-text {
  position: absolute;
  font-size: 19px;
  font-weight: 400;
  color: white;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}
.dp-text {
  position: absolute;
  font-size: 50px;
  font-weight: 700;
  color: white;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
}
.mc-item .dp2 {
  width: 131px;
  height: 75px;
}
.dp2-title-text {
  position: absolute;
  font-size: 20px;
  font-weight: 400;
  width: 100%;
  text-align: center;
  color: white;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.dp2-text {
  position: absolute;
  font-size: 60px;
  font-weight: 700;
  color: white;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
}
.text-blue {
  color: #6095ff;
}
.text-blue-m {
  color: #246dff;
}
.margin-left {
  margin-left: 15px;
}
/*下层*/
.area-bottom {
  flex: 2;
  display: flex;
}

.record-pro {
  margin-top: 46px;
}
::v-deep .record-pro input {
  background-color: transparent;
  color: #fff;
}
::v-deep .el-range-separator {
  color: #51799B;
}

/*记录*/
.records {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.record-inout {
  width: 232px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-left: 70px;
}
.record-inout:first-of-type {
  margin-left: 0;
}
.record-inout > img {
  position: absolute;
  width: 232px;
  height: 160px;
  left: 0;
  top: 0;
}
.record-inout .record-inout-prompt {
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  color: #E8FFF9;
  margin-top: 16px;
}
.record-inout .record-inout-number {
  font-weight: 400;
  font-size: 48px;
  text-align: center;
  color: #32E5AF;
  margin-top: 36px;
}
/*记录数1*/
.record {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: top;
}
.record-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 100%;
}
.card {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.card > img {
  width: 202px;
  height: 131px;
}
.card .sub-title {
  position: absolute;
  font-size: 16px;
  font-weight: 400;
  color: white;
  transform: translateY(-43px);
}
.card .sub-number {
  position: absolute;
  font-size: 45px;
  font-weight: 700;
  color: white;
  transform: translateY(15px);
}
/*logo*/
.logo-area {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.logo {
  margin-top: 20px;
  position: relative;
  /* width: 100px; */
  height: 70px;
}
.scroll {
  background-size: 100% 100%;
}
</style>
