<template>
  <el-dialog :visible.sync="visible" fullscreen :show-close="false" class="survey-dialog">
    <div class="designer-header">
      <div class="header-content">
        <el-input v-model="localSurvey.title" class="survey-title-input" placeholder="问卷标题" />
        <div class="header-actions">
          <el-button type="primary" @click="handleSave">保存</el-button>
          <el-button @click="$emit('close')">关闭</el-button>
        </div>
      </div>
    </div>
    <div class="designer-main">
      <div class="question-palette">
        <div class="palette-title">题型库</div>
        <div class="question-types">
          <el-button v-for="types in questionTypes" :key="types.value" @click="addQuestion(types.value)">{{ types.label }}</el-button>
        </div>
      </div>
      <div class="design-area">
        <div class="survey-form">
          <el-input type="textarea" v-model="localSurvey.description" class="survey-description" placeholder="问卷描述" />
          <div class="questions-container">
            <draggable v-model="localSurvey.questions" handle=".drag-handle" :animation="200">
              <transition-group>
                <div v-for="(q, idx) in localSurvey.questions" :key="q.id" class="question-item">
                  <div class="question-header">
                    <span class="question-number">{{ idx+1 }}</span>
                    <el-input v-model="q.title" placeholder="题目标题" style="flex:1;" />
                    <el-select v-model="q.type" style="width:120px;">
                      <el-option v-for="types in questionTypes" :key="types.value" :label="types.label" :value="types.value" />
                    </el-select>
                    <i class="el-icon-rank drag-handle" style="cursor:move;margin:0 8px;" title="拖动排序"></i>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeQuestion(idx)"></el-button>
                  </div>
                  <div style="padding:16px 24px;">
                    <template v-if="q.type==='single' || q.type==='multi'">
                      <div v-for="(opt, oidx) in q.options" :key="oidx" style="display:flex;align-items:center;margin-bottom:8px;">
                        <el-input v-model="q.options[oidx]" placeholder="选项内容" style="flex:1;" />
                        <el-button icon="el-icon-delete" size="mini" @click="removeOption(q, oidx)" style="margin-left:4px;" v-if="q.options.length>1"></el-button>
                      </div>
                      <el-button type="primary" size="mini" @click="addOption(q)">添加选项</el-button>
                    </template>
                    <template v-else-if="q.type==='text'">
                      <el-input type="textarea" disabled placeholder="文本题，用户可填写内容" />
                    </template>
                    <template v-else-if="q.type==='rate'">
                      <el-rate v-model="q.rateMax" :max="10" show-text text-color="#ff9900" disabled />
                      <div style="font-size:12px;color:#888;">评分题，用户可打分</div>
                    </template>
                  </div>
                </div>
              </transition-group>
            </draggable>
            <el-empty v-if="!localSurvey.questions.length" description="请从左侧添加题目" />
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import draggable from 'vuedraggable';
export default {
  name: 'SurveyCreateDialog',
  components: { draggable },
  props: {
    surveyData: Object
  },
  data() {
    return {
      visible:false,
      course_content_id:'',
      localSurvey: {
        title: '',
        description: '',
        questions: []
      },
      questionTypes: [
        { label: '单选题', value: 'radio' },
        { label: '多选题', value: 'checkbox' },
        { label: '文本题', value: 'text' },
        { label: '评分题', value: 'number' },
        { label: '评分题', value: 'number' }
      ]
    }
  },
  watch: {
    surveyData: {
      handler(val) {
        this.localSurvey = val ? JSON.parse(JSON.stringify(val)) : { title: '', description: '', questions: [] };
      },
      immediate: true
    },
    visible(val) {
      if (!val) this.$emit('close');
    }
  },
  methods: {
    addQuestion(type) {
      const q = { id: Date.now()+Math.random(), title: '', type, options: type==='text'||type==='rate'?[]:['选项1','选项2'], rateMax: 5 };
      this.localSurvey.questions.push(q);
    },
    removeQuestion(idx) {
      this.localSurvey.questions.splice(idx,1);
    },
    addOption(q) {
      q.options.push('新选项');
    },
    removeOption(q, oidx) {
      q.options.splice(oidx,1);
    },
    handleSave() {
      this.$emit('save', JSON.parse(JSON.stringify(this.localSurvey)));
    }
  }
}
</script>
<style scoped>
.survey-dialog >>> .el-dialog__body { padding:0; }
.designer-header { background: #fff; border-bottom: 1px solid #e9ecef; }
.header-content { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; }
.survey-title-input { font-size: 20px; font-weight: 600; border: none; background: transparent; color: #2c3e50; min-width: 300px; }
.designer-main { display: flex; height: calc(100vh - 80px); }
.question-palette { width: 280px; background: #fff; border-right: 1px solid #e9ecef; padding: 20px; overflow-y: auto; }
.palette-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: #2c3e50; }
.question-types { display: flex; flex-direction: column; gap: 8px; }
.design-area { flex: 1; padding: 30px; overflow-y: auto; background: #f8f9fa; }
.survey-form { max-width: 800px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 30px; min-height: 400px; }
.survey-description { width: 100%; border: none; resize: vertical; min-height: 60px; font-size: 14px; color: #6c757d; background: transparent; }
.questions-container { min-height: 200px; }
.question-item { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; margin-bottom: 20px; position: relative; transition: all 0.3s ease; }
.question-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #fff; border-bottom: 1px solid #e9ecef; border-radius: 8px 8px 0 0; }
.question-number { background: #3498db; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; margin-right: 8px; }
.drag-handle { cursor: move; }
</style>
