<template>
  <!-- 卡片信息列表 -->
  <ul v-if="cardInfos && cardInfos.length" class="__card-infos">
    <li v-for="info in cardInfos" :key="info['label']" class="__card-info-item">
      <span>{{ info['label'] }}：</span>
      <span class="__card-info-content">
        {{ cardInfo.infos[info['name']] }}
      </span>
    </li>
  </ul>

  <!-- 描述信息 -->
  <div class="__card-desc text-line-3">{{ cardInfo.desc }}</div>

  <!-- 卡片数据列表 -->
  <div v-if="cardNumbers?.length" class="__card-numbers">
    <el-row :gutter="10">
      <el-col
        v-for="(info, index) in cardNumbers"
        :key="index"
        :span="24 / cardNumbers.length"
      >
        <div class="__common-card-info">
          <common-icon
            v-if="info?.['icon']"
            class="__card-icon"
            :name="info?.['icon'] || ''"
            :color="info?.['color'] || ''"
          ></common-icon>
          <span class="__info-text">{{ info['label'] || '-' }}</span>
        </div>
        <div class="__card-number">
          {{ cardInfo?.[info?.['name']] || '-' }}
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- 卡片按键列表 -->
  <div v-if="btns && btns.length" class="__card-btns">
    <el-row v-if="btns.length <= 3" :gutter="10">
      <el-col
        v-for="(btn, index) in btns"
        :key="index"
        class="__card-btn"
        :span="24 / btns.length"
      >
        <div class="__common-card-btn" @click.stop="btn['onClick'](cardInfo)">
          <common-icon
            v-if="btn?.['icon']"
            class="__card-icon"
            :name="btn?.['icon'] || ''"
            :color="btn?.['color'] || ''"
          ></common-icon>
          <span>{{ btn['label'] }}</span>
        </div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row v-else :gutter="10">
      <el-col v-for="btn in btns.slice(0, 2)" :key="btn.name" :span="8">
        <div class="__common-card-btn" @click.stop="btn['onClick'](cardInfo)">
          <common-icon
            v-if="btn?.['icon']"
            class="__card-icon"
            :name="btn?.['icon'] || ''"
            :color="btn?.['color'] || ''"
          ></common-icon>
          <span>{{ btn['label'] }}</span>
        </div>
      </el-col>

      <el-col :span="8" @click.stop="clickCommond">
        <el-dropdown trigger="hover" @command="handleCommand">
          <div class="__common-card-btn">
            <common-icon
              class="__card-icon"
              name="common-gengduo"
              :size="16"
            ></common-icon>
            <span style="color: #7b93a7">更多</span>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="btn in btns.slice(2)" :key="btn.name">
                <el-dropdown-item :command="btn.name">
                  {{ btn.label }}
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// const emits = defineEmits(['handleCommand']);
const props = defineProps({
  infos: {
    type: Array<any>,
    default: () => []
  },
  btns: {
    type: Array<any>,
    default: () => []
  },
  cardInfo: {
    type: Object,
    default: () => {}
  },
  cardInfos: {
    type: Array<any>,
    default: () => []
  },
  cardNumbers: {
    type: Array<any>,
    default: () => []
  }
});

function clickCommond() {}

// commond选择
function handleCommand(commond: any) {
  props.btns.forEach((item) => {
    if (item.name === commond) {
      item.onClick(props.cardInfo);
    }
  });
  // emits('handleCommand', { commond, card: props.cardInfo });
}
</script>

<style scoped lang="scss">
.__card-infos {
  margin-top: 16px;
  color: #455a74;
  font-size: 12px;
  .__card-info-item {
    line-height: 16px;
    margin-bottom: 8px;
  }
  .__card-info-content {
    color: #2d3e53;
  }
}
.__card-desc {
  line-height: 16px;
  font-size: 12px;
  color: #455a74;
  margin-bottom: 16px;
}
.__card-numbers {
  color: #7b93a7;
  text-align: center;
  margin-top: 16px;
  .__card-number {
    margin-top: 8px;
    color: #2d3e53;
    font-size: 14px;
  }
}
.__card-btns {
  color: #7b93a7;
  text-align: center;
  margin-top: 16px;
  .__card-btn {
    position: relative;
    &:not(:last-child):after {
      content: '';
      position: absolute;
      top: 0px;
      right: 1px;
      height: 16px;
      width: 1px;
      background-color: #ebebeb;
    }
  }
  .__common-card-info {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7b93a7;
    cursor: pointer;
    .__card-icon {
      margin-right: 17px;
    }
  }
}
.__common-card-btn {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b93a7;
  cursor: pointer;
  .__card-icon {
    margin-right: 17px;
  }
}
.__info-text {
  text-align: center;
}
</style>