<template>
  <el-card shadow="never" class="question">
    <div :class="['question-control',
    {'z-index-9': $parent.question.type != 'imagepicker','is-edit': isEdit}]">
      <slot name="control"></slot>
      <el-button type="warning" @click="startEdit('logic')" size="mini" class="event-bubbling">
        {{ $t('general.btnLogic') }}</el-button>
      <el-button type="info" @click="startEdit('copy')" size="mini" class="event-bubbling">{{ $t('general.btnCopy') }}
      </el-button>
      <el-button type="info" @click="deleteQuestion()" size="mini">{{ $t('general.btnDelete') }}</el-button>
      <el-button type="info" plain @click="startEdit('move')" size="mini" class="event-bubbling">
        {{ $t('general.btnMove') }}</el-button>
      <!-- <el-button type="info" v-if="isFirstQuestion == false" @click="moveQuestion('up')" size="mini"
        class="event-bubbling">{{ $t('general.btnMoveUp') }}</el-button>
      <el-button type="info" v-if="isLastQuestion == false" @click="moveQuestion('down')" size="mini"
        class="event-bubbling">{{ $t('general.btnMoveDown') }}</el-button> -->
      <el-button type="info" @click="startEdit('test')" size="mini" class="event-bubbling" v-if="testFlag">
        {{ $t('general.btnTest') }}</el-button>
    </div>
    <div class="question-main">
      <div class="question-title" v-if="isShowTitle">
        <span v-if="isRequired" class="required-sign">*</span>
        {{questionIdx}} {{title == null || title.trim() == ''? name : title}}
      </div>
      <div class="question-description" v-if="!(question.description == null || question.description.trim() == '')">{{question.description}}</div>
      <div class="question-body">
        <slot>{{ $t('editor.questionBody') }}</slot>
      </div>
    </div>
  </el-card>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { removeTriggers } from '../../utils/utils'
export default {
  props: ['question', 'index', 'pIndex'],
  computed: {
    ...mapGetters(['surveyData', 'isEdit', 'showQuestionNumbers']),
    testFlag: function () {
      return true
    },
    isRequired: function () {
      return this.question.isRequired
    },
    isFirstQuestion: function () {
      return false
    },
    isLastQuestion: function () {
      return false
    },
    isShowTitle: function () {
      return true
    },
    description: function () {
      return ''
    },
    name: function () {
      return ''
    },
    title: function () {
      return this.$t(this.question.title)
    },
    // 获取题目当前位置
    questionIdx: function () {
      if(this.showQuestionNumbers === 'off'){
        return ''
      }
      const pages = this.surveyData.pages
      let lastIndex = 0
      for (let i = 0; i < this.pIndex; i++) {
        const elements = pages[i].elements || []
        lastIndex += elements.length
      }
      return `${lastIndex + this.index + 1}.`
    }
  },
  data: function () {
    return {}
  },
  methods: {
    ...mapMutations(['removeQuestion', 'setQuestionIndex']),
    startEdit (active) {
      this.setQuestionIndex({ index: this.index, active })
    },
    deleteQuestion: function () {
      this.$confirm(this.$t('general.cfmDelQuest2'), this.$t('general.cfmUsual'), {
        confirmButtonText: this.$t('general.btnSure'),
        cancelButtonText: this.$t('general.btnCancel'),
        type: 'warning'
      }).then(() => {
        const pageIndex = this.pIndex
        const questionIndex = this.index
        removeTriggers(this.question, this)
        this.removeQuestion({ pageIndex, questionIndex })
      })
    }
  }
}
</script>
<style scoped>
.question {
  border: none;
  position: relative;
  min-width: 300px;
}
.question /deep/ .el-card__body {
  /* padding-left: 0;
  padding-right: 0; */
  padding: 20px 0;
}
.question .question-control {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: right;
  padding-top: 14px;
  padding-right: 12px;
  box-sizing: border-box;
  display: none;
}
.question .question-control.z-index-9 {
  z-index: 9;
}
.question:hover .question-control.is-edit {
  background: rgba(0, 154, 68, 0.1);
  display: block;
}
.question .question-control /deep/ .el-button--info {
  border-color: #999;
  background-color: #fff;
  color: #333;
}

.question .question-main {
  padding: 0 12px;
}
.question .question-main .question-title {
  font-size: 20px;
  color: #333;
}
.question .question-main .question-description{
  color: #333e48;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px;
  padding-left: 1.8em;
  margin-top: 24px;
}
.question .question-main .question-body{
  margin-top: 22px;
  padding-left: 2em;
}
/* 联动下拉题 嵌套basicQuestion时，不显示内部题目编辑 */
.question /deep/ .question .question-control{
  display: none;
}
</style>
