<template>
  <section class="AppVideoMonitoringDV">
    <el-row type="flex" justify="space-between" class="body">
      <div class="left-wrap column" flex>
        <div class="left-top fill">
          <label class="label">设备统计</label>
          <dv-scroll-board :header="config.header" :config="config" class="table"/>
        </div>
        <div class="left-bottom">
          <label class="label">电子地图</label>
          <ai-map :areaId="user.info.areaId"/>
        </div>
      </div>
      <div class="center-wrap column" flex>
        <div flex style="width: 100%">
          <div :span="6" class="card fill" v-for="(item,index) in cardList" :key="index">
            <span>{{ item.label }}</span>
            <span>{{ item.value }}</span>
          </div>
        </div>
        <div class="center-bottom fill">
          <label class="label">视频监控</label>
          <div class="video-wrap">
            <div class="item" v-for="(item,index) in videoData.slice(0,2)"
                 :key="index">
              <template v-if="flag">
                <iframe class="video" :src="item.url" allow="autoplay *; microphone *; fullscreen *"
                        allowfullscreen allowtransparency="true" allowusermedia="true" frameBorder="no"></iframe>
              </template>
              <template v-else>
                <div class="video"></div>
              </template>
              <div class="info">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="video-wrap">
            <div class="item" v-for="(item,index) in videoData.slice(2,4)"
                 :key="index">
              <template v-if="flag">
                <iframe class="video" :src="item.url" allow="autoplay *; microphone *; fullscreen *"
                        allowfullscreen allowtransparency="true" allowusermedia="true" frameBorder="no"></iframe>
              </template>
              <template v-else>
                <div class="video"></div>
              </template>
              <div class="info">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-wrap column" flex>
        <div class="right-top fill">
          <label class="label">人员统计</label>
          <label class="total">人员总数
            <span>0</span>
            <span>人</span>
          </label>
          <dv-scroll-board :config="config1" class="total-table"/>
        </div>
        <div class="right-middle">
          <label class="label">动作告警统计</label>
          <div class="tag">
            <span></span>
          </div>
          <ai-echart :ops="getOpt()"/>
          <div class="info">
            今日
            <span>0</span>
            <span>次</span>
            本月
            <span>0</span>
            <span>次</span>
          </div>
        </div>
        <div class="right-bottom">
          <label class="label">声音告警统计</label>
          <div class="tag">
            <span></span>
          </div>
          <ai-echart :ops="getOpt('1')"/>
          <div class="info">
            今日
            <span style="color:#00FFDF">0</span>
            <span>次</span>
            本月
            <span style="color:#00FFDF">0</span>
            <span>次</span>
          </div>
        </div>
      </div>
    </el-row>
  </section>
</template>

<script>
import {mapState} from "vuex";
import Vue from "vue";
import {scrollBoard} from "@jiaminghi/data-view";

Vue.use(scrollBoard)
export default {
  name: "AppVideoMonitoringDV",
  label: "数据大屏-平安小区",
  inject: {
    dv: {default: ""}
  },
  props: {
    instance: Function
  },
  computed: {
    ...mapState(['user']),
    cardList() {
      return [
        {label: "总设备数", value: "0"},
        {label: "在线设备", value: "0"},
        {label: "离线设备", value: "0"},
        {label: "设备在线率", value: "0%"},
      ]
    },
  },
  data() {
    return {
      meta: {},
      config: {
        data: [
        ],
        columnWidth: [60, 140],
        header: ["机构", "设备在线率"],
        headerBGC: '',
        headerHeight: 41,
        oddRowBGC: "",
        evenRowBGC: "",
        align: ["center", "center", "center"],
        rowNum: 10,
        index: true,
        indexHeader: "排名"
      },
      config1: {
        data: [
          ['普通用户', '-'],
          ['村级管理员', '-'],
          ['超级管理员', '-'],
          ['测试', '-'],
        ],
        headerHeight: 41,
        oddRowBGC: "",
        evenRowBGC: "",
        align: ["left", "left", "right"],
        index: true,
        rowNum: 6,
        columnWidth: [50]
      },
      start: 0,
      end: 40,
      start1: 0,
      end1: 40,
      interval: null,
      videoData: [],
      flag: false,
    }
  },
  methods: {
    jsonObj(val) {
      return JSON.parse(val || "{}")?.url
    },
    getOpt(type = "0") {
      let opt = {
        "0": {
          xData: ['2020/7/1', "2020/7/2", "2020/7/3", "2020/7/4", "2020/7/5", "2020/7/6", "2020/7/7", "2020/7/8", "2020/7/9", "2020/7/10", "2020/7/11"],
          yData: Array(11).fill(0),
          color: "#FFEA2F",
          areaStyle: 'rgba(255,234,47,0.2)',
          unit: '',
        },
        "1": {
          xData: ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00"],
          yData: Array(10).fill(0),
          color: "#13B5B1",
          areaStyle: 'rgba(255,234,47,0.2)',
          unit: '次',
        },
      }
      return {
        grid: {
          top: "5%",
          left: "16%",
          right: "3%",
          bottom: "12%"
        },
        xAxis: {
          show: true,
          boundaryGap: false,
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: "#5E9CEA",
              fontSize: 12
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: opt[type]["xData"]
        },
        yAxis: {
          type: 'value',
          show: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#103066'],
            }
          },
          axisLabel: {
            show: true,
            formatter: (val) => `${val}${opt[type]["unit"]}`,
            textStyle: {
              color: "#5E9CEA",
              fontSize: 12
            }
          },
        },
        series: [{
          symbol: "none",
          data: opt[type]["yData"],
          type: 'line',
          itemStyle: {
            normal: {
              color: opt[type]["color"],
              areaStyle: {
                color: {
                  type: 'linear', x2: 0, y2: 1, colorStops: [
                    {offset: 0, color: opt[type]["areaStyle"]}, {offset: 1, color: '#000000'}]
                }
              }
            }
          }
        }]
      }
    },
    getWebSdkUrlForScreen() {
      this.instance.post(`/app/appzyvideoequipment/getWebSdkUrlForTianQiaoScreen`).then(res => {
        if (res.code == 0) {
          this.videoData = res.data
          this.flag = true
        }
      })
    }
  },
  beforeDestroy() {
    this.interval && clearInterval(this.interval);
  },
  mounted() {
    // this.getWebSdkUrlForScreen()
  },
}
</script>

<style lang="scss" scoped>
.AppVideoMonitoringDV {
  height: 100%;
  padding: 6px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 24px;

  .body {
    height: 100%;

    .left-wrap {
      width: 307px;
      height: 100%;

      .left-top {
        width: 100%;
        background-image: url("../assets/videoMonitor/box1.png");
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;

        .table {
          box-sizing: border-box;
          padding: 63px 17px 17px;
        }
      }

      .left-bottom {
        width: 100%;
        height: 311px;
        background-image: url("../assets/videoMonitor/box2.png");
        background-size: 100% 100%;
        margin-top: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .AiMap {
          width: 274px;
          height: 247px;
          margin-top: 40px;
        }
      }
    }

    .center-wrap {
      width: 1183px;
      height: 100%;

      .card {
        height: 93.3px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("../assets/videoMonitor/card.png");
        background-size: 100% 100%;
        margin-right: 24px;

        &:last-child {
          margin-right: 0;
        }

        & > span:first-child {
          font-size: 20px;
          font-weight: 400;
          color: #FFFFFF;
        }

        & > span:last-child {
          font-size: 38px;
          font-family: dineng, serif;
          font-weight: bold;
          color: #00EDFF;
          margin-left: 13px;
        }
      }

      .center-bottom {
        width: 100%;
        height: 789px;
        background-image: url("../assets/videoMonitor/middlebox.png");
        background-size: 100% 100%;
        margin-top: 40px;
        position: relative;
        box-sizing: border-box;
        padding: 61px;

        .video-wrap {
          width: 100%;
          height: 344px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          .item {
            .video {
              width: 522px;
              height: 296px;
              object-fit: fill;
              vertical-align: bottom;
              border: 2px solid #122C7D;
            }

            .info {
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding: 0 12px;
              background-color: #071153;
              font-size: 14px;
              color: #FFFFFF;
            }
          }
        }
      }
    }

    .right-wrap {
      width: 297px;
      height: 100%;

      .right-top {
        width: 100%;
        height: 333px;
        background-image: url("../assets/videoMonitor/box3.png");
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;

        .total {
          font-size: 16px;
          color: #979AB7;
          display: inline-block;
          margin: 65px 0 16px 23px;

          & > span:nth-child(1) {
            font-size: 28px;
            font-family: dineng, serif;
            font-weight: bold;
            color: #01CAFF;
          }

          & > span:nth-child(2) {
            font-size: 16px;
            color: #01CAFF;
          }
        }

        .total-table {
          height: 200px;
          box-sizing: border-box;
          padding: 0 23px;
        }
      }

      .right-middle, .right-bottom {
        width: 100%;
        height: 276px;
        background-image: url("../assets/videoMonitor/box4.png");
        background-size: 100% 100%;
        margin: 19px 0;
        position: relative;
        overflow: hidden;

        .tag {
          margin: 28px 18px 0 0;
          display: flex;
          justify-content: flex-end;
          font-size: 12px;
          color: #5E9CEA;

          & > span {
            font-size: 12px;
            color: #FFFFFF;
            display: inline-block;
            width: 34px;
            height: 17px;
            text-align: center;
            line-height: 18px;
            margin-left: 14px;
          }
        }

        ::v-deep .AiEchart {
          width: 251px;
          height: 175px;
          margin: 11px auto 0;
        }

        .info {
          font-size: 12px;
          color: #FFFFFF;
          line-height: 24px;
          box-sizing: border-box;
          padding: 15px 19px 0;

          & > span:nth-child(2n+1) {
            font-size: 18px;
            font-weight: 400;
            line-height: 24px;
            color: #FFE930;
          }

          & > span:nth-child(2n) {
            font-size: 14px;
            font-weight: 400;
            color: #FFE930;
            line-height: 24px;
            margin: 0 5px;
          }

          & > span:nth-child(2) {
            margin-right: 22px;
          }
        }
      }

      .right-bottom {
        margin: 0;
      }
    }
  }

  .label {
    position: absolute;
    left: 24px;
    top: 23px;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
  }

  ::v-deep .index {
    background-color: transparent !important;
  }

  ::v-deep .header {
    background: url("../assets/videoMonitor/titlebox.png");
  }

  ::v-deep .row-item div:nth-child(3) {
    font-size: 13px;
    color: #00CDFF;
  }
}
</style>
