<template>
  <div
    id="fullDom"
    :class="['scroll', isFullScreen ? 'full container' : 'container']"
    :style="{ backgroundImage: `url(${bg})` }"
  >
    <div class="logo-area">
      <!--人员通行情况 搜索-->
      <div class="logo-area_search">
        <div class="title_item">
          <img src="@/assets/new_index/title_icon.png">
          <span>人员通行情况</span>
        </div>
        <img src="@/assets/new_index/title_right_bg.png" style="width: 180px;height: 2px;margin-left: 10px;">
        <div>
          <el-select
            v-model="searchTime"
            :popper-append-to-body="false"
            popper-class="screen-select"
            placeholder="请选择"
            style="width: 140px"
            @change="fetchData"
          >
            <el-option
              v-for="item in dateList"
              :key="item.date"
              :label="item.name"
              :value="item.date"
            />
          </el-select>
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          content="可查看近七天内单天的通行数据"
          placement="right"
        >
          <img src="@/assets/new_index/info_icon.png" style="width: 17px;height: 17px" @mouseover="showTooltip">
        </el-tooltip>
      </div>
      <img class="logo" :src="logo" alt="加载失败" @dblclick="fullScreen">
    </div>
    <div class="screen_content">
      <div class="content-left">
        <div class="content-left_item first_item">
          <!--人员通行情况-->
          <div class="transit">
            <div class="transit_item">
              <span class="count">{{ passInfo.atNum }}</span>
              <span class="title">在场人数</span>
            </div>
            <div class="transit_item">
              <span class="count">{{ passInfo.allNum }}</span>
              <span class="title">进出人次</span>
            </div>
            <div class="transit_item">
              <span class="count">{{ passInfo.inNum }}</span>
              <span class="title">进场人数</span>
            </div>
          </div>
          <!--人员年龄分布情况-->
          <div class="age_distribution">
            <div class="title_item">人员年龄分布情况</div>
            <BarEcharts :key="`${chartId}_bar`" :age-info="ageInfo" :chart-id="`${chartId}_bar`" />
          </div>
          <!--人员性别分布情况-->
          <div class="gender_distribution">
            <div class="title_item">人员性别分布情况</div>
            <PieEcharts :key="`${chartId}_pie`" :sex-info="sexInfo" :chart-id="`${chartId}_pie`" />
          </div>
        </div>
        <!--各时段在场人数情况-->
        <div class="content-left_item" style="margin-top: 20px">
          <div class="title_item">各时段在场人数情况</div>
          <div class="card_content" style="width:100%;height: 300px;justify-content: center;">
            <LineEcharts v-if="presentInfo.timeList.length > 0" :key="`${chartId}_line`" :present-info="presentInfo" :chart-id="`${chartId}_line`" />
            <span v-else style="font-size: 16px;color: rgba(209, 228, 255, 1);">暂无数据</span>
          </div>
        </div>
        <!--人员来源地分布情况-->
        <div class="content-left_item" style="margin-top: 20px">
          <div class="title_item">人员来源地分布情况</div>
          <div v-if="originList.length>0" class="card_content">
            <div v-for="(item, index) in originList" :key="index" class="card_content_item">
              <span>{{ item.provinceName }}</span>
              <span>{{ item.statNum }}</span>
            </div>
          </div>
          <div v-else class="card_content" style="width:100%;height: 100px;justify-content: center;">
            <span style="font-size: 16px;color: rgba(209, 228, 255, 1);">暂无数据</span>
          </div>
        </div>
      </div>
      <!--终端分布情况-->
      <div class="content-right">
        <div class="title_item">
          <img src="@/assets/new_index/title_icon.png">
          <span>终端分布情况</span>
        </div>
        <div class="content-right_content">
          <div class="content-right_content_item">
            <span class="count">{{ deviceInfo.deviceAllNum }}</span>
            <span class="title">设备总数</span>
          </div>
          <div class="content-right_content_item">
            <span class="count">{{ deviceInfo.deviceOnlineNum }}</span>
            <span class="title">在线设备数</span>
          </div>
          <div class="content-right_content_item">
            <span class="count">{{ deviceInfo.deviceOfflineNum }}</span>
            <span class="title">离线设备数</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPersonnelAccess, getAgeDistribution, getSexDistribution, getPeoplePresentStatistics, getPersonnelOriginPlaceStatistics } from '@/api/screen_statistics'
import screenfull from 'screenfull'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { checkRole } from '@/utils/checkRole'
import PieEcharts from './components/PieEcharts'
import BarEcharts from './components/BarEcharts'
import LineEcharts from './components/LineEcharts'
import { parseTime } from '@/utils'
import { getPicture } from '@/api/user'
import { getDeviceNumber } from '@/api/ordinary_user'
import { buildUUID } from '@/utils/uuid'

export default {
  name: 'ScreenOrdinary',
  components: {
    vueSeamlessScroll,
    PieEcharts,
    BarEcharts,
    LineEcharts
  },
  filters: {
    matchNull(val) {
      if (val === '' || val === undefined) {
        return '***'
      } else {
        return val
      }
    }
  },
  data() {
    return {
      logo: '',
      // 背景图片
      bg: require('@/assets/new_index/bg.png'),
      // 是否全屏
      isFullScreen: false,
      searchTime: '',
      dateList: [],

      chartId: null,
      // 人员通行情况
      passInfo: {
        allNum: 0, // 进出人次
        atNum: 0, //	在场人数（不是当前返回0）
        inNum: 0	// 进场人数
      },
      // 人员年龄分布情况
      ageInfo: {
        age20: 0,	// 20以下
        age35: 0,	// 20-35
        age50: 0,	// 36-50
        age65: 0, //	51-65
        ageOther: 0//	65以上
      },
      // 人员性别分布情况
      sexInfo: {
        female: 0, //	女
        male: 0 //	男
      },
      // 设备数量信息
      deviceInfo: {
        deviceAllNum: 0, //	设备总数
        deviceOfflineNum: 0, // 离线设备数
        deviceOnlineNum: 0 //	在线设备数
      },
      // 人员来源地分布情况
      originList: [],
      presentInfo: {
        numList: [],
        timeList: []
      }
    }
  },
  created() {
    this.$nextTick(async() => {
      screenfull.on('change', this.change)
      this.getPicture()
      await this.dataInit()
      this.getDeviceData().then(res => {
        Object.keys(this.deviceInfo).forEach(dI => {
          this.deviceInfo[dI] = res[dI] || 0
        })
      })
      this.fetchData(this.searchTime)
      var interval = this.$store.getters.interval
      if (interval) {
        clearInterval(interval)
      }
      interval = setInterval(async() => {
        await this.dataInit()
        this.getDeviceData().then(res => {
          Object.keys(this.deviceInfo).forEach(dI => {
            this.deviceInfo[dI] = res[dI] || 0
          })
        })
        this.fetchData(this.searchTime)
      }, 5 * 1000)
      this.$store.commit('user/SET_INTERVAL', interval)
    })
  },
  beforeDestroy() {
    screenfull.off('change', this.change)
    var interval = this.$store.getters.interval
    if (interval) {
      clearInterval(interval)
    }
  },
  methods: {
    checkRole,
    async fetchData(e) {
      const personalAxios = await this.getPersonnelAccessData()
      const ageAxios = await this.getAgeDistributionData()
      const sexAxios = await this.getSexDistributionData()
      const presentAxios = await this.getPeoplePresentStatisticsData()
      const originPlaceAxios = await this.getPersonnelOriginPlaceStatisticsData()
      Promise.all([personalAxios, ageAxios, sexAxios, presentAxios, originPlaceAxios]).then(res => {
        const personalAxiosRes = res[0]
        Object.keys(this.passInfo).forEach(dI => {
          this.passInfo[dI] = personalAxiosRes[dI] || 0
        })
        const ageAxiosRes = res[1]
        Object.keys(this.ageInfo).forEach(dI => {
          this.ageInfo[dI] = ageAxiosRes[dI] || 0
        })
        const sexAxiosRes = res[2]
        Object.keys(this.sexInfo).forEach(dI => {
          this.sexInfo[dI] = sexAxiosRes[dI] || 0
        })
        const presentAxiosRes = res[3]
        this.presentInfo = presentAxiosRes
        const originPlaceAxiosRes = res[4]
        this.originList = originPlaceAxiosRes || []
        this.chartId = buildUUID()
      })
    },
    /**
     * 人员通行情况
     */
    getPersonnelAccessData() {
      return new Promise((resolve, reject) => {
        getPersonnelAccess({
          statDate: this.searchTime
        }).then((result) => {
          resolve(result.data || {})
        }).catch(error => {
          reject(error)
        })
      })
    },
    /**
     * 人员年龄分布情况
     */
    getAgeDistributionData() {
      return new Promise((resolve, reject) => {
        getAgeDistribution({
          statDate: this.searchTime
        }).then((result) => {
          resolve(result.data || {})
        }).catch(error => {
          reject(error)
        })
      })
    },
    /**
     * 人员年龄分布情况
     */
    getSexDistributionData() {
      return new Promise((resolve, reject) => {
        getSexDistribution({
          statDate: this.searchTime
        }).then((result) => {
          resolve(result.data || {})
        }).catch(error => {
          reject(error)
        })
      })
    },
    /**
     * 各时段在场人数情况
     */
    getPeoplePresentStatisticsData() {
      return new Promise((resolve, reject) => {
        getPeoplePresentStatistics({
          statDate: this.searchTime
        }).then((result) => {
          resolve(result.data || {})
        }).catch(error => {
          reject(error)
        })
      })
    },
    /**
     * 人员来源地分布情况
     */
    getPersonnelOriginPlaceStatisticsData() {
      return new Promise((resolve, reject) => {
        getPersonnelOriginPlaceStatistics({
          statDate: this.searchTime
        }).then((result) => {
          resolve(result.data || {})
        }).catch(error => {
          reject(error)
        })
      })
    },
    /**
     * 终端分布情况
     */
    getDeviceData() {
      return new Promise((resolve, reject) => {
        getDeviceNumber().then((result) => {
          resolve(result.data || {})
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 获取背景
    getPicture() {
      getPicture().then((res) => {
        this.logo = res.data.logo
        document.title = res.data.title
      })
    },
    dataInit() {
      const dateArr = []
      Array.from({ length: 7 }, (v, i) => i).forEach((day, index) => {
        const date = new Date()
        date.setDate(date.getDate() - day)
        const dateStr = parseTime(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(), '{y}-{m}-{d}')
        let dateNameStr = parseTime(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(), '{y}-{m}-{d}')
        switch (index) {
          case 0:
            dateNameStr = '今日数据'
            break
          case 1:
            dateNameStr = '昨日数据'
            break
          case 2:
            dateNameStr = '前日数据'
            break
        }
        dateArr.push({
          name: dateNameStr,
          date: dateStr
        })
      })
      if (!this.searchTime || dateArr.findIndex(v => v.date == this.searchTime) == -1) {
        this.searchTime = parseTime(new Date(), '{y}-{m}-{d}')
      }
      this.dateList = dateArr
    },
    showTooltip() {
      setTimeout(() => {
        const fullDom = document.getElementById('fullDom')
        if (document.querySelector('.el-tooltip__popper') && this.isFullScreen) {
          fullDom.appendChild(document.querySelector('.el-tooltip__popper'))
        }
      }, 100)
    },
    // 全屏
    fullScreen() {
      const fullDom = document.getElementById('fullDom')
      if (fullDom) screenfull.toggle(fullDom)
    },
    change() {
      this.isFullScreen = screenfull.isFullscreen
    }
  }
}
</script>

<style lang="scss">
.screen-select {
  border: 1px solid rgba(49, 104, 223, 0.5) !important;
  background-color: rgba(43, 113, 205, 0.5) !important;
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: rgba(49, 104, 223, 0.2) !important;
  }
  .el-select-dropdown__item {
    color: white !important;
  }
  .popper__arrow::after {
    border-bottom-color: rgba(43, 113, 205, 0.5) !important;
  }
  .popper__arrow {
    border-bottom-color: rgba(43, 113, 205, 0.5) !important;
  }
}
.container {
  /*logo*/
  .logo-area {
    .el-input__inner {
      color: white !important;
      background-color: transparent !important;
      border: 1px solid transparent !important;
    }

    .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
      border-color: transparent !important;
    }

    .el-select .el-input__inner:focus {
      border-color: transparent !important;
    }
  }
}
</style>
<style scoped lang="scss">
p {
  margin: 0 !important;
  padding: 0 !important;
}
.full {
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh !important;
}
.scroll {
  background-size: 100% 100%;
}
.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 30px 30px 30px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  overflow: auto !important;
  /*logo*/
  .logo-area {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &_search {
      display: flex;
      flex-direction: row;
      align-items: center;
      .title_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        height: 40px;
        width: 100%;

        &::before {
          position: absolute;
          z-index: 10;
          display: block;
          width: 1px;
          height: 28px;
          background: rgba(43, 113, 205, 0.3);
          transform: rotate(-45deg);
          /* 改变旋转中心点到右下角 */
          transform-origin: 100% 100%;
          bottom: 0;
          left: 6px;
          content: '';
        }

        &::after {
          position: absolute;
          z-index: 10;
          display: block;
          width: calc(100% - 16px + 200px);
          height: 1px;
          background: rgba(43, 113, 205, 0.3);
          bottom: 0;
          left: 6px;
          content: '';
        }

        img {
          width: 26px;
          height: 26px;
        }
        span {
          background: linear-gradient(180deg, #C6DEFF 19.35%, #68A9FF 74.19%);
          //background: linear-gradient(to right, red, yellow);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 22px;
          font-weight: 600;
          margin-left: 10px;
        }
      }

      .el-input__inner {
        background-color: transparent !important;
        border: 1px solid transparent !important;
      }
      .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
        border-color: transparent !important;
      }
      .el-select .el-input__inner:focus {
        border-color: transparent !important;
      }
    }
    .logo {
      margin-top: 20px;
      position: relative;
      /* width: 100px; */
      height: 50px;
    }
  }

  .screen_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    .content-left {
      flex: 1;
      padding: 0 10px;
      .title_item {
        width: 260px;
        height: 32px;
        background-image: url("../../../assets/new_index/title_bottom_bg.png");
        background-size: 100% 6px;
        background-repeat: no-repeat;
        background-position: center bottom;
        font-size: 16px;
        color: rgba(209, 228, 255, 1);
        padding-left: 20px;
        line-height: 24px;
      }
      &_item {
        &:first-child {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .card_content {
          background: rgba(18, 40, 73, 0.15);
          width: 100%;
          //height: 120px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          align-content: center;
          padding: 10px;
          &_item {
            width: 80px;
            height: 40px;
            background: rgba(8, 59, 127, 0.75);
            border: 1px solid rgba(61, 101, 240, 0.45);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            margin-left: 10px;
            margin-top: 5px;
            margin-bottom: 5px;

            span {
              font-size: 13px;
              color: rgba(196, 207, 245, 1);
              &:last-child {
                font-size: 11px;
                color: rgba(172, 184, 227, 1);
              }
            }
          }
        }
      }
      .first_item {
        .transit {
          //width: 660px;
          padding: 0 20px;
          flex: 1;
          height: 320px;
          background-image: url("../../../assets/new_index/personnel_access_bg.png");
          background-size: 660px 210px;
          background-repeat: no-repeat;
          background-position: center bottom;
          display: flex;
          flex-direction: row;
          justify-content: center;
          &_item {
            width: 130px;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .count {
              font-size: 44px;
              font-weight: 700;
              line-height: 70px;
              height: 70px;
              text-align: center;
              color: rgba(240, 245, 255, 1);
            }

            .title {
              font-size: 18px;
              line-height: 30px;
              height: 30px;
              text-align: center;
              color: rgba(140, 254, 254, 1);
            }

            &:first-child,&:last-child {
              margin-top: 80px;
            }
            &:first-child {
              margin-right: 120px;
            }
            &:last-child {
              margin-left: 120px;
            }

          }
        }
        .age_distribution {
          //width: 300px;
          flex: 1;
          height: 320px;
        }
        .gender_distribution {
          width: 340px;
          height: 320px;
        }
      }
    }
    .content-right {
      width: 200px;
      height: 100%;

      .title_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        height: 40px;
        width: 100%;
        min-width: 200px;
        margin-left: 20px;

        &::before {
          position: absolute;
          z-index: 10;
          display: block;
          width: 1px;
          height: 28px;
          background: rgba(43, 113, 205, 0.3);
          transform: rotate(-45deg);
          /* 改变旋转中心点到右下角 */
          transform-origin: 100% 100%;
          bottom: 0;
          left: 6px;
          content: '';
        }

        &::after {
          position: absolute;
          z-index: 10;
          display: block;
          width: calc(100% - 16px - 10px);
          height: 1px;
          background: rgba(43, 113, 205, 0.3);
          bottom: 0;
          left: 6px;
          content: '';
        }

        img {
          width: 26px;
          height: 26px;
        }
        span {
          background: linear-gradient(180deg, #C6DEFF 19.35%, #68A9FF 74.19%);
          //background: linear-gradient(to right, red, yellow);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 22px;
          font-weight: 600;
          margin-left: 10px;
        }
      }

      &_content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 30px;
        padding-right: 20px;
        &_item {
          width: 130px;
          height: 130px;
          background-image: url("../../../assets/new_index/terminal_distribution_bg.png");
          background-size: 100% 50%;
          background-repeat: no-repeat;
          background-position: center bottom;
          display: flex;
          flex-direction: column;
          align-items: center;

          &:not(:first-child) {
            margin-top: 80px;
          }

          .count {
            font-size: 36px;
            font-weight: 700;
            line-height: 50px;
            height: 50px;
            text-align: center;
            color: rgba(231, 239, 255, 1);
            margin-top: 10px;
          }

          .title {
            font-size: 17px;
            line-height: 40px;
            height: 40px;
            text-align: center;
            color: rgba(219, 238, 255, 1);
          }
        }
      }
    }
  }
}
</style>
