<template>
  <view
    class="xd-unit"
    :style="[boxStyleComp]"
    :class="{'xd-unit__show': !(uiIcon && showIcon)}"
    v-if="show"
  >
    <view class="xd-unit__price" :style="[priceStyleComp]">
      <view v-if="showRMB">￥</view>
      <text>{{uiPrice}}</text>
    </view>
    <view v-if="range" :style="[rangeStyleComp]">{{range}}</view>
    <view :style="[unitImageStyle]" class="xd-unit__image" v-if="uiIcon && showIcon && (unit === null)">
      <xd-image :is-gray="isGray" :src="uiIcon" :size="iconSize || iocnSize"></xd-image>
    </view>
    <template v-else-if="unit">
      <view class="xd-unit__unit" :style="[unitStyleComp]" v-if="unit">{{unit}}</view>
      <view v-else>
        <xd-coins :size="iconSize || iocnSize"></xd-coins>
      </view>
    </template>
  </view>
</template>

<script>
  /**
   * @name XdUnit
   * @description 单位显示插件(自定义unitIcon单位图片大小100*100)
   * @tutorial
   * @property {Number} fontSize                    支付金额文字大小 （选填） 默认：32rpx
   * @property {Number|String}  price               支付金额 （必选）
   * @property {String}  color                      支付金额文本颜色 （选填） 默认：主色调
   * @property {String}  unit                       支付金额单位 （选填） 默认：空，选上元宝样式
   * @property {Boolean} isGray                     支付icon标是否显示为灰色 (选填) 默认：false
   * @property {Number}  iocnSize                   支付元宝样式大小  （选填） 默认：0.35  备注：unit单位为空时候生效(不推荐使用)
   * @property {Number}  iconSize                   支付元宝样式大小  （选填） 默认：null 备注：unit单位为空时候生效
   */
  import XdCoins from "@/components/XdCoins/XdCoins";
  import XdImage from "@/components/XdImage/XdImage";
  import {
    getParentsStyle,
  } from '@/utils/xd.base';
  import {mapState} from 'vuex';

  export default {
    name: "XdUnit",
    components: {
      XdCoins,
      XdImage
    },
    props: {
      range:{
        type:String,
        default:'',
      },
      fontSize: {
        type: Number|String,
        default: 32
      },

      isGray: {
        type: Boolean,
        default: false,
      },

      isShowIcon: {
        type: Boolean|String,
        default: '',
      },
      price: {
        type: String | Number,
        required: true,
      },
      //价格是否必须大于0， true 小于0隐藏
      largeZero: {
        type: Boolean,
        default: true,
      },
      colorNew: {
        type: String,
        default: ''
      },
      unit: {
        type: String | null,
        default: null
      },

      iocnSize: {
        type: Number,
        default: 0.35
      },
      iconSize: {
        type: Number | null,
        default: null
      },

      deleteLine: {
        type: Boolean,
        default: false,
      },

      fontWeight: {
        type: String | Number,
        default: "normal" //normal，bold， 100-700
      },

      unitFontSize: {
        type: Number,
        default: 0
      },

      isOld: {
        type: Boolean,
        default: true,
      }

    },
    computed: {
      ...mapState(['webUnitIcon','brandInfo','siteInfo']),
      boxStyleComp(){
        return {
          height: this.fontSize * 1.5 + 'rpx',
          "--unit-style-margin-r": (this.fontSize * 0.15 * this.$rpxNum) + 'px'
        }
      },
      unitStyleComp(){
        return {
          lineHeight: this.fontSize + 'rpx',
          fontSize: (this.unitFontSize > 0 ? this.unitFontSize : (this.fontSize - 8)) + 'rpx',
          color: this.isGray? '#999': this.uiColor
        }
      },
      rangeStyleComp(){
        let size = this.fontSize * (2/3) <= 18 ? 18: this.fontSize * (2/3) ;
        return {
          lineHeight: size + 'rpx',
          fontSize: size + 'rpx',
          marginTop: this.fontSize * (2/3) * (1/6) + 'rpx',
          marginRight: (this.fontSize * 0.3 * this.$rpxNum) + 'px',
          color: this.isGray ?'#999': this.uiColor
        }
      },
      priceStyleComp(){
        return {
          lineHeight: (Number(this.fontSize) +  6) + 'rpx',
          fontSize: this.fontSize + 'rpx',
          fontWeight: this.fontWeight,
          textDecoration: this.deleteLine ? 'line-through': 'none',
          color: this.isGray?'#999':this.uiColor
        }
      },
      unitImageStyle(){
        return {
          marginTop: this.fontSize*(2/3) * (1/4) + 'rpx',
        }
      },

    },
    data() {
      return {
        uiColor: '#FF2C18', //金额显示颜色
        uiIcon: null, //金额显示icon
        uiPrice: null, //金额
        show: false,
        fixedNum: null,
        showIcon: true,
        showRMB: false
      }
    },
    watch:{
      price(value) {
        this.initPrice()
      },
      colorNew(val){
        if (val) this.uiColor = val;
      }
    },
    async created() {


      //配置中获取
      let optionsIcon = null;
      if (this.webSetting['unitIcon']) {
        optionsIcon = this.webSetting['unitIcon'];
      }

      //brand中获取
      let brandIncon = null;
      if (this.brandInfo && this.brandInfo['unit_icon']) {
        brandIncon = this.brandInfo['unit_icon'];
      }

      //保留几位小数
      if ((this.brandInfo && this.brandInfo['unit_float'])) {
        let unit_float = this.brandInfo['unit_float'];
        if (this.$xdUniHelper.checkVarType(unit_float) === 'string') {
          unit_float = Number(unit_float);
        }
        unit_float = parseInt(unit_float);
        unit_float = 3;
        if (unit_float < 0) unit_float = 0;
        if (unit_float > 2) unit_float = null;
        this.fixedNum = unit_float;
      }



      //项目配置中获取
      let projectIcon;
      if (this.webUnitIcon) {
        projectIcon = this.webUnitIcon;
      }

      if (this.colorNew) this.uiColor = this.colorNew;

      this.uiIcon = projectIcon || brandIncon || optionsIcon;

      if(this.unit === null) {
        this.uiIcon = projectIcon || brandIncon || optionsIcon;
      }

      if(this.siteInfo&&this.siteInfo.mapping&&this.siteInfo.mapping.coin_type&&this.siteInfo.mapping.coin_type==='rmb'){
        this.showIcon = false;
        this.showRMB = true;
      } else {
        this.showIcon = true;
      }

      if(typeof this.isShowIcon === 'boolean'){
        this.showIcon = this.isShowIcon;
      }

      //设置显示数字
      this.initPrice();
    },
    methods: {
      initPrice(){
        if(this.price === undefined
          || this.price === '' ||
          this.price === null ||
          (this.largeZero && this.price < 0)
        ) {
          this.show = false;
          return;
        }

        //设置显示数字
        if (this.isOld) this.uiPrice = this.price;
        else {
          let price = this.price;
          if(this.$xdUniHelper.checkVarType(price) === 'string') {
            price = Number(price);
          }

          this.uiPrice = this.$xdUniHelper.divisionFloatNumber(price, 100);
          if(this.fixedNum !== null) {
            this.uiPrice = this.uiPrice.toFixed(this.fixedNum);
          }
        }
        this.show = true;
      }
    }
  }
</script>

<style scoped lang="less">
  .xd-unit {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &__show {
      align-items: center;
      align-content: center;
    }

    &__price {
      margin-right: var(--unit-style-margin-r);
      font-weight: normal;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      & > view:first-child {
        font-size: 24rpx;
      }
    }

    &__image {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      align-content: flex-end;
    }

  }
</style>
