<template>
  <div class="question-type">
    <el-cascader
      v-if="isChild"
      v-model="typeArr"
      :options="questionTypeOption"
      :show-all-levels="false"
      :props="{ expandTrigger: 'hover' }"
      @change="handleChange"
    />
    <span v-else style="width: 100px"></span>
    <div class="intelligent-recognition" @click="showRecognition"><SvgIcon icon-class="copy" :size="14" />智能识别</div>
    <SvgIcon v-if="isChild" class-name="pointer" icon-class="delete" :size="14" @click="$emit('deleteQuestion')" />
    <div v-else class="save-tip">{{ saveDate }} 已自动保存</div>

    <IntelligentRecognition
      :type="type[type.length - 1]"
      :visible.sync="dialogVisible"
      @recognition="handleRecognition"
    />
  </div>
</template>

<script>
import { questionTypeOption } from '@/views/exercise_questions/data/questionType';

import IntelligentRecognition from './IntelligentRecognition.vue';

export default {
  name: 'QuestionHeader',
  components: {
    IntelligentRecognition,
  },
  inject: ['curSaveDate', 'recognition', 'updateCurQuestionType'],
  props: {
    type: {
      type: Array,
      default: () => ['base', 'select'],
    },
    isChild: {
      type: Boolean,
      default: false,
    },
    questionTypeOption: {
      type: Array,
      default: () => questionTypeOption,
    },
  },
  data() {
    return {
      dialogVisible: false, // 智能识别弹窗
      typeArr: this.type,
    };
  },
  computed: {
    saveDate() {
      return this.curSaveDate();
    },
  },
  watch: {
    type(val) {
      this.typeArr = val;
    },
  },
  methods: {
    handleChange(val) {
      if (this.isChild) {
        return this.$emit('updateCurQuestionType', val);
      }
      this.updateCurQuestionType(val);
    },

    // 处理智能识别
    handleRecognition(text) {
      if (this.isChild) {
        return this.$emit('recognition', text);
      }
      this.recognition(text);
    },

    showRecognition() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.question-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 4px 8px;
  background-color: #fff;
  border: $border;
  border-bottom-width: 0;
  border-radius: 8px 8px 0 0;

  .el-cascader {
    width: 110px;

    :deep .el-input__inner {
      background-color: #fff;
      border-color: #fff;
    }
  }

  .intelligent-recognition {
    display: flex;
    column-gap: 8px;
    align-items: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
  }

  .save-tip {
    font-size: 12px;
    color: #858585;
  }
}
</style>

<style lang="scss">
.el-popper.el-cascader__dropdown {
  .el-cascader-node.in-active-path {
    background-color: $fill-color;
  }

  .el-cascader-node.is-active {
    color: $main-color;
    background-color: #e8f3ff;
  }
}
</style>
