<template>
  <div v-if="item" class="logic-assess-item">
    <div
      v-if="item.status"
      class="logic-assess-status"
      :style="{
        background: item.color
      }"
    >
      {{ item.status || '未知' }}
    </div>
    <div class="logic-assess-title">
      <i
        :style="{
          background: item.color || '#ccc'
        }"
      />
      <span>{{ item.title }}</span>
    </div>
    <div class="logic-assess-tips">
      <div class="logic-assess-tip" v-for="(item, index) in item.tips" :key="index">· {{ item }}</div>
    </div>
    <div class="logic-assess-factors">评估要素：{{ item.factors.join('、') }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  }
}
</script>
<style lang="scss" scoped>
.logic-assess-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  padding: 10px;
  .logic-assess-status {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 15px;
    color: #fff;
    background-color: #ccc;
    border-radius: 0 8px 0 8px;
  }
  .logic-assess-title {
    vertical-align: middle;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    i,
    span {
      vertical-align: middle;
    }
    i {
      display: inline-block;
      width: 4px;
      border-radius: 4px;
      height: 14px;
      margin-right: 8px;
    }
  }
  .logic-assess-tips {
    background: #f5f6f8;
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
    .logic-assess-tip {
      color: #595959;
      line-height: 26px;
      font-size: 14px;
      & ~ .logic-assess-tip {
        margin-top: 10px;
      }
    }
  }
  .logic-assess-factors {
    color: #808080;
    font-size: 14px;
    margin: 10px auto;
  }
}
</style>
