<template>
  <section class='sjtj-account' :style="{ 'width': props.width + 'px', 'margin-bottom': props.mb }"
    v-for="(item, index) in props.info" :key="index">
    <section class="box-top"
      :style="{ background: props.background || '#DBF4EA', 'border-radius': props.isShowBottom ? '10px 10px 0 0' : '10px', 'align-items': props.align, 'height': props.height }"
      :key="index">
      <img v-if="item.icon" :src="getImgUrl(item.icon)">
      <section class="right">
        <section class="title-top">
          <span class="sjtj-title">{{ item.title }}</span>
          <template v-if="props.isShowTip">
            <el-popover placement="top-start" :title="item.title" :width="200" trigger="hover"
              :content="item.content || '暂无内容'">
              <template #reference>
                <el-icon :size="20" color="#21B97E">
                  <Warning />
                </el-icon>
              </template>
            </el-popover>
          </template>
        </section>
        <p :style="{ 'margin-top': item.mt ? item.mt : '10px' }">{{ filtterNum(item.num) }}</p>
      </section>
    </section>
    <section class="box-bottom" v-if="props.isShowBottom && item?.bottomList?.length">
      <section v-for="(i, k) in item.bottomList" :key="k">{{ i.lable }}{{ i.num >= 0 ? i.num : '' }}</section>
    </section>
  </section>
</template>
<script setup>
import { onMounted } from "vue";
import { getImgUrl } from "@/utils/tools.js"
const props = defineProps({
  //背景颜色
  background: {
    type: String,
    default: '#DBF4EA'
  },
  isShowTip: {
    type: Boolean,
    default: true
  },
  isShowBottom: {
    type: Boolean,
    default: true
  },
  info: {
    type: Array,
    default: () => [],
  },
  width: {
    type: Number,
    default: 280
  },
  mb: {
    type: String,
    default: '0px'
  },
  align: {
    type: String,
    default: 'flex-start'
  },
  height: {
    type: String,
    default: '87px'
  },
});
const filtterNum = num => {
  return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
onMounted(() => {

})
</script>

<style lang="scss" scoped>
.sjtj-account {
  color: #000;
  margin-right: 12px;
  // padding: 10px 20px;

  .box-top {
    height: 87px;
    // min-width: 200px;
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    border-radius: 10px 10px 0 0;

    >img {
      width: 60px;
      height: 60px;
    }

    .right {
      margin-left: 10px;
      flex: 1;

      .title-top {
        display: flex;
        align-items: center;

        .sjtj-title {
          margin-right: 4px;
          font-size: 14px;
          color: #071428;
        }
      }

      >p {
        font-size: 30px;
        color: #071428;
        margin: 0;
        margin-top: 10px;
      }
    }
  }

  .box-bottom {
    width: 100%;
    height: 36px;
    padding: 10px 20px 15px 15px;
    box-sizing: border-box;
    display: flex;
    border-radius: 0 0 10px 10px;
    background-color: rgba(33, 185, 126, 0.2);
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: #21b97e;
    font-size: 14px;
  }
}
</style>
