<template>
  <div
    class="card-container2"
    :style="{ left: props.position.left + 'px', top: props.position.top + 'px' }"
  >
    <slot>
      <div class="card-items title">
        <span class="label">标题</span>
        <a-input type="text" v-model="title"></a-input>
      </div>
      <div class="field-item">
        <span class="label">字段类型</span>
        <div class="card-inner field-item-inner">
          <div class="card-inner__item">
            <component :is="editField.icon"></component>
            <span class="field-name">{{ editField.fieldLabel }}</span>
            <Right></Right>
          </div>
        </div>
      </div>
      <div class="card-items tag" v-if="editField.fieldType === 'tag'">
        <tag v-model:currentTag="editField.options"></tag>
      </div>
      <div class="card-items last">
        <a-button type="outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确定</a-button>
      </div>
    </slot>
  </div>
</template>
<script setup lang="jsx">
import { Drag, Right } from '@icon-park/vue-next'
import Tag from '../card2Option/tag.vue'
let visible = defineModel('visible', { default: true })
let editField = defineModel('editField', { default: () => {} })

let props = defineProps({
  position: {
    type: Object,
    default: () => ({
      left: 500,
      top: 500
    })
  }
})

// 编辑的字段标题
let title = ref(props.editField?.title)
//侦听编辑字段变化
watch(
  () => props.editField,
  (newVal) => {
    console.log(newVal)
    title.value = newVal.title
  }
)
let emits = defineEmits(['cancel', 'confirm'])

//点击确定
let handleConfirm = () => {
  visible.value = false
  emits('confirm', title.value)
}
//点击取消
let handleCancel = () => {
  visible.value = false
  emits('cancel')
}
</script>
<style lang="scss" scoped>
.card-container2 {
  user-select: none;
  position: fixed;
  background-color: #fff;
  z-index: 999;
  width: 300px;
  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: 15px;
    &:hover {
      //   background-color: #edeeee;
    }
  }
  & > .card-items:last-child {
    border-bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-self: end;
    gap: 10px;
  }
  .drag-handle {
    cursor: pointer;
  }
  .field-item {
    padding: 10px;
    border-bottom: 1px solid #dededf;
    display: grid;
    grid-template-rows: 1fr 1fr;
    .label {
      display: flex;
      align-items: center;
    }
    .card-inner__item {
      cursor: pointer;
      &:hover {
        background-color: #edeeee;
      }
    }
  }
  .i-icon {
    cursor: pointer;
    display: grid;
    // grid-template-columns: 1fr;
    align-items: center;
  }
  .card-items.title {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
  }
  .card-inner {
    border: 1px solid #dee0e3;
    border-radius: 6px;
    .card-inner__item {
      display: grid;
      grid-template-columns: 1fr 8fr 1fr;
      padding: 10px;
    }
  }
  .arco-btn {
    border-radius: 6px;
    padding: 0 20px;
  }
}
</style>
