<template>
  <div class="audit_item flex flex_between">
    <div class="item_left flex">
      <img class="main_img mr15" :src="url" />
      <div class="flex_fit">
        <div class="main_title active">{{title}}</div>
        <div class="main_tip">{{tip}}</div>
      </div>
    </div>
    <div class="pass_item" v-if="pass" @click="showDetail">
      <span>{{status}}</span>
      <img v-if="title != '审核信息'" class="arrow_icon" src="@/assets/authentication/arrow_right.png" />
    </div>
    <div class="uploadBtn" :class="{'activeBtn': currentClass }"
          v-else-if="!pass && buttonHide" @click="uploadHandler">{{buttonTitle}}</div>
  </div>
</template>

<script>
  export default {
    name: "auditItem",
    data() {
      return {
      }
    },
    methods: {
      uploadHandler(){
        if( !this.pass && this.currentClass ) {
          this.$emit('upload')
        }
      },
      showDetail() {
        this.$emit('detail')
      }
    },
    props: {
      buttonHide: {
        type: Boolean,
        default: true
      },
      status: {
        type: String,
        default: '查看'
      },
      title: {
        type: String,
        default: ''
      },
      tip: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: require('@/assets/authentication/aduit_icon1.png')
      },
      pass: {
        type: Boolean,
        default: false
      },
      currentClass: {
        type: Boolean,
        default: false
      },
      buttonTitle: {
        type: String,
        default: '上传'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .audit_item {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    position: relative;
    .item_left {
      flex: 1;
      .main_img {
        width: 36px;
        height: 36px;
      }
      .flex_fit {
        flex: 1;
      }
      .main_title {
        font-size: 17px;
        font-weight: bold;
        line-height: 24px;
        color: #33495E;
      }
      .active {
        color: #33495E;
      }
      .main_tip {
        font-size: 14px;
        font-weight: 500;
        color: #33495E;
        line-height: 20px;
        margin-right: 5px;
      }
    }
    .uploadBtn {
      width: 68px;
      height: 31px;
      background: rgba($color: #5B739D, $alpha: 0.24);
      color: #fff;
      font-size: 13px;
      border-radius: 4px;
      line-height: 31px;
      text-align: center;
    }
    .activeBtn {
      background: #3364B7;
    }
    .pass_item {
      font-size: 13px;
      color: rgba($color: #000, $alpha: 0.59);
      .arrow_icon {
        width: 8px;
        height: 12px;
        vertical-align: sub;
        margin-left: 5px;
      }
    }


  }
</style>
