<template>
  <!-- 栏目预览 -->
  <el-dialog
    width="80%"
    title="栏目预览"
    :visible.sync="previewVisible"
    append-to-body
    @close="closeDialogFn"
  >
    <div
      v-if="currentComponents"
      class="box-card"
      :class="{ 'column-height': baseColumn.colHeight }"
      :style="{ '--columnHeight': `${baseColumn.colHeight}px` }"
    >
      <component
        :is="currentComponents"
        :show-data="showData"
        :column-title="baseColumn.name"
        :is-hide-pagination="isHidePagination"
        :show-title="baseColumn.showTitle"
        :custom-column-height="baseColumn.colHeight"
        :page-size="baseColumn.refeshTime"
        :combination-model="designColumn.model"
        :more-url="baseColumn.colUrl"
        :filter-type="designColumn.filterType"
        :filter-scope="designColumn.filterScope"
        :alias="baseColumn.alias"
        :is-show-set-column="false"
        :appid="baseColumn.appid"
        :custom-style="baseColumn.colType=='HtCustom'?baseColumn.templateStyle:baseColumn.style"
        :current-user="currentUser"
        left-bar-top="3px"
        :is-show-delete="false"
        :is-disabled="true"
      ></component>
    </div>
    <el-empty
      v-else
      :image-size="380"
      :image="noDataImg"
      description="暂无模版预览哦~"
    ></el-empty>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import portal from '@/api/portal'
  export default {
    name: 'ColumnPreview',
    props: {
      previewAlias: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        columnItem: null,
        previewVisible: true,
        currentComponents: '',
        designColumn: {},
        showData: null,
        currentUser: {},
        baseColumn: {},
        noDataImg: require('@/assets/nodata_images/no-data.png'),
        theme: {
          name: 'default',
          style: 'light',
          layout: 'vertical',
          header: 'fixed',
          themeColor: '#2F54EB',
        },
      }
    },
    computed: {
      ...mapGetters({
        layout: 'settings/layout',
        header: 'settings/header',
        tabsBar: 'settings/tabsBar',
        themeBar: 'settings/themeBar',
        style: 'settings/style',
        themeColor: 'settings/themeColor',
      }),
      isHidePagination() {
        return this.baseColumn.needPage == '1' ? false : true
      },
    },
    watch: {
      previewAlias: {
        handler(val) {
          if (val) {
            this.getColumnDataByAlias(val)
          }
        },
        immediate: true,
      },
    },
    created() {
      const theme = localStorage.getItem('eip-front-theme')
      if (null !== theme) {
        this.theme = JSON.parse(theme)
      } else {
        this.theme.layout = this.layout
        this.theme.header = this.header
        this.theme.tabsBar = this.tabsBar
        this.theme.style = this.style
        this.defaultActiveMap.style = this.style
        this.defaultActiveMap.layout = this.layout
        this.defaultActiveMap.themeColor = this.themeColor
      }
      this.handleSetTheme()
    },
    methods: {
      getColumnDataByAlias(alias) {
        portal.getColumnByAlias(alias, (data) => {
          let componentData = data
          this.baseColumn = {
            ...componentData,
            showTitle: componentData.showTitle == 1 ? true : false,
          }
          this.designColumn = JSON.parse(componentData.dataParam)
          this.currentComponents = componentData.colType
          if (
            ['processCenter', 'combination', 'processPublicity'].includes(
              this.designColumn.colType
            )
          ) {
            this.showData = this.designColumn.selectType
          }
          if (this.designColumn.colType === 'statisticalChart') {
            let data = []
            data.push({
              dataType: this.designColumn.dataType,
              currentDataType: this.designColumn.currentDataType,
            })
            this.showData = data
          }
          if (
            this.designColumn.colType === 'news' ||
            this.designColumn.colType === 'swipeSlide'
          ) {
            this.showData = this.designColumn.announcementOrPictures
          }
          if (this.designColumn.colType === 'custom') {
            this.designColumn.templateHtml2 = Base64.decode(
              componentData.templateHtml
            )
            this.designColumn.templateJavaScript2 = Base64.decode(
              componentData.templateJavaScript
            )
            this.designColumn.templateStyle2 = Base64.decode(
              componentData.templateStyle
            )
            this.showData = componentData
          }
          if (this.designColumn.colType === 'dataSheets') {
            this.showData = this.designColumn.currentSelectedInfo
          }
          if (['meetingRoom', 'schedule'].includes(this.designColumn.colType)) {
            this.$set(
              this.currentUser,
              'username',
              this.$store.state.user.username
            )
            this.$set(this.currentUser, 'userId', this.$store.state.user.userId)
          }
        })
      },
      handleSetTheme() {
        let { name, layout, style, header, tabsBar, themeColor } = this.theme
        const themeConfig = {
          name,
          layout,
          header,
          tabsBar,
          style,
          themeColor,
        }
        localStorage.setItem('eip-front-theme', JSON.stringify(themeConfig))
        document.body.style = `--themeColor:${themeColor}; --themeColorRgb:${this.hexToRgba(
          themeColor
        )}`
      },
      hexToRgba(hex) {
        const red = parseInt(`0x${hex.slice(1, 3)}`)
        const green = parseInt(`0x${hex.slice(3, 5)}`)
        const blue = parseInt(`0x${hex.slice(5, 7)}`)
        return `${red},${green},${blue}`
      },
      //弹窗关闭
      closeDialogFn() {
        this.previewVisible = false
        window.close()
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 20px;
    .follow-theme-color {
      color: var(--themeColor) !important;
    }

    //带透明度的主题背景色
    .follow-theme-transparency-bg-color {
      background: rgba(0, 128, 254, 0.04) !important;
    }
  }
  .column-height {
    // height: var(--columnHeight);
    ::v-deep {
      .column-content {
        height: calc(var(--columnHeight) - 104px);
        overflow: auto;
        //隐藏滚动条
        &::-webkit-scrollbar {
          width: 0;
          background-color: transparent;
        }
        /*火狐下隐藏滚动条*/
        scrollbar-width: none;
      }
    }
  }
  ::v-deep .ht-custom-title .custom-title::before {
    background: var(--themeColor);
  }
</style>