<template>
  <div class="auth-item" @click="onClick">
    <div class="auth-item__logo" v-if="config.logo" :class="[config.logo]"></div>
    <div class="auth-item__head">
      <div class="auth-item__name">{{ item.authName }}</div>
      <div class="auth-item__tip" v-if="item.validEnd">{{ item.validEnd | fmtValidEnd }}认证结果将失效，请尽快提交</div>
    </div>
    <div v-if="item.dataStatus === 'authenticated'" class="auth-item__result auth-item__result-finish">
      <template v-if="config.submit">
        <span class="auth-item__status-desc">{{config.status[item.dataStatus]}}</span>
        <span class="auth-item__icon auth-item__icon-arrow-red"></span>
      </template>
      <template v-else>
        <span class="auth-item__icon auth-item__icon-right-red"></span>
        <span class="auth-item__status-desc">{{config.status[item.dataStatus]}}</span>
      </template>
    </div>
    <div v-else class="auth-item__result">
      <span class="auth-item__status-desc">{{config.status[item.dataStatus]}}</span>
      <span v-if="item.dataStatus !== 'authenticating'" class="auth-item__icon auth-item__icon-arrow"></span>
    </div>
  </div>
</template>

<script>
const StatusMap = {
  authenticated: '已认证',
  unauthenticated: '未认证',
  authenticating: '认证中',
  authenticate_fail: '认证失败'
}

const StatusMap_Submit = {
  authenticated: '已提交',
  unauthenticated: '未提交'
}

/**
 * logo: 项目对应图片的 class
 * status: 项目对应的状态映射表
 * submit: 提交后还可以修改，状态后跟箭头表示可以点击
 */
const AuthTypeConfig = {
  zhima: {
    logo: 'auth-item__logo-zhima',
    status: StatusMap
  },
  baseInfo: {
    logo: 'auth-item__logo-base-info',
    status: StatusMap_Submit,
    submit: true
  },
  identityPhoto: {
    logo: 'auth-item__logo-id-photo',
    status: StatusMap_Submit,
    submit: true
  },
  face: {
    logo: 'auth-item__logo-face',
    status: StatusMap
  },
  carrier: {
    logo: 'auth-item__logo-carrier',
    status: StatusMap
  },
  bankCard: {
    logo: 'auth-item__logo-bank-card',
    status: StatusMap_Submit
  },
  identityOCR: { // 身份证 OCR 认证
    logo: 'auth-item__logo-id-photo',
    status: StatusMap
  },
  default: {
    status: StatusMap
  }
}

export default {
  props: {
    item: Object
  },
  computed: {
    config() {
      return AuthTypeConfig[this.item.type] || AuthTypeConfig.default
    }
  },
  methods: {
    onClick() {
      this.$emit('click')
    }
  },
  filters: {
    fmtValidEnd(str) {
      const parts = str.split('-')
      return parts[1] + '月' + parts[2] + '日'
    }
  }
}
</script>

<style lang="less">
.auth-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
  padding: 0 0.6rem;
  height: 1.5rem;
  background-color: #ffffff;

  &__logo {
    height: 0.6rem;
    width: 0.6rem;
    background: center center no-repeat;
    background-size: contain;

    &-zhima {
      background-image: url(./images/logo-zhima.png);
    }
    &-base-info {
      background-image: url(./images/logo-base-info.png);
    }
    &-id-photo {
      background-image: url(./images/logo-id-photo.png);
    }
    &-face {
      background-image: url(./images/logo-face.png);
    }
    &-carrier {
      background-image: url(./images/logo-carrier.png);
    }
    &-bank-card {
      background-image: url(./images/logo-bank-card.png);
    }
  }

  &__head {
    padding-left: 0.15rem;
    flex: 1;
  }

  &__name {
    line-height: 1;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
  }

  &__tip {
    font-size: 12px;
    color: #666666;
    letter-spacing: 0;
    margin-top: 0.1rem;
    margin-right: 0.2rem;
  }

  &__icon {
    background: center center no-repeat;
    background-size: contain;

    &-right {
      width: 0.24rem;
      height: 0.16rem;
      background-image: url(images/icon-right.png);
    }
    &-right-red {
      width: 0.24rem;
      height: 0.16rem;
      background-image: url(images/icon-right-red.png);
    }
    &-arrow {
      width: 0.16rem;
      height: 0.28rem;
      background-image: url(images/icon-arrow.png);
    }
    &-arrow-red {
      width: 0.16rem;
      height: 0.28rem;
      background-image: url(images/icon-arrow-red.png);
    }
  }

  &__result {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #666;
    
    // 元素之间保持适当间距
    span + span {
      margin-left: 0.1rem;
    }
  }

  &__result-finish {
    padding: 0 0.2rem;
    line-height: 1.5;
    border: 1px solid #eb3c27;
    border-radius: 1rem;
    color: #eb3c27;
  }
}
</style>