<template>
  <div class="cardItem">
    <div
      class="status"
      :class="statusMap[itemData.auditStatus] ? statusMap[itemData.auditStatus].cssName : ''"
    >
      {{ statusMap[itemData.auditStatus].text || '' }}
    </div>
    <div class="item phoneNum">
      <div class="desc">办单手机号：</div>
      <div class="info">{{ itemData.mobile | formatPhoneNo }}</div>
    </div>
    <div class="item">
      <div class="desc">礼品卡面值：</div>
      <div class="info">{{ itemData.denomination }}</div>
    </div>
    <div class="item">
      <div class="desc">推广员手机号：</div>
      <div class="info">{{ itemData.promoterMobile | formatPhoneNo }}</div>
    </div>
    <div class="item">
      <div class="desc">办理时间：</div>
      <div class="info">{{ itemData.createdAt }}</div>
    </div>
  </div>
</template>
<script>
export default {
  filters: {
    formatPhoneNo(val) {
      if (val.length === 11) {
        const arr = val.split('');
        let result = '';
        arr.splice(3, 0, ' ');
        arr.splice(8, 0, ' ');
        arr.map(v => (result += v));
        return result;
      }
      return val;
    }
  },
  props: {
    itemData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      no: '13699999997',
      statusMap: {
        1: {
          text: '待审核',
          cssName: 'inReview'
        },
        2: {
          text: '审核拒绝',
          cssName: 'failed'
        },
        3: {
          text: '审核通过',
          cssName: 'success'
        }
      }
    };
  }
};
</script>
<style scoped lang="less">
.cardItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 @padding-md 0 0;
  box-sizing: border-box;
  border-bottom: 1px solid @grey-border;
  padding-bottom: @padding-md;
  position: relative;
  margin-bottom: @padding-lg;
  .status {
    .text-size(14);
    letter-spacing: 0.35px;
    position: absolute;
    top: 1px;
    right: 20px;
    &.inReview {
      color: #337eee;
    }
    &.success {
      color: #2ac79f;
    }
    &.failed {
      color: #ff514d;
    }
  }
  .item {
    display: flex;
    color: @gray-4;
    .text-size(13);
    margin-bottom: @padding-unit - 2;
    &.phoneNum {
      .text-size(16);
      color: @black;
      letter-spacing: 0.37px;
      margin-bottom: @padding-sm;
    }
    .desc {
      width: 106px;
    }
  }
}
</style>
