<template>
  <div class="ZhiGan_WuRenJiShiShiHuaMian">
    <!-- 按钮栏 -->
    <div class="arrow-button">
      <n-button quaternary @click="previousPage">
        <template #icon>
          <n-icon :size="option.dataStyle.buttonSize">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="24"
              height="24"
              viewBox="0 0 24 24"
            >
              <g fill="none">
                <path
                  d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zm.28 14.53a.75.75 0 0 1-.976.073l-.085-.072l-4-4.001a.75.75 0 0 1-.073-.977l.073-.084l4.001-4a.75.75 0 0 1 1.133.977l-.072.084l-2.722 2.72h6.691a.75.75 0 0 1 .744.649L17 12a.75.75 0 0 1-.648.743l-.102.007H9.56l2.72 2.72a.75.75 0 0 1 .073.977l-.073.084z"
                  :fill="page > 1 ? option.dataStyle.buttonColor1 : option.dataStyle.buttonColor2"
                ></path>
              </g>
            </svg>
          </n-icon>
        </template>
      </n-button>
      <n-button quaternary @click="nextPage">
        <template #icon>
          <n-icon :size="option.dataStyle.buttonSize">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="24"
              height="24"
              viewBox="0 0 24 24"
            >
              <g fill="none">
                <path
                  d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10s-10-4.477-10-10s4.477-10 10-10zm.78 5.469l-.084-.073a.75.75 0 0 0-.882-.007l-.094.08l-.073.084a.75.75 0 0 0-.007.883l.08.094l2.72 2.72H7.75l-.103.006a.75.75 0 0 0-.64.642L7 11.999l.007.102a.75.75 0 0 0 .642.641l.101.007h6.69l-2.72 2.72l-.073.085a.75.75 0 0 0 1.05 1.05l.084-.073l4.001-4l.073-.085a.75.75 0 0 0 .007-.882l-.08-.094l-4-4.001l-.085-.073l.084.073z"
                  :fill="
                    page != sumPage ? option.dataStyle.buttonColor1 : option.dataStyle.buttonColor2
                  "
                ></path>
              </g>
            </svg>
          </n-icon>
        </template>
      </n-button>
    </div>

    <div class="list">
      <div v-for="(item, index) in filterVideoData" :key="item.title + index">
        <div class="item">
          <!-- 编辑状态 -->
          <div class="videoDiv">
            <img
              v-if="isEdit || option.status.hide"
              :width="`${option.dataStyle.videowidth - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
              :height="`${option.dataStyle.videoheight - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
              src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
            />
            <MonitorHK
              v-if="!isEdit && !option.status.hide && item.manufacturer == '海康'"
              :index="index"
              :serialNumberValue="item.videourl"
              :width="`${option.dataStyle.videowidth - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
              :height="`${option.dataStyle.videoheight - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
              :timestamp="option.dataStyle.timestamp"
            />
            <MonitorLC
              v-if="!isEdit && !option.status.hide && item.manufacturer == '乐橙'"
              :deviceId="item.videourl"
              :channelId="0"
              :index="index"
              :width="`${option.dataStyle.videowidth - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
              :height="`${option.dataStyle.videoheight - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
              :timestamp="option.dataStyle.timestamp"
              :videoMuted="option.dataStyle.videoMuted"
            />
            <MonitorTX
              v-if="!isEdit && !option.status.hide && item.manufacturer == '腾讯'"
              :videourl="item.videourl"
              :index="index"
              :width="`${option.dataStyle.videowidth - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
              :height="`${option.dataStyle.videoheight - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
              :timestamp="option.dataStyle.timestamp"
              :videoLoop="option.dataStyle.videoLoop"
              :videoMuted="option.dataStyle.videoMuted"
              :videoFit="option.dataStyle.videoFit"
            />
          </div>
          <Title
            v-if="option.dataStyle.showTitle"
            class="title"
            :item="item"
            :dataStyle="option.dataStyle"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {
    PropType,
    toRefs,
    watch,
    reactive,
    ref,
    onMounted,
    onBeforeUnmount,
    computed,
  } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';
  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
  import dayjs from 'dayjs';
  import Title from './svg/title.vue';
  import { MonitorHK, MonitorLC, MonitorTX } from './video/index';

  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h } = toRefs(props.chartConfig.attr);

  const option = reactive({
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
    status: props.chartConfig.status,
  });

  // 是否是编辑状态
  const isEdit = window.location.href.includes('/chart/home/');

  let sumPage = Math.ceil(option.dataset.length / 4);
  const page = ref(1);
  const filterVideoData = computed(() => {
    let result = option.dataset.slice(0 + (page.value - 1) * 4, 4 + (page.value - 1) * 4);
    return result;
  });

  // 上一页
  function previousPage() {
    if (page.value > 1) {
      page.value -= 1;
    }
  }
  // 下一页
  function nextPage() {
    if (page.value != sumPage) {
      page.value += 1;
    }
  }

  // 初始化视频控件
  onMounted(() => {
    // 用于规避视频id重复
    if (!option.dataStyle.timestamp) {
      option.dataStyle.timestamp = dayjs().unix();
    }

    // 组件通信
    const sql = props.chartConfig.request?.requestSQLContent?.sql;
    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
      props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id });
      // 数据callback处理（预览时触发）
      useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
        option.dataset = resData;
      });
    });
  });

  // 数据callback处理（预览时触发）
  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
    option.dataset = resData;
  });

  watch(
    () => w.value,
    () => {
      option.dataStyle.videowidth =
        (w.value -
          option.dataStyle.borderWidth * 4 -
          option.dataStyle.padding * 4 -
          option.dataStyle.marginleft) /
        2;
    },
  );
  watch(
    () => h.value,
    () => {
      option.dataStyle.videoheight =
        (h.value -
          option.dataStyle.borderWidth * 4 -
          option.dataStyle.padding * 4 -
          option.dataStyle.margintop * 2 -
          option.dataStyle.titleHeight * 2 -
          option.dataStyle.titleMarginTop * 2 -
          10) /
        2;
    },
  );
  watch(
    () => option.dataStyle.videowidth,
    () => {
      option.dataStyle.titleWidth = option.dataStyle.videowidth;
      option.dataStyle.titleHeight = 30 * (option.dataStyle.titleWidth / 181);
    },
    {
      immediate: true,
      deep: true,
    },
  );
  watch(
    () => option.dataStyle.showTitle,
    () => {
      if (option.dataStyle.showTitle) {
        h.value = (h.value / 278) * 353;
      } else {
        h.value = (h.value / 353) * 278;
      }
    },
  );
</script>

<style lang="scss" scoped>
  .ZhiGan_WuRenJiShiShiHuaMian {
    overflow-y: auto;
    background: v-bind('`${option.dataStyle.backgroud}`');
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
    position: relative;

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
  }

  .ZhiGan_WuRenJiShiShiHuaMian::-webkit-scrollbar {
    display: none;
  }
  .ZhiGan_WuRenJiShiShiHuaMian {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: v-bind('`${option.dataStyle.margintop + 15}px`');
    margin-left: v-bind('`${option.dataStyle.marginleft}px`');
    margin-right: v-bind('`${option.dataStyle.marginleft}px`');
  }

  .item {
    display: inline-block;
  }

  .videoDiv {
    width: v-bind('`${option.dataStyle.videowidth}px`');
    height: v-bind('`${option.dataStyle.videoheight}px`');
    border: v-bind('`${option.dataStyle.borderWidth}px`') solid
      v-bind('`${option.dataStyle.borderColor}`');
    padding: v-bind('`${option.dataStyle.padding}px`');
  }

  .title {
    margin-top: v-bind('`${option.dataStyle.titleMarginTop}px`');
  }

  .arrow-button {
    display: flex;
    position: absolute;
    height: 15px;
    top: 0px;
    right: 0px;
  }
</style>
