<!--
/**
  * 表单通用组件
  *	@example1:
		1, 引入
			import Slider from '@/components/Slider';

		2, 注册


		3, 创建
			<Carousel
				ref="Carousel"
			/>

  * @author: Kimber
  * @createtime: 2021/12/21(周二)
  */
-->
<template>
  <div class="center-flx">
    <nav v-if="list.length > 1">
      <a v-for="(child, i) in list" :class="{ 'actv': viewActive === i }" @click="navEvent(i, child.type)">{{
        child.sumtitle }}</a>
    </nav>
    <div class="b2a2_a" id="agentFigure">
      <div class="list-wrap" v-for="(child, i) in list" :class="{ 'show': viewActive === i }">
        <div class="b2a2_a1" v-if="child.type === 't_15'">
          <div id="figure" class="figure">
            <div class="img-box" id="pictureArea">
              <img id="drawingImg">
            </div>
            <div id="pointsLayer" class="cview_ctn wkk-ctn" :data-index="i" :class="child.className"
              :data-item="JSON.stringify(child)" :id="child.id">
              <ul></ul>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="cview_ctn ctn-absfull" :data-index="i" :class="child.className" :data-item="JSON.stringify(child)"
            :id="child.id">
            <EZUIKitJs ref="EZUIKit" selectSeat="none" autoPlayer="false" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//import {Carousel, CarouselItem} from 'element-ui';
//import cuAmap from '@/components/AMap';
import EZUIKitJs from '@/components/EZUIKitJs'

export default {
  components: { EZUIKitJs },
  data() {
    return {
      list: [],
      Cache: {
      },
      config: {
      },
      amapinfo: {
        zoom: 6,
        //longitude: 120.651884,
        //latitude: 36.962533,
      },
      viewActive: 0,
      /* gis:{
        isShow:0,
      }, */
    }
  },
  props: {
  },
  beforeCreate() {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    createViews(item) {
      var that = this;
      this.list = item.children; this.config.interval = item.interval;
      var carouselCtn = this.$el.firstElementChild;
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          var chartEls = carouselCtn.querySelectorAll('.cview_ctn');
          var panelList = this.setAttribute(chartEls);
          resolve(panelList);
        });
      })
    },
    setAttribute(charts) {
      var panelList = [];
      for (var el of charts) {
        var item = JSON.parse(el.dataset.item), type = item.type;
        var setData = type === 't_15' ? this.showPointView : this.setPlayInfo;
        panelList.push({ info: this.Cache[type], el: el, item: item, type: type, setData: setData });
      }; return panelList;
    },
    showPointView(data, Tools, pageApi, initModule) {
      var that = this;
      var agentFigure = this.$el.querySelector("#agentFigure");
      this.mapWidget = new qf.UI.pointCharts({
        chartsBox: this.$el.querySelector("#figure"),
        width: agentFigure.offsetWidth,
        height: agentFigure.offsetHeight,
        isRelieveAlarm: true,
        itemClick: function (id) {
          var params = { equipno: id };
          that.$parent.openRelieveAlarm(params, function () {
            initModule()
          });
        },
      });
      this.mapWidget.setBackground(data.chart.picture);
      this.mapWidget.createPoints(data.points, data.chart);
    },
    setPlayInfo(param) {
      var EZUIKit = this.$refs.EZUIKit[0];
      EZUIKit.playerToParam(param);
    },
    navEvent(id, key) {
      this.viewActive = ~~id;
    },
  },
}
</script>
<style lang="scss" scope>
.center-flx {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: .12rem 0.12rem 0.12rem;
  /* padding:0 0.08rem 0.08rem; */

  nav {
    height: .26rem;
    text-align: center;
    color: #89B7C6;
    font-size: 0;
    user-select: none;
    margin-top: -0.12rem;

    a {
      display: inline-block;
      font-size: .15rem;
      line-height: .22rem;
      padding: 0 .10rem;
      cursor: pointer;
      border-radius: .05rem .05rem 0 0;
    }

    .actv {
      color: #0CE2CE;
      background-color: #2271C6;
    }

    ;
  }

  .b2a2_a1 {
    height: 100%;
    width: 100%;
    position: relative;

    >div {
      /* display:none; */
    }

    >div.show {
      display: block;
    }

    >div:first-child {}

    >div:last-child {}

    .figure {
      position: relative;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      user-select: none;
      font-family: serif;
      color: #444;
    }

    .figure {
      .img-box {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;

        img {
          display: block;
          border: 0;
          max-height: 100%;
          max-width: 100%;
        }

        &:before {
          position: absolute;
          content: '';
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          box-shadow: inset 0rem 0rem 0.55rem 0.20rem rgba(0, 31, 60, .8);
        }
      }

      .wkk-ctn {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 20;
      }
    }

    .figure .wkk-ctn {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }

    .figure .wkk-ctn li {
      position: absolute;
    }

    .figure .wkk-ctn li::marker {
      content: close-quote;
    }

    .figure .wkk-ctn li i {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: contain;
    }

    .figure .wkk-ctn li.d_01 i {
      background-image: url('~@/assets/images/icon/d_01.png');
    }

    .figure .wkk-ctn li.d_02 i {
      background-image: url('~@/assets/images/icon/d_02.png');
    }

    .figure .wkk-ctn li.d_03 i {
      background-image: url('~@/assets/images/icon/d_03.png');
    }

    .figure .wkk-ctn li.d_04 i {
      background-image: url('~@/assets/images/icon/d_04.png');
    }

    .figure .wkk-ctn li.d_05 i {
      background-image: url('~@/assets/images/icon/d_05.png');
    }

    .figure .wkk-ctn li.d_06 i {
      background-image: url('~@/assets/images/icon/d_06.png');
    }

    .figure .wkk-ctn li.d_07 i {
      background-image: url('~@/assets/images/icon/d_07.png');
    }

    .figure .wkk-ctn li.d_08 i {
      background-image: url('~@/assets/images/icon/d_08.png');
    }

    .figure .wkk-ctn li>div {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .figure .wkk-ctn li>div .text {
      position: absolute;
      padding: 0.0402rem;
      background-color: #fff;
      border-radius: 0.0643rem;
      line-height: 1.2;
      color: #1A688C;
      font-weight: bold;
      z-index: 1;
    }

    .figure .wkk-ctn .text h4 {
      text-align: center;
      color: #1284b3;
      font-weight: normal;
    }

    .figure .wkk-ctn .text dd {
      display: block;
      line-height: normal;
      margin-top: 3px;
    }

    .figure .wkk-ctn .text dd:before {
      font-size: 15px;
      margin-right: 3px;
    }

    .figure .wkk-ctn .text .normal:before {
      font-size: 13px;
      margin-right: 1px;
    }

    .figure .wkk-ctn .text .red {
      background-color: red;
      color: #fff;
    }

    .figure .wkk-ctn .text .orange {
      background-color: orange;
      color: #fff;
    }

    .figure .wkk-ctn .text .yellow {
      background-color: #e8cb08;
      color: #fff;
    }

    .figure .wkk-ctn .text .blue {
      background-color: #0991FF;
      color: #fff;
    }

    .figure .wkk-ctn .text .relieve {
      cursor: pointer;
    }

    .figure .wkk-ctn .text .offline {
      color: #aaa;
    }

    .figure .wkk-ctn .text .online {
      color: #000;
    }

    /* .figure .wkk-ctn .text .el-icon-info{
				animation:twinkle 1100ms infinite;
			} */
    .figure .wkk-ctn li>div .text:before {
      content: '';
      position: absolute;
      height: 0;
      width: 0;
      border-style: solid;
      border-width: 0.0643rem;
      border-color: transparent;
    }

    .figure .wkk-ctn .up {
      top: 0;
      left: 0;
      height: 0;
      width: 100%;
    }

    .figure .wkk-ctn .up .text {
      bottom: 0.0804rem;
      width: max-content;
    }

    .figure .wkk-ctn .up .text:before {
      bottom: -0.1287rem;
      left: 50%;
      margin-left: -0.0643rem;
      border-color: #fff transparent transparent transparent;
    }

    .figure .wkk-ctn .down {
      bottom: 0;
      left: 0;
      height: 0;
      width: 100%;
    }

    .figure .wkk-ctn .down .text {
      top: 0.0804rem;
      width: max-content;
    }

    .figure .wkk-ctn .down .text:before {
      top: -0.1287rem;
      left: 50%;
      margin-left: -0.0643rem;
      border-color: transparent transparent #fff transparent;
    }

    .figure .wkk-ctn .left {
      top: 0;
      left: 0;
      height: 100%;
      width: 0;
    }

    .figure .wkk-ctn .left .text {
      right: 0.0804rem;
      width: max-content;
    }

    .figure .wkk-ctn .left .text:before {
      top: 50%;
      right: -0.1287rem;
      margin-top: -0.0643rem;
      border-color: transparent transparent transparent #fff;
    }

    .figure .wkk-ctn .right {
      top: 0;
      right: 0;
      height: 100%;
      width: 0;
    }

    .figure .wkk-ctn .right .text {
      left: 0.0804rem;
      width: max-content;
    }

    .figure .wkk-ctn .right .text:before {
      top: 50%;
      left: -0.1287rem;
      margin-top: -0.0643rem;
      border-color: transparent #fff transparent transparent;
    }

    @keyframes red {
      0% {
        opacity: 1.0;
      }

      12.5% {
        opacity: 0.2;
      }

      25% {
        opacity: 1.0;
      }
    }

    @keyframes orange {
      0% {
        opacity: 1.0;
      }

      10% {
        opacity: 0.2;
      }

      20% {
        opacity: 1.0;
      }
    }

    @keyframes yellow {
      0% {
        opacity: 1.0;
      }

      9% {
        opacity: 0.2;
      }

      18% {
        opacity: 1.0;
      }
    }

    @keyframes blue {
      0% {
        opacity: 1.0;
      }

      7.5% {
        opacity: 0.2;
      }

      15% {
        opacity: 1.0;
      }
    }
  }
}

div.screenAlart {
  .el-message-box__header {
    padding: 10px 5px 5px 5px;

    .el-message-box__headerbtn {
      color: #eee;
      top: 10px;
      right: 10px;
    }
  }

  .kmb-message-box {
    background-color: rgba(0, 0, 0, .7);
    border: 1px solid #00B2FC;

    .el-message-box__title {
      color: #eee;
    }

    .el-message-box__content {
      color: #ddd;
    }
  }

  .alert-ctbox {
    .item {
      line-height: 30px;
    }

    span {
      display: inline-block;
      width: 115px;
    }

    input {
      height: 25px;
      line-height: 25px;
      outline: none;
      padding: 5px 5px;
      background: transparent;
      border: 1px solid #aaa;
      color: #fff;
    }

    input::-webkit-input-placeholder {
      color: #888;
    }
  }
}
</style>
