<template>
  <div class="box" @click="itemClick(data)">
    <div class="item">
      <rt-icon
        v-if="(!isAmountRank && data.DoneRatioRank === 1) || (isAmountRank && data.DoneRank === 1)"
        name="rt-xrm-first"
        size="40"
        class="icon"
      ></rt-icon>
      <rt-icon
        v-else-if="(!isAmountRank && data.DoneRatioRank === 2) || (isAmountRank && data.DoneRank === 2)"
        name="rt-xrm-second"
        size="40"
        class="icon"
      ></rt-icon>
      <rt-icon
        v-else-if="(!isAmountRank && data.DoneRatioRank === 3) || (isAmountRank && data.DoneRank === 3)"
        name="rt-xrm-third"
        size="40"
        class="icon"
      ></rt-icon>
      <span
        v-else
        style="font-size:19px;font-weight:600;color:#B4BDCF;"
      >{{ isAmountRank ? data.DoneRank : data.DoneRatioRank }}</span>
    </div>
    <div class="item">
      <span class="title">{{ data.AccountIdName }}</span>
      <span
        class="progress"
        :style="{ width: (isAmountRank ? data.ContributionRatio : data.DoneRatio) + '%' }"
      ></span>
      <span class="detail" v-if="showDetail">{{ ownerAndBusiness }}</span>
      <span
        :class="{ 'detail amount-span': isAmountRank && isAmount, 'detail ratio-span': !isAmountRank }"
        v-if="showPeriodYear"
      >同期{{ isAmountRank ? data.sumLastYearAmount : data.yearGrowthRadio | ratio }}</span>
    </div>
    <div class="item">
      <span :class="{ 'amount-span': isAmountRank && isAmount, 'ratio-span': !isAmountRank }">
        <template v-if="isAmount">
          <template v-if="isAmountRank">{{ data.SumDone | money }}</template>
          <template v-else>{{ data.DoneRatio | ratio }}</template>
        </template>
        <template v-else>
          <template v-if="isAmountRank">{{ data.SumDone }}</template>
          <template v-else>{{ data.DoneRatio | ratio }}</template>
        </template>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rtProgressItem',
  props: {
    data: {
      type: Object
    },
    showOwner: {
      type: Boolean,
      default: false
    },
    isAmountRank: {
      type: Boolean,
      default: false
    },
    isAmount: {
      type: Boolean,
      default: true
    },
    //是否显示同期
    showPeriodYear: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    showDetail() {
      return !rt.isNull(this.data.OwnerIdName);
    },
    ownerAndBusiness() {
      return `${this.data.OwnerIdName || ''} ${this.data.BusinessUnitIdName || ''}`;
    }
  },
  methods: {
    itemClick(item) {
      this.$emit('item-click', item);
    }
  },
  filters: {
    ratio: value => value.toFixed(2),
    money: num => {
      num = num.toFixed(2).toString();
      if (rt.isNullOrWhiteSpace(num)) {
        return '0';
      }
      let str = '';
      const index = num.indexOf('.');
      const decimal = index === -1 ? '' : num.substring(index);
      for (let i = num.length - 1, j = 1; i >= 0; i -= 1, j += 1) {
        if (num[i] === '.') {
          str = '';
          continue;
        }
        // 每隔三位加逗号
        if (j % 3 === 0 && i !== 0) {
          str += num[i] + ','; // 加千分位
          continue;
        }
        str += num[i]; // 倒着累计数字
      }
      return (
        str
          .split('')
          .reverse()
          .join('') + decimal
      ); // 字符串 -> 数组 -> 反转 -> 字符串
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  align-items: center;
  .item {
    display: inline-block;
    .icon {
      display: inline-block;
      padding-top: 20px;
    }
  }
  .item:nth-child(1) {
    flex: 1;
    text-align: center;
  }
  .item:nth-child(2) {
    flex: 4.25;
    .title {
      display: block;
      width: 200px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: 14px;
      line-height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #222222;
      padding-bottom: 10px;
    }
    .progress {
      display: block;
      background-color: aqua;
      background-image: linear-gradient(to right, #1e7ff4, #91ecfd);
      border-radius: 5px;
      height: 6px;
      max-width: 100%;
    }
    .detail {
      display: block;
      width: 200px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: 13px;
      line-height: 13px;
      font-size: 13px;
      font-weight: 400;
      color: #888888;
      padding-top: 10px;
    }
  }
  .item:nth-child(3) {
    flex: 2.25;
    text-align: center;
    padding: 0 5px;
  }
  .amount-span:after {
    content: '万元';
    font-size: 10px;
  }
  .ratio-span:after {
    content: '%';
    font-size: 10px;
  }
}
</style>
