<template>
  <div class="question-action-container flex align-center">
    <van-icon :name="delSvg" @click="deleteQuestion" size="0.44rem"></van-icon>
    <van-icon
      class-prefix="mobilefont"
      name="setting"
      @click="openQuestionSettingModel"
      class="ml10"
    ></van-icon>
    <van-icon
      class-prefix="mobilefont"
      name="gengduo "
      @click="openQuestionActionModel"
      class="ml10"
    ></van-icon>
  </div>

  <!--  操作项弹窗-->
  <van-action-sheet v-model:show="show" title="">
    <div class="van-action-sheet-title">题目设置</div>
    <van-cell-group
      v-if="![6].includes(activeQuestion.question_type)"
      :border="false"
      class="round-group br12"
    >
      <van-cell
        v-if="![6].includes(activeQuestion.question_type)"
        title="此题必答"
        :border="false"
        label-align="left"
      >
        <template #right-icon>
          <van-switch
            v-model="activeQuestion.config.is_required"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveSettings"
          ></van-switch>
        </template>
      </van-cell>
      <van-cell
        v-if="[1, 2].includes(activeQuestion.question_type)"
        title="选项随机"
        :border="false"
      >
        <template #right-icon>
          <van-switch
            v-model="activeQuestion.config.select_random"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveSettings"
          ></van-switch>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="round-group br12">
      <van-cell title="题前隐藏" :border="false" @click="questionSetting('before')">
        <template #right-icon>
          <span> {{ getSkipTypeText(1) }} <van-icon name="arrow"></van-icon></span>
        </template>
      </van-cell>
      <van-cell title="题后跳转" :border="false" @click="questionSetting('after')">
        <template #right-icon>
          <span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
        </template>
      </van-cell>
    </van-cell-group>
    <!--    设置css样式-->
    <van-cell-group
      v-if="[2, 5, 4, 8, 18, 9, 10].includes(activeQuestion.question_type)"
      class="round-group br12"
    >
      <!--      根据不同题型 展示不同的操作-->
      <!--      多选-->
      <checkbox-question-action
        v-if="activeQuestion.question_type === 2"
        v-model="activeQuestion"
        @save-option="saveSettings"
      ></checkbox-question-action>
      <!--      打分-->
      <rate-question-action
        v-if="activeQuestion.question_type === 5"
        :config="activeQuestion.config"
        @update-config="updateConfig"
      ></rate-question-action>
      <!--       填空-->
      <completion-question-action
        v-if="[4, 8].includes(activeQuestion.question_type)"
        v-model="activeQuestion"
        @save-option="saveSettings"
      ></completion-question-action>

      <field-upload-question-action
        v-if="activeQuestion.question_type === 18"
        v-model="activeQuestion"
        @save-option="saveSettings"
      ></field-upload-question-action>

      <!-- 矩阵题目-->
      <martrix-question-action
        v-if="[8, 9, 10].includes(activeQuestion.question_type)"
        v-model="activeQuestion"
        @save-option="saveSettings"
      ></martrix-question-action>
    </van-cell-group>
  </van-action-sheet>
  <!--  移动 复制-->
  <van-action-sheet
    v-model:show="questionShow"
    title=""
    :actions="actions"
    cancel-text="取消"
    @select="questionMove"
  >
    <!--    <van-cell-group :border="false" class="ml10">-->
    <!--      <van-cell title="下移题目" :border="false" @click="questionMove('down')"></van-cell>-->
    <!--      <van-cell title="上移题目" :border="false" @click="questionMove('up')"></van-cell>-->
    <!--    </van-cell-group>-->
  </van-action-sheet>

  <!-- 题目操作   题前  题后-->
  <van-popup
    v-model:show="questionBeforeShow"
    :close-on-click-overlay="false"
    title="题前隐藏逻辑"
    label="题前隐藏逻辑"
    position="bottom"
    closeable
    close-icon="close"
    class="popup-bk"
    round
    :style="{ minHeight: '50%', maxHeight: '75%' }"
    @close="saveLogics"
  >
    <div class="mv10">
      <header>
        <strong>{{ skipType === 0 ? '题后跳转逻辑' : '题前隐藏逻辑' }}</strong>
      </header>
      <!--      题前 题后逻辑  本来打算拆成两个  但是 只有最后的处理不一样-->
      <div class="before-or-after">
        <question-before
          v-if="questionBeforeShow"
          :skipType="skipType"
          :activeQuestion="activeQuestion"
          :questionsInfo="questionsInfo"
        ></question-before>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import delSvg from '@/assets/img/del.svg';
import checkboxQuestionAction from './components/QuestionItemAction/CheckboxQuestionAction.vue';
import { showConfirmDialog } from 'vant';
import { toRefs, ref, watch } from 'vue';
import QuestionBefore from '@/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue';
import RateQuestionAction from './components/QuestionItemAction/RateQuestionAction.vue';
import CompletionQuestionAction from '@/views/Design/components/ActionCompoents/components/QuestionItemAction/CompletionQuestionAction.vue';
import FieldUploadQuestionAction from '@/views/Design/components/ActionCompoents/components/QuestionItemAction/FieldUploadQuestionAction.vue';
import MartrixQuestionAction from '@/views/Design/components/ActionCompoents/components/QuestionItemAction/MartrixQuestionAction.vue';
import { v4 as uuidv4 } from 'uuid';
const props = defineProps({
  index: {
    type: Number,
    default: 0
  },
  data: {
    type: Object,
    default: () => {
      // 传递
    }
  },
  questionsInfo: {
    type: Object,
    default: () => {
      // 传递
    }
  },
  questions: {
    type: Array,
    default: () => []
  }
});
const { questionsInfo } = toRefs(props);
const logics = questionsInfo.value.logics;
const questions = ref(props.questions);
const questionIndex = defineModel('questionIndex', {
  type: Number,
  default: 0
});
// emit
const emit = defineEmits(['move', 'copy', 'delete', 'setting', 'logics']);

const saveSettings = () => {
  emit('setting', activeQuestion.value);
};
const saveLogics = () => {
  // 将更新后的 questionsInfo 传递给父组件
  emit('logics', activeQuestion.value);
};

// 当前题目
const activeQuestion = defineModel('data', {
  type: Object,
  default: () => {
    // 传递
  }
});
//  设置更新
const show = ref(false);
const questionShow = ref(false);
const questionBeforeShow = ref(false);
const actions = ref([
  { name: '上移题目', action: 'up' },
  { name: '下移题目', action: 'down' },
  { name: '复制题目', action: 'copy' }
]);
const deleteQuestion = () => {
  showConfirmDialog({
    title: '提示',
    message: '是否确认删除题目？',
    confirmButtonText: '确定'
  })
    .then(() => {
      // on confirm
      const index = questionIndex.value;
      questions.value.splice(questionIndex.value, 1);
      emit('delete', index);
    })
    .catch(() => {
      // on cancel
    });
};
/**
 * @name 监听当前题目是否可以移动
 * @created_date 2025/3/19
 * @description
 **/
watch(
  () => questionIndex.value,
  (newVal) => {
    if (newVal === questions.value.length - 1) {
      actions.value = [
        { name: '上移题目', action: 'up' },
        { name: '下移题目', action: 'down', disabled: true },
        { name: '复制题目', action: 'copy' }
      ];
    }
    if (newVal === 0) {
      actions.value = [
        { name: '上移题目', action: 'up', disabled: true },
        { name: '下移题目', action: 'down' },
        { name: '复制题目', action: 'copy' }
      ];
    }
    if (newVal > 0 && newVal < questions.value.length - 1) {
      actions.value = [
        { name: '上移题目', action: 'up' },
        { name: '下移题目', action: 'down' },
        { name: '复制题目', action: 'copy' }
      ];
    }
  },
  {
    immediate: true
  }
);
// 打开题目弹窗
const openQuestionActionModel = () => {
  show.value = true;
};

const openQuestionSettingModel = () => {
  questionShow.value = true;
};
// 题目上下移动
const questionMove = (action) => {
  if (action.action === 'down') {
    if (questionIndex.value === questions.value.length - 1) {
      return;
    }
    const temp = questions.value[questionIndex.value];
    questions.value.splice(questionIndex.value, 1);
    questions.value.splice(questionIndex.value + 1, 0, temp);
    emit('move', 'down');
    questionIndex.value += 1;
  } else if (action.action === 'up') {
    if (questionIndex.value === 0) {
      actions.value = [
        { name: '上移题目', action: 'up', disabled: true },
        { name: '下移题目', action: 'down' },
        { name: '复制题目', action: 'copy' }
      ];
      questionShow.value = false;
      return;
    }
    const temp = questions.value[questionIndex.value];
    questions.value.splice(questionIndex.value, 1);
    questions.value.splice(questionIndex.value - 1, 0, temp);
    emit('move', 'up');
  } else {
    //   复制 题目  生成新的id   更新最新的 last index
    const temp = JSON.parse(JSON.stringify(questions.value[questionIndex.value]));
    const newQuestion = {
      ...temp,
      title: questionIndex.value + 1,
      id: uuidv4(),
      question_index: questionsInfo.value.survey.last_question_index + 1
    };
    questions.value.splice(questionIndex.value + 1, 0, newQuestion);
    questionsInfo.value.survey.last_question_index += 1;
    emit('copy', newQuestion);
    questionShow.value = false;
  }
};

const skipType = ref(-1);
// 获取题前隐藏  和题后 跳转 文字
const getSkipTypeText = (skipType) => {
  const ls = [];
  logics.map((item) => {
    if (
      item.skip_type === skipType &&
      item.question_index === activeQuestion.value.question_index
    ) {
      ls.push(item);
    }
  });
  let text = '未设置';
  if (ls.length > 0) {
    text = `已配置 (${ls.length})`;
  }
  return text;
};

// 题前 题后逻辑配置

const questionSetting = (type) => {
  switch (type) {
    case 'before':
      questionBeforeShow.value = true;

      break;
    case 'after':
      questionBeforeShow.value = true;
      break;
  }
  skipType.value = type === 'before' ? 1 : 0;
};

const updateConfig = (value) => {
  activeQuestion.value.config = { ...value };
  saveSettings();
};
</script>
<style scoped lang="scss">
.ml10 {
  margin-left: 10px;
}

.mv10 {
  margin: 10px;
}

.before-or-after {
  overflow: auto;
  height: 500px;
}

.y-select {
  min-width: 10vw;

  //max-width: 90vw;
}

.popup-bk {
  background-color: #fff !important;
}

.question-action-container {
  font-size: 20px;

  & .mobilefont {
    font-size: 18px;
  }

  & .van-icon + .van-icon {
    margin-left: 5px;
  }

  & .mobilefont + .mobilefont {
    margin-left: 5px;
  }
}
</style>
