<template>
  <section class="AiDvWrapper" :class="'AiDvWrapper' + theme">
    <dv-full-screen-container>
      <div class="viewPanel column" flex :style="{backgroundImage}">
        <slot v-if="$scopedSlots.head" name="head" v-bind="{...$props,...$data}"/>
        <component v-else :is="headerComponent" v-bind="{...$props,...$data}" v-model="active"
                   @fullscreen="handleFullScreen" @setting="e=>dialog=e"
                   @change="e=>$emit('change',e)"/>
        <div class="fill">
          <slot/>
        </div>
      </div>
    </dv-full-screen-container>
    <ai-dialog :visible.sync="dialog" title="设置" @onConfirm="handleSetting" width="500px" class="settingDialog"
               :modal="mask">
      <el-form size="mini">
        <el-form-item label="轮播频次">
          <el-input-number v-model="setting.splitViewTime" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {fullScreenContainer} from '@jiaminghi/data-view'
import Classic from "./layout/classic";
import Vue from "vue"
import Primary from "./layout/primary";

export default {
  name: "AiDvWrapper",
  components: {Primary, Classic},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    title: {default: "数字乡村数据大屏"},
    titleSize:{default:38},
    views: {
      default: () => []
    },
    theme: {
      default: '0',
      type: String
    },
    value: {default: ''},
    /**
     * 布局方案:black,classic,fengdu
     */
    type: {default: "black"},
    background: {default: ""},
    mask: {default: true, type: Boolean}
  },
  computed: {
    active: {
      set(v) {
        this.$emit('change', v)
      },
      get() {
        return this.value || this.views?.[0]?.id
      }
    },
    headerComponent: v => ({
      classic: Classic,
      black: Primary,
    }[v.type]),
    backgroundImage: v => v.background ? `url("${v.background}")` : undefined
  },
  watch: {
    title: {
      immediate: true,
      handler(v) {
        v && (document.title = v)
      }
    }
  },
  data() {
    return {
      currentTime: '',
      fullscreen: false,
      dialog: false,
      setting: {splitViewTime: 0}
    }
  },
  methods: {
    handleFullScreen() {
      this.fullscreen = !this.fullscreen
      if (this.fullscreen) {
        let el = document.documentElement;
        let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
            el.mozRequestFullScreen || el.msRequestFullScreen;
        rfs.call(el)
      } else {
        let el = document;
        let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
            el.mozCancelFullScreen || el.exitFullScreen;
        cfs.call(el)
      }
      return this.fullscreen
    },
    handleSetting() {
      if (this.setting.timer) clearInterval(this.setting.timer)
      let count = 0
      if (this.setting?.splitViewTime > 0) {
        this.setting.timer = setInterval(() => {
          if (this.views.length > 0) {
            count++
            this.active = this.views?.[count % this.views.length]?.id
          }
        }, this.setting.splitViewTime * 1000)
      }

      this.dialog = false
    }
  },
  created() {
    setInterval(() => {
      this.currentTime = this.$moment().format("YYYY/MM/DD HH:mm:ss")
    }, 1000)
    Vue.use(fullScreenContainer)
  },
}
</script>

<style lang="scss" scoped>
@import "../../animation";

@font-face {
  font-family: fangfang;
  src: url("https://cdn.cunwuyun.cn/fonts/fangfang.ttf");
}

.AiDvWrapper {
  .viewPanel {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #0C0C0C;
    padding: 0 0 20px;
    box-sizing: border-box;

    & > .fill {
      width: 100%;
      padding: 0 40px;
      box-sizing: border-box;
    }
  }

  :deep(.settingDialog ) {
    .ai-dialog {
      background: #1D2127;
      box-shadow: 0 0 4px 0 #206EFF;
      border: 1px solid #4283FF;
      color: #fff;

      .el-dialog__header {
        border-radius: 0;
        box-shadow: none;
        line-height: 28px;
        font-size: 20px;
        font-family: FZZZHONGJW--GB1-0, FZZZHONGJW--GB1;
        text-shadow: 0 0 8px #1365FF;
        background: linear-gradient(270deg, #F0F4FF 0%, #FFFFFF 51%, #F0F4FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        .ai-dialog__header {
          border-bottom: none;
        }
      }

      .el-dialog__footer {
        background: inherit;
      }
    }

    .el-form {
      .el-form-item__label {
        color: #fff;
      }

      .el-input:after {
        position: absolute;
        display: block;
        right: 32px;
        top: 50%;
        content: "秒";
        transform: translateY(-50%);
        font-size: 12px;
      }

      .el-input__inner {
        background: #262C33;
        border: 1px solid #030411;
        border-radius: 0;
        color: #fff;
        text-align: start;
        position: relative;

      }

      .el-input-number__decrease, .el-input-number__increase {
        border-color: #030411;
        background: #262C33;
        color: #fff;
      }
    }
  }

  //党建主题
  &.AiDvWrapper1 {
    :deep(.primary) {
      .content {
        background-image: url("assets/headerThemePrimaryBG_lb.png"), url("assets/headerThemePrimaryBG_rb.png");

        .item {
          background-image: url("assets/themeTimeIcon.png");
        }
      }

      .el-tabs {
        .el-tabs__item {
          &.is-active {
            color: #FAD88E;
          }
        }

        .el-tabs__active-bar {
          background: linear-gradient(270deg, #fad88e00 0%, #fad88eff 51%, #fad88e00 98%);
        }

        .el-tabs__nav-prev {
          background-image: linear-gradient(90deg, #fad88eff 0%, #21131e6e 28%, #23141f42 100%);

          .el-icon-arrow-left:before {
            color: #FAD88E;
          }
        }

        .el-tabs__nav-next {
          background-image: linear-gradient(270deg, #fad88eff 0%, #21131e6e 28%, #23141f42 100%);

          .el-icon-arrow-right:before {
            color: #FAD88E;
          }
        }
      }
    }

    .headerBottomBorder {
      display: none;
      background-image: none;

      &::before {
        display: none;
      }
    }

    .headerPane {
      align-items: initial;
      z-index: 11;
      padding-bottom: 32px;
      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/dj-title.svg");
      background-repeat: no-repeat;
      // background-size: 100% 88px;
      background-position-x: -8px;
    }

    .breatheLights {
      display: none !important;
    }

    .headerPane .headerCenter {
      height: 100%;
      line-height: 1;
      background-image: none;

      &::before {
        display: none;
      }

      .headerZone {
        height: 88px;
        background-image: none;

        span {
          top: 45%;
          font-size: 32px;
          font-family: FZZZHONGJW--GB1-0, FZZZHONGJW--GB1;
          color: #CEE1FF;
          font-weight: 600;
          line-height: 38px;
          letter-spacing: 2px;
          text-shadow: 0 2px 4px rgba(117, 9, 9, 0.1);
          background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .fly {
        display: none;
      }
    }

    .rightTopBorder {
      background: none;
      box-shadow: none;

      :deep( .corner ) {
        display: none !important;
      }
    }

    .time {
      font-size: 20px;
      font-weight: 400;
      color: #FF9A02;
      line-height: 22px;
      text-shadow: 0 2px 4px rgba(117, 9, 9, 0.1);
      background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .setting {
      cursor: pointer;
      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/setting.svg") !important;
      background-repeat: no-repeat;
      background-position: center center;
    }

    .fullscreen {
      cursor: pointer;
      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/fullscreen.svg") !important;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
}

</style>
