<template>
  <div class="card-container3" ref="cardContainer3" :style="position">
    <slot>
      <div class="card-items title">
        <a-input type="text" placeholder="搜索" v-model="searchValue">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </div>
      <div class="card-items">
        <div class="fields-outer" v-for="item in fieldsData" :key="item.tag">
          <span class="label">{{ item.tag }}</span>
          <div
            class="card-items fields-inner"
            @click="handleSelectedField(field)"
            v-for="field in item.fields"
            :key="field.fieldType"
          >
            <component :is="field.icon"></component>
            <span>{{ field.fieldLabel }}</span>
            <i class="selected-icon">
              <component
                :is="field.fieldType === currentSelected.fieldType ? Check : null"
              ></component>
            </i>
          </div>
        </div>
      </div>
      <!-- <div class="card-items">
        <a-button type="outline">取消</a-button>
        <a-button type="primary">确定</a-button>
      </div> -->
    </slot>
  </div>
</template>
<script setup>
import {
  Drag,
  PreviewOpen,
  PreviewClose,
  More,
  Help,
  User,
  Right,
  TextStyleOne,
  HashtagKey,
  CalendarThirtyTwo,
  Link,
  RadioTwo,
  Check
} from '@icon-park/vue-next'

let props = defineProps({
  position: {
    type: Object,
    default: () => ({
      left: 900,
      top: 200
    })
  },
  fieldTypes: {
    type: Array,
    default: () => []
  },
  editField: {
    type: Object,
    default: () => {}
  }
})

let position = ref({
  left: props.position.left + 'px',
  top: props.position.top + 'px'
})
let emits = defineEmits(['selected']) //选中字段事件
let visible = defineModel('visible', { default: false, type: Boolean })
let cardContainer3 = ref(null)
//被选中字段
let currentSelected = ref(props.editField)
console.log(currentSelected)
//搜索关键字
let searchValue = ref('')

//计算属性,处理当前数据源和搜索
let fieldsData = computed(() => {
  return props.fieldTypes.map((item) => {
    let fields = item.fields.filter((field) => {
      return field.fieldLabel.indexOf(searchValue.value) !== -1
    })
    return {
      tag: item.tag,
      fields
    }
  })
})

//选中类型
const handleSelectedField = (item) => {
  currentSelected.value = item
  emits('selected', currentSelected.value)
}
onUnmounted(() => {
  //   currentSelected.value.fieldType = ''
})

onMounted(() => {
  let rect = cardContainer3.value.getBoundingClientRect()
  console.log(rect)
  let innerHeight = window.innerHeight

  if (rect.bottom > innerHeight) {
    position.value = {
      left: rect.left,
      bottom: 20 + 'px'
    }
  } else {
    position.value = {
      left: props.position.left + 'px',
      top: props.position.top + 'px'
    }
  }
})
</script>
<style lang="scss" scoped>
.card-container3 {
  user-select: none;
  position: fixed;
  background-color: #fff;
  z-index: 999;
  width: 250px;
  box-shadow: 2px 4px 12px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee0e3;
  border-radius: 6px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  //   gap: 10px;
  font-size: 16px;
  font-weight: bolder;
  color: #5e5e5e;
  .card-items {
    border-bottom: 1px solid #dededf;
    padding: 10px;
    &:hover {
      //   background-color: #edeeee;
    }
  }

  .card-items.fields-inner {
    cursor: pointer;
    border: 0;
    padding: 15px 10px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 6fr 1fr;
    gap: 10px;
    border-radius: 6px;

    &:hover {
      background-color: #f5f5f5;
    }
    .selected-icon {
      .i-icon {
        color: #4080ff;
      }
    }
  }
  .fields-outer {
    .label {
      //   font-size: 16px;
      display: inline-block;
      transform: scale(0.8);
    }
  }
  .i-icon {
    cursor: pointer;
    display: grid;
    // grid-template-columns: 1fr;
    align-items: center;
  }

  .arco-btn {
    border-radius: 6px;
    padding: 0 20px;
  }
  .arco-input-wrapper {
    border: 0 !important;
    outline: 0;
  }
}
</style>
