<template>
  <div class="choose-question-container">
    <div
      class="choose-question-context"
      :class="chooseQuestionId === element.id ? 'choose-question-active' : ''"
      @click="chooseItem"
    >
      <slot></slot>
      <!--      题目操作-->
      <van-cell v-if="chooseQuestionId === element.id" class="choose-question-active-container">
        <template #icon>
          <slot name="action" :element="element" :index="index"></slot>
        </template>
        <template #title>{{}}</template>
        <template #right-icon>
          <question-action
            v-model:data="element"
            :questions="questions"
            :questionIndex="index"
          ></question-action>
        </template>
        <!--        <div-->
        <!--          v-for="item in questionAction"-->
        <!--          :key="item.key"-->
        <!--          class=""-->
        <!--          :class="item.class ? item.class : ''"-->
        <!--          @click="itemAction(item)"-->
        <!--        >-->
        <!--          <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>-->
        <!--          <div class="choose-question-active-container-name">-->
        <!--            {{ item.name }}-->
        <!--          </div>-->
        <!--        </div>-->
      </van-cell>
    </div>
  </div>
</template>
<script setup>
import QuestionAction from '@/views/Design/components/ActionCompoents/QuestionAction.vue';
import { ref } from 'vue';
const props = defineProps({
  element: {
    type: Object,
    default: () => {
      // 此方法目前为空，未来可能扩展
    }
  },
  index: {
    type: Number,
    default: 0
  },
  questions: {
    type: Array,
    default: () => []
  },
  chooseQuestionId: {
    type: String,
    default: '0'
  }
});
const element = ref(props.element);

// 选中题目后出现的操作
// const questionAction = ref([
//   {
//     icon: '&#xe630;',
//     name: '编辑',
//     key: 'edit',
//     class: ''
//   },
//   {
//     icon: '&#xe632;',
//     name: '复制',
//     key: 'copy',
//     class: ''
//   },
//   {
//     icon: '&#xe6a0;',
//     name: '移动',
//     key: 'moveUp',
//     class: 'moverQues'
//   },
//   // {
//   //   icon:'',
//   //   name:'下移',
//   //   key:'moveDown',
//   // class:''
//   // },
//   {
//     icon: '&#xe63f;',
//     name: '删除',
//     key: 'delete',
//     class: ''
//   }
// ]);
const emit = defineEmits(['getChooseQuestionId']);

// 选中题目
const chooseItem = () => {
  // 使用从 defineProps 接收的 element 对象
  emit('getChooseQuestionId', props.element);
};

// const itemAction = (item) => {
//   switch (item.key) {
//     case 'edit':
//       // vue router跳转到/edit
//
//       router.push({
//         path: '/design/edit',
//         query: {
//           id: props.element.id
//         }
//       });
//       break;
//     case 'copy':
//       break;
//     case 'moveUp':
//       break;
//     case 'moveDown':
//       break;
//     case 'delete':
//       break;
//   }
// };
</script>
<style scoped lang="scss">
.choose-question-container {
  padding: 5px;

  & .choose-question-context {
    overflow: hidden;
    border-radius: 5px;
  }

  & .choose-question-active {
    outline: 2px solid #70b936;
  }

  & .ml10 {
    margin-left: 10px;
  }

  & .fs20 {
    font-size: 20px;
  }

  & .choose-question-active-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    //margin: 0 20px;
    color: #666;
    font-size: 12px;

    & .choose-question-active-container-icon {
      font-size: 14px;
    }

    & .choose-question-active-container-name {
      font-size: 12px;
    }
  }
}
</style>
