<template>
  <div class="mask" v-if="isShow">
    <div class="dialog-wrapper">
      <div class="dialog-body table-list">
        <triangle>
          <slot>
            <div class="common-title">
              <img
                class="icon-title"
                src="@/assets/images/screen/boardsDemand.png"
                alt=""
              />
              <span class="title">{{ dialogData.title }}</span>
              <img class="bg" src="@/assets/images/screen/title02_bg.png" alt="" />
              <img
                src="@/assets/images/screen/icon-close.png"
                alt=""
                class="close"
                @click="closeDialog"
              />
            </div>
            <dialog-bar-demand
              class="dialog-echarts-box"
              ref="echarts"
              v-if="dialogData.type === 1"
              :data="dialogData.data"
            />
            <dialog-line-interaction
              ref="echarts"
              class="dialog-echarts-box"
              v-if="dialogData.type === 2"
              :data="dialogData.data"
            />
            <div class="list-of-body">
              <ul class="body-title" v-if="dialogData.type === 1">
                <li class="f2">序号</li>
                <li class="f5">机构名称</li>
                <li class="f3">互动频次</li>
              </ul>
              <ul class="body-title" v-if="dialogData.type === 2">
                <li class="f2">序号</li>
                <li class="f5">统计时间</li>
                <li class="f3">点播总量</li>
              </ul>
              <div class="body-content">
                <div v-if="dialogData.type === 1">
                  <ul
                    class="body-item"
                    v-for="(item, index) in dialogData.list"
                    :key="index"
                  >
                    <li class="f2">{{ index + 1 }}</li>
                    <li class="f5">{{ item.organName }}</li>
                    <li class="f3">{{ item.frequencyCnt }}</li>
                  </ul>
                </div>
                <div v-if="dialogData.type === 2">
                  <ul
                    class="body-item"
                    v-for="(item, index) in dialogData.list"
                    :key="index"
                  >
                    <li class="f2">{{ index + 1 }}</li>
                    <li class="f5">{{ item.playDate }}</li>
                    <li class="f3">{{ item.playNumber }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </slot>
        </triangle>
      </div>
    </div>
  </div>
</template>

<script>
import triangle from "./slot/triangle";
import dialogBarDemand from "./echarts/bar";
import dialogLineInteraction from "./echarts/line";
export default {
  components: {
    triangle,
    dialogBarDemand,
    dialogLineInteraction,
  },
  props: {
    isShow: {
      type: Boolean,
    },
    dialogData: {
      type: Object,
      default: () => {
        return {
          data: {},
          list: [],
          type: 1,
        };
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    closeDialog() {
      this.$emit("update:isShow", false);
    },
  },
  watch: {
    isShow() {
      if (this.isShow) {
        let _this = this;
        setTimeout(() => {
          _this.$refs.echarts.init();
        });
      }
    }
  },
};
</script>

<style lang="scss">
.mask {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow: auto;
  z-index: 100;
  .dialog-wrapper {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, 0.1rem);
    font-size: 0.32rem;
    color: #62baff;
    width: 50vw;
    height: 50vh;
    padding: 0.24rem;
    margin: 0;
    background: rgba(0, 19, 45, 0.9);
    box-shadow: -0.01rem 0 0.1rem #62baff33, 0.01rem 0 0.1rem #62baff33,
      0 -0.01rem 0.1rem #62baff33, 0 0.01rem 0.1rem #62baff33;
    .close {
      position: absolute;
      right: 0.12rem;
      top: 0.12rem;
      width: 0.28rem;
      height: 0.28rem;
      z-index: 101;
    }
    .dialog-body {
      width: 100%;
      .triangle {
        padding-bottom: 0.32rem;
      }
      .list-of-body {
        height: calc(34vh - 1rem);
        padding-top: 0;
        overflow: hidden;
        .body-content {
          height: 100%;
        }
      }
    }
    .dialog-echarts-box {
      height: 16vh;
      width: 100%;
      display: inline-block;
      box-sizing: border-box;
    }
  }
}
</style>