<template>
  <section class="AppISManage">
    <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict"
                   @treeCommand="handleSliderOption" @select="handleSelectMonitor"
                   :render-item="renderTreeItem" ref="DeviceSlider"/>
    <div class="monitorPane">
      <div class="headerBar">
        <el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
          <i slot="prefix" class="iconfont iconjdq_led_Led1"/>
          <el-option v-for="(op,i) in splitOps" :key="i" v-bind="op"/>
        </el-select>
        <!--        <el-button icon="el-icon-full-screen" @click="handleFullscreen">全屏</el-button>-->
      </div>
      <div class="videoList">
        <div
            class="videoBox"
            v-for="(m,i) in monitors"
            :key="m.id"
            @mouseenter.stop="m.isShowPlayBtn = true"
            @mouseleave.stop="m.isShowPlayBtn = false"
            :style="currentSplitStyle">
          <AiMonitor :src="m.url" type="slw"></AiMonitor>
          <span :title="m.name">{{ m.name }}</span>
          <div class="videoBox-close" @click="removeMonitor(i)" v-if="m.isShowPlayBtn">
            <i class="el-icon-circle-close"></i>
            <span>关闭视频</span>
          </div>
        </div>
      </div>
    </div>
    <ai-dialog title="修改名称" :visible.sync="dialog" width="500px" @onConfirm="handleSubmit(selected)"
               @closed="selected={}">
      <el-form ref="form" :model="selected" label-width="80px" size="small" :rules="rules">
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="selected.name" clearable/>
        </el-form-item>
      </el-form>
    </ai-dialog>
    <locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)"/>
    <ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId"
             :instance="instance" ref="BindArea"
             @change="handleSubmit(selected)"/>
  </section>
</template>

<script>
import {mapState} from 'vuex'
import DeviceSlider from "../components/deviceSlider";
import LocateDialog from "../components/locateDialog";
import AiMonitor from "dvcp-dv-ui/components/AiMonitor/AiMonitor";

export default {
  name: "AppISManage",
  components: {LocateDialog, DeviceSlider, AiMonitor},
  label: "监控实况",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    splitOps() {
      return [
        {label: "单分屏", value: 1, per: "100%"},
        {label: "四分屏", value: 4, per: "49%"},
        {label: "九分屏", value: 9, per: "32%"}
      ]
    },
    currentSplitStyle() {
      let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
      return {width: per, height: per}
    },
    ...mapState(['user'])
  },

  data() {
    return {
      slider: true,
      fullscreen: false,
      splitScreen: 1,
      monitors: [],
      dialog: false,
      locate: false,
      selected: {
        areaId: ''
      },
      videoUrl: '',
      latlng: null,
      disabledLevel: 0,
      rules: {
        name: [{required: true, message: "请填写 设备名称"}]
      }
    }
  },

  created() {
    this.selected.areaId = this.user.info.areaId
    this.disabledLevel = this.user.info.areaList.length - 1
  },

  methods: {
    handleFullscreen() {
      this.fullscreen = !this.fullscreen
      this.$fullscreen(this.fullscreen)
    },
    handleSelectMonitor(monitor) {
      if (monitor.type !== '1') return

      let {id} = monitor,
          index = this.monitors.findIndex(e => e.id == id)
      if (index > -1) {
        this.$message.error('该监控视频已存在')
      } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
        this.$message.error("可分屏监控已满,请先取消其他的监控")
      } else {
        this.showMonitor(monitor)
      }
    },

    onChange(e) {
      if (e === 1 && this.monitors.length) {
        this.monitors = [this.monitors[0]]
      }
    },

    removeMonitor(i) {
      this.monitors.splice(i, 1)
    },

    showMonitor(monitor, refresh = false) {
      let {id: deviceId} = monitor
      deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
        params: {deviceId}
      }).then(res => {
        if (res?.data) {
          this.videoUrl = res.data
          let data = {
            url: res.data,
            isShowPlayBtn: false
          }
          if (refresh) {
            monitor.url = data.url
          } else if (this.splitScreen == 1) {
            this.monitors = [{...monitor, ...data}]
          } else {
            if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
              this.monitors.push({...monitor, ...data})
            }
          }
        }
      })
    },
    renderTreeItem: function (h, {node, data}) {
      let show = data.deviceStatus == 1 ? 'show' : ''
      if (node.isLeaf) {
        return (
            <div class="flexRow">
              <i class={['iconfont', 'iconshipinjiankong', show]}/>
              <div>{node.label}</div>
            </div>
        )
      } else return (
          <div class="flexRow">
            <div>{node.label}</div>
            {data.id != 'no_area' ? <div class="sta">
                  <p>{data.online || 0}</p>/{data.sum || 0}
                </div>
                : <div/>}
          </div>
      )
    },
    handleSliderOption(e) {
      console.log(e)
      this.selected = {
        command: e.type,
        ...e.node
      }
      this.selected.areaId = e.node.areaId || this.user.info.areaId
      if (e.type == "edit") {//修改名称
        this.dialog = true
      } else if (e.type == "area") {//绑定areaId
        this.$refs.BindArea?.chooseArea()
      } else if (e.type == "locate") {//地图标绘
        this.latlng = e.node.lat && e.node.lng ? {
          lat: e.node.lat,
          lng: e.node.lng
        } : ''
        this.locate = true
      }
    },
    handleSubmit(row) {
      delete row.createTime
      return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
        ...row
      }).then(res => {
        if (res?.code == 0) {
          this.$message.success("提交成功!")
          this.dialog = false
          this.$refs.DeviceSlider?.getDevices()
        }
      })
    },
    handleLocate(row, locate) {
      if (locate) {
        let {lat, lng} = locate.location
        this.handleSubmit({...row, lat, lng}).then(() => {
          this.locate = false
        })
      }
    }
  },
  beforeDestroy() {
    this.monitors = []
  }
}
</script>

<style lang="scss" scoped>
.AppISManage {
  display: flex;
  background: #202330;
  height: 100%;

  .monitorPane {
    color: #fff;
    flex: 1;
    min-width: 0;
    padding: 20px 20px 20px 4px;
    display: flex;
    flex-direction: column;

    ::v-deep .headerBar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-bottom: 24px;

      .iconfont {
        color: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 20px;
      }

      .el-input__icon {
        color: #fff;
      }

      .el-input__inner, .el-button {
        color: #fff;
        max-width: 100px;
        background: #2C2F3E;
        border: none;

        &:hover {
          color: #26f;
        }
      }
    }

    .videoList {
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      gap: 8px;
    }

    .videoBox {
      position: relative;
      background: #000;
      flex-shrink: 0;

      & > span {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 11;
        width: 60%;
        height: 38px;
        line-height: 38px;
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff;
        font-size: 16px;
      }

      .videoBox-close {
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        right: 8px;
        top: 8px;
        z-index: 11;
        width: 84px;
        height: 32px;
        line-height: 1;
        background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
        border-radius: 2px;
        cursor: pointer;
        font-size: 12px;
        color: #fff;

        &:hover {
          opacity: 0.8;
        }

        span {
          margin-left: 4px;
        }

        i {
          position: relative;
          font-size: 16px;
        }
      }

      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }

  ::v-deep.el-tree-node__content:hover {
    .menuBtn {
      display: block;
    }
  }

  ::v-deep .flexRow {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #fff;

    .iconfont {
      color: #89b;

      &.show {
        color: #19D286;
      }
    }

    .sta {
      display: flex;
      flex: 1;
      min-width: 0;

      & > p {
        color: #19D286;
      }
    }

    .menuBtn {
      display: none;
      position: absolute;
      right: 4px;
    }

  }
}
</style>
