<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-09-15 16:36:46
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-09-20 14:43:48
 * @FilePath: \yuan-asset-module-browser\src\views\collection\components\yaRow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
   <el-row class="ya-row" v-if="column">
      <template v-for="item in column" :key="item.key">
        <el-col class="ya-col" :span="item.col || 8">
          <div class="ya-sum" v-if="item.summarizeLabel">{{ item.summarizeLabel }}</div>
          <template v-else>
            <div class="ya-col-left">{{ item.label }}</div>
            <div class="ya-col-right">
              <template v-if="item.slotName">
                <slot :name="item.slotName" :item="item"></slot>
              </template>
              <template v-else>
                <div class="ya-col-content">
                  <img v-if="item.img" src="../../../assets/image/icon-hand.png" alt="">
                  <yaTooltip placement="top" trigger="hover" :enterable="false" :hide-after="0" :content="item.value"
                    v-if="item.value">
                    <span :class="item.key">{{ item.value }}</span>
                  </yaTooltip>
                  <template v-else>-</template>
                </div>
              </template>
            </div>
          </template>
        </el-col>
      </template>
    </el-row>
</template>
<script lang="ts" setup>
const {column}=defineProps({
  column:Array
})
</script>
<style lang="scss" scoped>
.ya-row {
  width: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  .ya-col {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  line-height: 20px;
  .ya-sum {
  color: var(--el-overlay-color);
  padding: 14px;
}

  .ya-col-left {
    width: 158px;
    box-sizing: border-box;
    background: rgba(247, 251, 254, 0.96);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    padding: 14px;
    color: var(--el-text-color-regular);
    display: flex;
    align-items: center;
  }

  .ya-col-right {
    color: var(--el-overlay-color);
    padding: 14px;
    display: flex;
    align-items: center;
    flex:1;

    .ya-col-content {
      width: 100%;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      outline: none;

      img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        margin-right: 8px;
        cursor: pointer;
      }
    }
  }
}
}
</style>