<script>
export default {
  props: {
    colorText: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'hex'
    },
    block: {
      type: String,
      default: ''
    }
  },
  data() { return {
  }},
  methods: {
    num2hex(value){ // todo: 允许其他进制的num输入？
      if (value) {
        switch (typeof value){
          case 'number': value = value.toString(16); break;
          case 'string': // hex = parseInt(value).toString(16); break;
          default: 
        }
      }
      return value
    },
    shrinkHex(hex){
      if (/^(0x)?[\dA-F]+$/i.test(hex)){
        hex = hex.replace(/^0x/, '')
        let length
        switch(this.block){
          case '2': return hex.replace(/^(\w{6})\w*(\w{6})$/, '$1$2')
          case '4': return hex.replace(/^(\w{12})\w*(\w{12})$/, '$1$2')
          case '6': return hex.replace(/^(\w{18})\w*(\w{18})$/, '$1$2')
          case '8': return hex.replace(/^(\w{24})\w*(\w{24})$/, '$1$2')
          default: return hex
        }
      }
      return ''
    },
    hex2color(hex){
      if (/^(0x)?[0-9A-Fa-f]+$/.test(hex)){
        hex.replace(/^0x/, '')
        let len=hex.length
        let rest = len % 6
        let fullLength = len + (6-(rest?rest:6)) // ?: 必须放在独立括号内
        hex = hex.padEnd(fullLength, '0')
        return hex.match(/[0-9A-Fa-f]{6}/g)
      }
      return []
    },
    address2colorB64u(address){ // TIC address should be in b64u format, i.e. base64 for url (+ to -, / to _)
      if (/^[0-9a-zA-Z\-_]+$/.test(address)){
        // TIC地址被精心设计为24字节，32个b64字符，不需要填充
        // let len=address.length
        // let rest = len % 4
        // let fullLength = len + (4-(rest?rest:4))
        // address = address.padEnd(fullLength, 'A') // 在 b64 里，'00'字节是A. 
        let colorArray = address.match(/[0-9A-Za-z\-_]{4}/g)
        switch(this.block){
          case "2": colorArray.splice(1, colorArray.length-2)
          case "4": colorArray.splice(2, colorArray.length-4)
          case "6": colorArray.splice(3, colorArray.length-6)
          case "8": colorArray.splice(4, colorArray.length-8)
          default: 
        }
        return colorArray
      }
      return []
    },
    b64u2hex(b64u){
      if (/^[0-9a-zA-Z\-_]+$/.test(b64u)){
        let b64 = b64u.replace(/\-/g, '+').replace(/_/g, '/')
        return Buffer.from(b64, 'base64').toString('hex')
      }
      return null
    }
  }
  
}
</script>

<template>
  <view class="sColorText">
  <template v-if="type==='hex'">
    <span class="sColorCode" 
      v-for="(color,index) in hex2color(shrinkHex(colorText))" 
      :style="{background:`#${color}`}" 
      :key="index">
      {{color}}
    </span>
  </template>
  <template v-else-if="type==='b64u'">
    <span class="sColorCode" 
      v-for="(colorB64u,index) in address2colorB64u(colorText)" 
      :style="{background:`#${b64u2hex(colorB64u)}`}" 
      :key="index">
      {{colorB64u}}
    </span>
  </template>
  </view>
</template>

<style lang="scss" scoped>
.sColorText{ 
  display: flex;
  flex-flow: row nowrap;
  font-family: 'Courier New';
  color: white;
  align-items:center;
  span{
    padding: 2px 0;
  }
}
</style>