<template>
  <div class="dis_flex_order_li">
    <div class="list" v-for="(item, index) in list" :key="index">
      <img :src="backFullSrc(item.img)" alt="" />
      <div class="right">
        <h4>{{ item.label }}：</h4>
        <p>
          {{ (item.value || info[item.prop] || 0) | formatPrice }}
          <!-- {{ item.ch || "元" }} -->
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SaasMasterPlatformPictureList",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },

  methods: {
    backFullSrc(name) {
      return require(`@/assets/images/${name}@2x.png`);
    },
  },
};
</script>

<style lang="scss" scoped>
.dis_flex_order_li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  & > .list {
    user-select: none;
    cursor: pointer;
    background-color: rgb(243,249,255);
    padding: 4px;
    width: 170px;
    height: 60px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 10px;
    margin-bottom: 15px;
    & > img {
      margin-left: 10px;
      width: 36px;
      height: 36px;
    }
    & > .right {
      padding-top: 4px;
      flex: 1;
      padding-left: 4px;
      & > h4 {
        color: rgb(85, 85, 85);
        margin: 0;
        font-size: 12px;
        margin-bottom: 4px;
      }
      & > p {
        font-size: 12px;
        color: #000;
        margin: 0;
      }
    }
  }
}
</style>
