<template>
  <div class="body_edit">
    <el-tabs v-model="activeName">
      <el-tab-pane label="问卷详情" name="questionnaire">
        <el-form ref="form" :rules="rules" class="questionnaireForm" :model="questionnaireForm" label-width="100px">
          <el-form-item label="问卷名称：" prop="name">
            <el-input v-model="questionnaireForm.name" />
          </el-form-item>
          <el-form-item class="editBottomItem">
            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="问卷题库" name="question" :disabled="queId ? false : true">
        <el-row :gutter="20" style="padding-top: 20px">
          <el-col :span="12">
            <Question
              v-if="queId"
              ref="Question"
              :que-id="queId"
              @handleAddQuestion="questionId = ''"
              @handleCloseQuestion="questionId = ''"
              @handleEditQuestion="handleEditQuestion"
              @setQuestionTotal="setQuestionTotal"
            />
          </el-col>
          <el-col :span="12">
            <QuestionEdit
              v-if="queId"
              :total="total"
              :question-id="questionId"
              :que-id="queId"
              @handleRefreshQuestion="handleRefreshQuestion"
              @handleEditQuestion="handleEditQuestion"
            />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { saveQuestionnaire, UpdateQuestionnaire, getQuestionnaireDetail } from '@/api/questionnaire'
import Question from '@/components/Question/index.vue'
import QuestionEdit from '@/components/Question/edit.vue'
export default {
  components: {
    Question,
    QuestionEdit
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: '请输入问卷名称', trigger: 'blur' }]
      },
      questionnaireForm: {
        name: undefined
      },
      queId: undefined,
      activeName: 'questionnaire',
      questionId: '',
      total: 0
    }
  },
  watch: {
    '$route.query.id': {
      handler(val) {
        if (val) {
          // 有值代表是编辑状态 查询详情  没有值就是新增
          this.queId = val
          getQuestionnaireDetail(val).then((res) => {
            this.questionnaireForm = res.data
          })
        }
      },
      immediate: true // 页面加载时就启动
    }
  },
  methods: {
    onCancel() {
      this.$router.go(-1)
    },
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.queId) {
            const data = { ...this.questionnaireForm }
            UpdateQuestionnaire(data, this.queId).then((res) => {
              this.$message('修改成功')
              this.$router.go(-1)
            })
          } else {
            saveQuestionnaire(this.questionnaireForm).then((res) => {
              this.$message('保存成功')
              this.$router.replace({
                name: 'questionnaireEdit',
                query: { id: res.data.queId }
              })
            })
          }
        } else {
          return false
        }
      })
    },
    handleEditQuestion(val) {
      this.questionId = val
    },
    handleRefreshQuestion() {
      this.$refs.Question.onSearch()
    },
    setQuestionTotal(val) {
      this.total = Number(val)
    }
  }
}
</script>
<style scoped>
.questionnaireForm {
  width: 700px;
}
.editBottomItem > div {
  margin: 0 !important;
  text-align: center;
}
</style>