<template>
  <div
    style="width: 100%;height: 100%"
    class="bs-design-wrap"
    @mouseleave="mouseLeave"
  >
    <dv-scroll-board
      ref="scrollBoard"
      :key="updateKey"
      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
      :config="option"
      @click="rowClick"
      @mouseover="mouseOver"
      @mouseout="mouseOut"
    />
    <div
      v-if="showTip"
      class="tip-box"
      v-html="tipContent"
    >
      {{ tipContent }}
    </div>
    <iframeDialogPreview
      v-if="isPreview"
      ref="iframeDialogPreview"
      :config="config"
    />
  </div>
</template>
<script>
import DvScrollBoard from '@jiaminghi/data-view/lib/components/scrollBoard/src/main.vue'
import '@jiaminghi/data-view/lib/components/scrollBoard/src/main.css'
import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
import iframeDialogPreview from './iframeDialogPreview'
import { mapMutations } from 'vuex'
export default {
  name: 'ScrollBoard',
  components: {
    DvScrollBoard,
    iframeDialogPreview
  },
  mixins: [dataVMixins, paramsMixins, commonMixins, linkageMixins],
  props: {
    // 卡片的属性
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      dialogVisible: false,
      currentImage: 'http://192.168.1.101:8081/bigScreenServer/static/1819197460670181377.png',
      hoverTimeout: null, // 定时器
      showTip: false,
      tipContent: ''
    }
  },
  computed: {
    option: {
      get () {
        for (let i = 0; i < this.config.option?.header.length; i++) {
          this.config.option.header[i] = '<span style=\'color:' + this.config.customize.headerColor + ';font-size:' + this.config.customize.headerFontsize + '\'>' + this.config.option.header[i] + '</span>'
        }

        for (let i = 0; i < this.config.option?.data.length; i++) {
          for (let j = 0; j < this.config.option.data[i].length; j++) {
            this.config.option.data[i][j] = '<span style=\'color:' + this.config.customize.bodyColor + ';font-size:' + this.config.customize.bodyFontsize + '\'>' + this.config.option.data[i][j] + '</span>'
          }
        }
        return { ...this.config.customize, data: this.config.option?.data, header: this.config.option?.header, columnWidth: this.config.option?.columnWidth, align: this.config.option?.align }
      },
      set () {}
    }
  },
  watch: {
  },
  mounted () {
    this.chartInit()
  },
  methods: {
    ...mapMutations('bigScreen', ['changeIframeDialog']),
    // 表格点击事件
    rowClick (row) {
      const origData = this.config.option.origData
      if (row && this.config && this.config.option && origData && origData.length) {
        this.$set(this.config.customize, 'url', origData[row.rowIndex].image)
        this.config.customize.openType = 'dialog'
        if (this.isPreview) {
          if (this.config.customize.url) {
            if (this.config.customize.openType === 'dialog') {
              if (this.isPreview) {
                this.$refs.iframeDialogPreview.dialogVisible = true
              } else {
                this.changeIframeDialog(true)
              }
            } else {
              window.open(this.config.customize.url, this.config.customize.openType)
            }
          }
        }
        // this.linkage(origData[row.rowIndex])
      }
    },
    mouseOver (row) {
      this.showTip = false
      this.tipContent = ''
      if (this.isPreview) {
        // 如果提示框已经显示或有定时器，先清除
        if (this.hoverTimeout) {
          clearTimeout(this.hoverTimeout)
        }
        // 设置定时器，0.5秒后显示提示框
        this.hoverTimeout = setTimeout(() => {
          for (let i = 0; i < row.row.length; i++) {
            this.tipContent += row.row[i]
            this.tipContent += '<br>'
          }
          this.showTip = true // 显示提示框
        }, 1000)
      }
    },
    mouseOut () {
      // 鼠标移开时，清除定时器并隐藏提示框
      if (this.hoverTimeout) {
        clearTimeout(this.hoverTimeout)
        this.hoverTimeout = null
      }
      this.showTip = false // 隐藏提示框
    },
    mouseLeave () {
      // 鼠标离开整个控件时，清除定时器并隐藏提示框
      if (this.hoverTimeout) {
        clearTimeout(this.hoverTimeout)
        this.hoverTimeout = null
      }
      this.showTip = false
    },
    dataFormatting (config, data) {
      this.config.loading = false
      const header = []
      const dataList = []
      const alignList = []
      const widthList = []
      config.option.origData = data?.data
      if (config.customize.columnConfig.length === 0) {
        const key = []
        for (const i in data.columnData) {
          header.push(data.columnData[i].remark||data.columnData[i].alias)
          key.push(i)
        }
        data.data.forEach((item) => {
          const arr = []
          header.forEach((x, index) => {
            arr.push(item[key[index]])
          })
          dataList.push(arr)
        })
      } else {
        const key = []
        config.customize.columnConfig.forEach(item => {
          header.push(item.name)
          key.push(item.code)
          alignList.push(item.align)
          widthList.push(item.width)
        })
        data.data.forEach((item) => {
          const arr = []
          header.forEach((x, index) => {
            arr.push(item[key[index]])
          })
          dataList.push(arr)
        })
        if (config.customize.index) {
          if (alignList.length === header.length) {
            alignList.unshift('center')
          }
          if (widthList.length === header.length) {
            widthList.unshift('100')
          }
        } else {
          if (alignList.length !== header.length) {
            alignList.shift()
          }
          if (widthList.length !== header.length) {
            widthList.shift()
          }
        }
      }
      config.option = {
        ...config.option,
        data: dataList,
        header: header,
        columnWidth: [...widthList],
        align: [...alignList]
      }
      return config
    }

  }
}
</script>

<style lang="scss" scoped>
.light-theme{
  background-color: #ffffff;
  color: #000000;
}
.auto-theme{
  background-color: rgba(0,0,0,0);
}
.dark-theme{
  background-color:rgb(31, 31, 31) ;
}
.tip-box {
  position: fixed; /* 使用 fixed 定位，使提示框相对于视口定位 */
  z-index: 9999; /* 确保 z-index 足够高 */
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  pointer-events: none; /* 禁止鼠标事件影响 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 移动回中心点 */
}
  .bs-design-wrap{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 4px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }
  .title-box{
    height: 40px;
    padding: 10px 10px 0 0;
    box-sizing: border-box;
    .title {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      border-left: 3px solid var(--bs-el-color-primary);
      padding-left: 16px;
    }
    .target-value{
      overflow-y: auto;
      height: 60px;
      font-weight: bold;
      width: 100%;
      font-size: 20px;
      color: #333;
      padding: 16px 0 0 22px;
      box-sizing: border-box;
    }
  }
  .el-icon-warning{
    color: #FFD600;
  }
  .title-hover{
    &:hover{
      cursor: move;
    }
  }
  /*滚动条样式*/
  ::v-deep ::-webkit-scrollbar {
    width: 4px;
    border-radius: 4px;
    height: 4px;
  }
  ::v-deep ::-webkit-scrollbar-thumb {
    background: #dddddd !important;
    border-radius: 10px;
  }

</style>
