<template>
  <div class="fast-link-contanier height100">
    <div class="linkbox">
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="'alllink '+((!isEditable&&(item.linkUrl||data.interUrl||data.codeUrl))?'canClick':'')"
        :style="{height:'auto',boxSizing: 'border-box',width:colPer,background:data.zebra&&index%2==1?'var(--light-back-grey)':data.itemBackground,border:data.borderSize?(data.borderSize +'px solid '+(data.borderColor||'#fff')):'',borderColor:data.borderColor||'#fff'}"
      >
        <div
          class="clickitem"
          @click="clickLink($event, item)"
          :style="{ flexDirection : showStyle,'align-items':('center') }"
        >
          <div class="biUserDefined-item__handle" :ref="'itemHandle'+item.id" ></div>
          <div
            class="urlimg"
            :style="{width: (data.iconW||'80')+'px', height:  (data.iconH||'80')+'px'}"
            v-if="data.iconW!=0&&data.iconH!=0"
            @click="clickItem($event, item)"
          >
            <img v-if="item.showIcon" class="imgbox" :src="readImg(item.showIcon)" alt />
            <span class="defaultImg" v-else>
              <i class="iconfont icon-tupian font26"></i>
            </span>
          </div>
          <div
            :style="{textAlign:data.align||'center',width:data.iconW==0||data.showStyle != 'leftRight'?'100%':'calc(95% - '+data.iconW+'px)'}"
          >
            <p
              class="text hidden nowrap ellipsis"
              :title="item.showName"
              v-if="item.showName"
            >{{item.showName}}</p>
            <p
              class="text hidden nowrap ellipsis"
              v-if="item.selectDataSourceCode"
              :style="{fontSize:(item.fontSize + 'px'), color:item.fontColor }"
              :title="isEditable?100:(item.showValue||'-')"
            >{{isEditable?100:(item.showValue||'-')}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let Base64 = require('js-base64').Base64
import biUtils from '../../utils/biUtils'
export default {
  name: 'suqareSign',
  props: {
    showMData: {
      //显示模拟数据
      type: Boolean,
      default: false
    },
    isEditable: {
      type: Boolean,
      default: false
    },
    title: {
      type: [String, Number],
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    width: { type: [String, Number], default: 0 },
    height: { type: [String, Number], default: 0 },
    data: {
      type: Object,
      default: () => []
    },
    biData: {
      // bi预览后的data
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      downUrl: process.env.VUE_APP_BASE_URL,
      showStyle: 'column',
      colNumber: 3,
      colPer: '33%',
      rowNumber: 1,
      rowPer: '50%',
      colRepeat: 'repeat(3, 33.33%)',
      rowRepeat: 'repeat(2, 50%)',
      list: [],
      uuid: this.$utils.uuid(16),
      imgList: [],
      readyToBlur: false,
      plugin: false
    }
  },
  created() {},
  mounted() {
    let _this = this
    window.addEventListener('blur', function() {
      if (_this.readyToBlur) {
        _this.plugin = true
      }
    })
    this.initView()
    this.downloadImg()
  },
  methods: {
    clickItem(ev, item) {
      ev.stopPropagation()
      if (this.isEditable) {
        item.type = 'link'
        let itemHandle = this.$refs['itemHandle'+item.id][0]
        let selected = itemHandle.style.height == '100%'
        this.$eventBus.$emit('resetOtherActive', {}) //清除其他高亮
        if (selected) {
          this.$eventBus.$emit('itemselectchange', {
            target: {},
            select: !selected
          })
          return false
        }
        this.$eventBus.$emit('itemselectchange', {
          target: item,
          select: !selected
        })
        itemHandle.style.margin = '0 20px'
        itemHandle.style.height = selected ? '0' : '100%'
        // itemHandle.style.width = selected ? '0' : this.colPer + '%'
        itemHandle.style.border = '1px'
        itemHandle.style.borderColor = 'var(--base-acv)'
        itemHandle.style.borderStyle = 'solid'
      }else{
        this.clickLink(ev, item)
      }
    },
    clickLink(ev, item) {
      if (!this.isEditable) {
        if (!this.data.interUrl && !this.data.codeUrl && !item.linkUrl) {
          return false
        }
        // 预览
        let url = item.linkUrl
        //非单个设置的url
        if (!url && (this.data.interUrl || this.data.codeUrl)) {
          if (this.data.urlType == 1) {
            url = item.data ? item.data[this.data.codeUrl] : ''
          } else {
            url = this.data.interUrl
          }
          if (this.data.interTargetParam && this.data.interSourceParam) {
            url =
              url +
              '?' +
              this.data.interTargetParam +
              '=' +
              item.data[this.data.interSourceParam]
          }
          url = url ? biUtils.setUserInfo(url, this.data, this) : url
        } else {
          url = url ? biUtils.setUserInfo(url, item, this) : url
          if (
            item.frameType === 1 &&
            url.indexOf('para=') > -1 &&
            item.paramEncryptionType === 1
          ) {
            let z = ''
            if (url.indexOf('para=web ') > -1) {
              val = url.split('para=web ')
              z = 'para=web '
            } else {
              val = url.split('para=')
              z = 'para='
            }
            val[1] = Base64.encode(val[1])
            url = val[0] + z + val[1]
          }
        }
        if (
          url &&
          url.indexOf('http://') != 0 &&
          url.indexOf('https://') != 0 &&
          url.indexOf('sso://') != 0 // 非完整的URL，需拼接
        ) {
          url = location.href + url
        }
        this.readyToBlur = true
        if (url && (url.indexOf(':sso') == 0 || url.indexOf('sso:') == 0)) {
          if (!global.software) {
            // 非客户端
            window.location.href = url
            setTimeout(() => {
              if (this.plugin) {
                // 存在
                window.open(url, '_blank')
                return
              } else {
                location.href = this.downUrl + 'files/sso_launch_setup.exe'
              }
              this.readyToBlur = false
            }, 3000)
          } else {
            this.setSSOLink(item.data || item, url)
          }
        } else {
          window.open(url, '_blank')
        }
        return false
      }
      if (this.showMData) {
        //显示模拟数据，不可用
        return
      }
    },
    // 处理在客户端的问题
    setSSOLink(v, href) {
      let menuid = v.menuid
      let packageName = v.packageName
      let funtype =
        (v.funType == 1
          ? 'dll'
          : v.funType == 2
          ? 'exe'
          : v.funType == 3
          ? 'sys'
          : v.funType) || 'dll'
      let sys = v.sysNumber
      let func = null
      if (href.indexOf('func=') > 0) {
        func = href.split('func=')[1]
      } else if (href.indexOf('funcName=') > 0) {
        func = href.split('funcName=')[1]
      } else if (href.indexOf('app=') > 0) {
        func = href.split('app=')[1]
      }
      if (packageName == -1 || !packageName || packageName.length == 0) {
        if (funtype == 'exe' || funtype == 'dll') {
          // this.$utils.msg(this, '测试打印：'+'trasenBrowser.CallWinForm('+funtype+', '+func+')', 'warning')
          if (global.software != 'bs') {
            this.$utils.msg(this, '请在创星应用程序中打开！', 'warning')
            return false
          }
          trasenBrowser.CallWinForm(funtype, func)
        } else if (funtype == 'sys') {
          let _this = this
          this.$api({
            url: '/ts-system/combine/redirect/url/' + sys,
            method: 'post',
            data: {
              url: href
            }
          }).then(res => {
            if (res.success == true) {
              let _h = res.object
              if (_h.indexOf('http://') != -1 || _h.indexOf('https://') != -1) {
                window.open(_h)
              } else {
                if (global.software != 'bs') {
                  _this.$utils.msg(_this, '请在创星应用程序中打开！', 'warning')
                  return false
                }
                trasenBrowser.CallWinForm('exe', _h || func)
              }
            } else {
              _this.$utils.msg(_this, '打开失败！', 'error')
            }
          })
        } else {
          biUtils.goHrefUrl(global,href)
        }
      } else {
        if (global.software != 'bs') {
          _this.$utils.msg(_this, '打开失败！', 'error')
          return false
        }
        trasenBrowser.CallWinForm(funtype, menuid || func)
      }
    },
    readImg(url) {
      if (url.indexOf('../assets') > -1) {
        // 本地文件 需下载
        for (let img of this.imgList) {
          if (img.url == url) {
            return img.data
          }
        }
      } else {
        return url
      }
    },
    // 下载图标库
    downloadImg() {
      const requireContext = require.context(
        '../../assets/images/indexImg',
        true,
        /\.(png|jpg|gif)$/
      )
      requireContext.keys().forEach(filename => {
        const config = requireContext(filename)
        let name = filename.substring(2, filename.length - 4)
        let url = '../assets/indexImg/' + filename
        this.imgList.push({ name: name, data: config, url: url })
      })
    },
    initView() {
      if (!this.isEditable && this.biData && this.biData.length > 0) {
        this.list = [...this.biData]
      } else {
        this.list = this.data.dataSourceData
      }
      this.showStyle = this.data.showStyle == 'topBottom' ? 'column' : 'row'
      // this.imgWidth = this.data.iconW ? this.data.showBig + 'px' : '0px'
      // this.imgHight = this.data.showBig ? this.data.showBig + 'px' : '80px'
      this.colNumber = parseInt(this.data.colNumber)
      this.rowNumber = Math.ceil(
        this.data.dataSourceData.length / this.colNumber
      )
      this.rowPer = 100 / this.rowNumber + '%'
      this.colPer = 100 / this.colNumber + '%'
      // this.colRepeat = 'repeat(' + this.colNumber + ', ' + this.colPer + '%)'
      // this.rowRepeat = 'repeat(' + this.rowNumber + ', ' + this.rowPer + '%)'
    }
  },
  watch: {
    data: {
      handler(n) {
        this.initView()
        // this.list = this.data.dataSourceData
      },
      deep: true
    },
    biData: {
      handler(n) {
        this.initView()
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.fast-link-contanier {
  width: 100%;
  .biUserDefined-item__handle {
    height: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100000;
    // background-color: rgba(235, 244, 255, 0.4);
    background-color: var(--base-acv) 14;
    border: 0;
    border-color: var(--base-acv);
    // border-radius: 2px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .defaultImg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .linkbox {
    margin: 5px;
    display: flex;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    font-size: 12px;
    // justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    //  .canClick {
    //     &:hover{
    //       background: var(--light-back-grey);
    //     }
    //     // p:hover {
    //     //   color: var(--base-acv) !important;
    //     //   text-decoration: underline;
    //     // }
    //   }
    .alllink {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 4px;
      // justify-content: center;
      .clickitem {
        position: relative;
        display: flex;
        flex-direction: column;
        // align-items: center;
        border-radius: 4px;
        justify-content: center;
        min-width: 80px;
        width: 100%;
        padding: 0 10px;
      }

      .urlimg {
        border-radius: 10px;
        margin: 5px;
        background: #eee;
        .imgbox {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
      .linkimg {
        display: flex;
      }
    }
  }
}
</style>
