<template>
  <div class="main">
      <div class="dataItem" v-for="(item,index) in dataList" :key="index">
          <image class="bgIcon" src="/static/images/commercial/bg_icon.svg"></image>
          <div class="left">
              <image class="icon" :src="item.url"></image>
          </div>
          <div class="right">
              <p class="title">{{item.name}}</p>
              <div class="company">
                  <image class="img" src="/static/images/commercial/shop.svg"></image>
                  <p class="text">{{item.company}}</p>
              </div>
              <div class="time">
                  <image class="img" src="/static/images/commercial/time.svg"></image>
                  <p class="text">{{item.time}}</p>
              </div>
              <div class="label">
                  <div class="labelItem" v-for="(item,index) in item.label" :key="index">{{item}}</div>
              </div>
              <div class="box">
                  <div class="boxItem">
                      <p class="mark">{{item.info[0]}}<text class="unit">分</text></p>
                      <p class="type">吸引力指数</p>
                  </div>
                  <div class="boxItem">
                      <p class="mark">{{item.info[1]}}<text class="unit">分</text></p>
                      <p class="type">业绩评分</p>
                  </div>
                  <div class="boxItem">
                      <p class="mark">{{item.info[2]}}<text class="unit">分</text></p>
                      <p class="type">坪效指数</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: "bandNumber",
    data() {
        return {
            dataList:[]
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                console.log('carDatawatch', value)
                this.dataList = value
            }
        }
    },
}
</script>

<style scoped lang="scss">
.main{
    width: 100%;
    margin-top: 12px;
    .dataItem{
        width: calc(100% - 32px );
        background: #F8F9F9;
        border-radius: 8px;
        margin: 0 auto 12px;
        display: flex;
        padding: 12px;
        position: relative;
        .bgIcon{
            width: 96px;
            height: 96px;
            position: absolute;
            right: -5px;top: 0;
        }
        .left{
            width: 60px;
            height: 60px;
            overflow: hidden;
            border-radius: 5px;
            margin-right: 12px;
            .icon{
                width: 100%;
                height: 100%;
            }
        }
        .right{
            .title{
                font-size: 17px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 24px;
                margin-bottom: 2px;
            }
            .company,.time{
                display: flex;
                align-items: center;
                margin-bottom: 2px;
                .img{
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                }
                .text{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                }
            }
            .label{
                margin-top: 8px;
                width: 100%;
                display: flex;
                flex-flow: wrap;
                .labelItem{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                    padding: 0 4px;
                    background: #EDF0F4;
                    margin-right: 4px;
                    border-radius: 2px;
                }
            }
            .box{
                margin-top: 22px;
                display: flex;
                .boxItem{
                    margin-right: 22px;
                    box-sizing: border-box;
                    padding-left: 5px;
                    .mark{
                        font-size: 18px;
                        font-family: DINAlternate-Bold, DINAlternate;
                        font-weight: bold;
                        color: #160002;
                        line-height: 22px;
                        margin-bottom: 4px;
                        .unit{
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #A69E9F;
                            line-height: 18px;
                            margin-left: 4px;
                        }
                    }
                    .type{
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #786B6C;
                        line-height: 18px;
                    }
                }
            }
        }
  }
}
</style>