<script lang="ts" setup name="List">
import { ref, computed } from "vue";

const props = defineProps({
  listInfo: {
    type: Object,
    default: {},
  },
});

const emits = defineEmits(["itemClick"]);

const selectIndex = ref(0)

const listTitle = computed(() => {
  return props.listInfo.title ?? '';
});
const listData = computed(() => {
  if (props.listInfo.selectedItem) {
    nextTick(() => {
      setSelectList(props.listInfo.selectedItem.value, props.listInfo.selectedItem.field, false)
    })
  }
  return props.listInfo.data ?? '';
});
const field = computed(() => {
  return props.listInfo.field ?? 'label'
})

const setSelectList = (v, fieldName: any = null, isClick: any = true) => {
  let index = listData.value.findIndex(d => d[fieldName || field.value] === v);
  if (index > -1) {
    selectIndex.value = index;
    isClick && emits('itemClick', listData.value[index]);
  }
}

defineExpose({
  selectIndex,
  listData,
  setSelectList
});

const listItemClick = (row, i) => {
  selectIndex.value = i;
  emits('itemClick', row)
}
</script>

<template>
  <div class="list_panel_wrap">
    <div class="list_title" v-if="listTitle">{{ listTitle }}</div>
    <div class="list_panel" v-loading="listInfo.loading" :class="{ full: !listTitle }">
      <div class="list_item" :class="{ active: index == selectIndex }" v-for="(item, index) in listData"
        @click="listItemClick(item, index)">
        <ellipsis-tooltip :content="listInfo.getName ? listInfo.getName(item) : item[field]" class-name="w100f" :refName="'tooltipOver' + item.guid"></ellipsis-tooltip>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list_panel_wrap {

  min-height: 100px;

  // height: 100%;
  // overflow: hidden;
  .list_title {
    line-height: 32px;
    font-size: 12px;
    color: #666;
    font-weight: 400;
    padding: 0 8px;
  }

  .list_panel {
    height: calc(100% - 40px);
    margin-bottom: 8px;
    overflow: hidden auto;

    &.full {
      height: calc(100% - 8px);
    }

    .list_item {
      font-size: 14px;
      color: #666;
      font-weight: 400;
      line-height: 32px;
      padding: 0 8px;
      cursor: default;

      &:hover {
        background: #f5f5f5;
      }

      &.active {
        background: #EBF6F7;
        color: var(--el-color-regular);
      }
    }
  }
}
</style>