<template>
  <div class="base-info" v-if="data">
    <div class="info-icon" v-if="data.ability_logo">
      <img :src="data.ability_logo" />
    </div>
    <div class="info-detail">
      <h3>
        <span>{{ data.ability_name }}</span>
        <span class="openness" v-if="data.openness_name != ''">{{ data.openness_name }}</span>
      </h3>
      <p>{{ data.synopsis }}</p>
      <ul>
        <li class="text-clip">
          <bg-icon icon="#bg-ic-layers" />
          <span>业务类型：</span>
          <span>{{ data.business_type_name }}</span>
        </li>
        <li class="text-clip">
          <bg-icon icon="#bg-ic-user" />
          <span>联系人：&emsp;</span>
          <span>{{ data.contact_person }}</span>
        </li>
        <li class="text-clip">
          <bg-icon icon="#bg-ic-time" />
          <span>发布时间：&emsp;&emsp;</span>
          <span>{{ data.created_time }}</span>
        </li>
        <li class="text-clip">
          <bg-icon icon="#bg-ic-layout-4" />
          <span>业务领域：</span>
          <span>{{ data.sectors_name }}</span>
        </li>
        <li class="text-clip">
          <bg-icon icon="#bg-ic-phone-call" />
          <span>联系电话：</span>
          <span>{{ data.contact_phone }}</span>
        </li>
        <li class="text-clip">
          <bg-icon icon="#bg-ic-time" />
          <span>最后更新时间：</span>
          <span>{{ data.updated_time }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseInfo",
  props: {
    data: {
      type: Object,
      default: () => null,
    },
  },
};
</script>

<style lang="scss" scoped>
.base-info {
  padding: 24px;
  background-color: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
  border-radius: 6px;
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  > .info-icon {
    flex: 0 0 144px;
    height: 144px;
    background-color: #f5f6fa;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  > .info-detail {
    flex: 1;
    > h3 {
      font-weight: bold;
      font-size: 16px;
      line-height: 32px;
      color: #202531;
      .openness {
        margin-left: 10px;
        display: inline-block;
        border: 1px solid #9ad5c8;
        background-color: #f1f9f7;
        border-radius: 3px;
        font-size: 12px;
        line-height: 1;
        padding: 3px 6px;
        color: #429e8a;
        font-weight: normal;
      }
    }

    > p {
      font-size: 14px;
      line-height: 20px;
      color: #202531;
    }

    > ul {
      padding: 16px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      background-color: #f5f6fa;
      border-radius: 4px;
      overflow: hidden;
      margin-top: 16px;

      > li {
        width: 30%;
        margin-right: 16px;

        > .bg-icon {
          margin-right: 8px;
        }

        > span {
          font-size: 14px;
          line-height: 34px;
          color: #616f94;

          > :nth-child(2) {
            color: #202531;
          }
        }
      }
    }
  }
}
</style>