<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增问卷' : '编辑问卷'"
      :form="form" :rules='rules' :hasIscheck="true" @mysubmit="mysubmit">
      <template v-slot:step>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold;display:none">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content">
            <el-steps :active="active" finish-status="success" simple>
              <el-step title="问卷信息"></el-step>
              <el-step title="问题信息"></el-step>
            </el-steps>
          </div>
        </div>
      </template>
      <template v-slot:course_id v-if="active===0">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>课程：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.course_id" @change="changeCourse" placeholder="请选择课程" clearable style="width: 100%;">
              <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:course_content_id v-if="active===0">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>课表：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.course_content_id" placeholder="请选择课表" clearable style="width: 100%;">
              <el-option v-for="item in courseContentList" :key="item.id" :label="item.theme" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:title v-if="active===0">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>问卷标题：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.title" placeholder="请输入问卷标题" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:desc v-if="active===0">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>问卷描述：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.desc" placeholder="请输入问卷描述" clearable style="width: 100%;"></el-input>

          </div>
        </div>
      </template>
      <template v-slot:type_id v-if="active===0">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>问卷类型：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.type_id" placeholder="请选择问卷类型" clearable style="width: 100%;">
              <el-option v-for="item in courseEvaluationList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:start_time v-if="active===0">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>开始时间：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 100%;" v-model="form.start_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:end_time v-if="active===0">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>截止时间：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 100%;" v-model="form.end_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss" placeholder="截止时间">
            </el-date-picker>
          </div>
        </div>
      </template>

      <!-- 自定义报名 表单 -->
      <template v-slot:question v-if="active===1">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold;display:none">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>：
          </div>
          <div class="xy-table-item-content" style="min-height: 300px;">
            <div>
              <el-dialog id="template-dialog" :title="'问卷问题'"
                style="position: relative; inset: 0 0 0 0; height: 100%;padding:20px 0" width="90%" top="0px"
                :visible="true" :modal="false" :append-to-body="false" :show-close="false"
                :modal-append-to-body="false">
                <template v-slot:title>
                  <Button v-if="questionList.length>0" ghost type="primary" @click="editForm('editor')">编辑问卷问题</Button>
                  <Button v-else ghost type="primary" @click="editForm('add')">新增问卷问题</Button>
                </template>
                <el-form style="min-height: 300px;display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 4%;" label-width="80px"
                  label-position="top" size="small">
                  <el-divider>问卷问题详情</el-divider>
                  <el-form-item style="flex-basis: 45%;" :label="i.name || '问题名称'" :required="
                        i.rule ? !!i.rule.includes('required') : false
                      " v-for="(i, index) in questionList">
                    <formSlotRender :config="i" :index="index"></formSlotRender>
                  </el-form-item>
                </el-form>
              </el-dialog>
            </div>
          </div>
        </div>
      </template>

      <template v-slot:footerContent>
        <Button ghost type="primary" v-if="active===1" @click="active=0">上一步</Button>
        <!-- <Button ghost type="primary" v-if="active===0" @click="next">下一步</Button> -->
        <Button type="primary" ghost @click="checkSubmit" v-if="active===0">保存并下一步</Button>
        <Button type="primary" ghost v-if="active===1" @click="closeSubmit(0)" >保存待发布</Button>
        <Button type="primary" v-if="active===1" @click="closeSubmit(1)">完成并发布</Button>
      </template>


    </xy-dialog>

    <!-- 发布提示 -->
    <el-dialog title="是否确认发布" :visible.sync="showTips" width="30%">
      <div style="padding: 30px;font-size: 24px;text-indent: 2em;">请确认问卷表单无误后再发布。</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTips = false">取 消</el-button>
        <el-button type="primary" @click="saveSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <applyForm ref="applyForm" @refresh="getquestionList"></applyForm>
  </div>
</template>

<script>
  import {
    show,
    save
  } from "@/api/survey/evaluations.js"
  import {
    index
  } from "@/api/course/courseContent.js"
  import {
    index as formIndex
  } from "@/api/survey/index.js";
  import {
    getparameter
  } from "@/api/system/dictionary.js"
  import {
    deepCopy
  } from "@/utils";
  import applyForm from "../components/applyForm.vue";
  import formSlotRender from "@/views/system/components/formSlotRender.vue";
  export default {
    components: {
      applyForm,
      formSlotRender
    },
    data() {
      return {
        isShow: false,
        showTips:false,
        type: 'add',
        active: 0,
        id: '',
        questionLinkIds:{
          course_id:'',
          course_content_id:'',
          course_content_evaluation_id:''
        },
        course_content_id:'',
        course_signs_count: 0,
        courseList:[],
        courseContentList:[],
        courseEvaluationList:[],
        form: {
          step: '', // 控制课程 课表
          course_id:"",
          course_content_id:"",
          title:"",
          desc:'',
          type_id:'',
          start_time:'',
          end_time:'',
          status:0,
          question:''
        },
        rules: {
          title: [{
            required: true,
            message: '请输入问卷标题'
          }],
          id: [{
            required: true,
            message: '请选择课表'
          }],
          // start_time: [{
          //   required: true,
          //   message: '请选择开始时间'
          // }],
          // end_time: [{
          //   required: true,
          //   message: '请选择截止时间'
          // }],
        },
        // 自定义表单
        selectForm: {
          page: 1,
          page_size: 999,
          sort_name: 'sort',
          sort_type: 'ASC'
        },
        questionList: []
      }
    },
    created() {
      this.getEList()
    },
    methods: {
      changeCourse(e) {
        if(e){
          this.filterSurveys(e)
        }

      },
      async getEList(){
        const res = await getparameter({
          number: 'course_content_evaluation_type'
        })
        this.courseEvaluationList = res.detail
      },
      // 获取课表
      async filterSurveys(course_id) {
        const res = await index({
          page:1,
          page_size:999,
          filter:[{
            key:'course_id',
            op:'like',
            value:course_id
          }]
        })
        if(res.data.length<1){
          this.$Message.warning("该课程暂无课表")
          return
        }
        this.courseContentList = res.data
      },
      // 验证form提交规则
      mysubmit(e) {
        if (e) {
          this.submit()
        }
      },
      checkSubmit() {
        this.$refs.dialog.submit(true)
      },
      compareTime(date, sign) {
        let date1 = this.$moment(date)
        let sign1 = this.$moment(sign)
        return sign1.isBefore(date1)
      },
      submit() {
        // 报名截止时间 不能晚于 日程开始时间
        if (this.form.start_time && this.form.end_time) {
          if (this.compareTime(this.form.start_time, this.form.end_time)) {
            this.$Message.warning("截止时间不能晚于开始时间")
            return
          }
        }
        save({
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: '保存问卷成功',
            duration: 2000
          })
          this.id = res.id
          this.questionLinkIds = {
            course_id:res.course_id,
            course_content_id:res.course_content_id,
            course_content_evaluation_id:res.id
          }
          this.$emit('refresh')
          this.active = 1
          // this.active = 1
        })
      },
      // 发布
      saveSubmit(){
        this.form.id = this.id
        this.form.status = 1
        save({
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: '发布成功',
            duration: 2000
          })
          this.showTips = false
          this.$emit('refresh')
          this.isShow = false
        })
      },
      closeSubmit(status) {
        // 发布
        if(status==1){
          if(this.questionList.length<1){
            this.$message({
              type:'warning',
              message:'需要先创建问题列表才可以发布',
              duration:2000
            })
            return
          }
          // 已发布的直接关闭
          if(this.form.status===1){
            this.$emit('refresh')
            this.isShow = false
          }else{
            this.showTips = true
          }
        }else{
          this.form.id = this.id
          this.form.status = 0
          save({
            ...this.form
          }).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功',
              duration: 2000
            })
            this.$emit('refresh')
            this.isShow = false
          })
        }


      },
      getDetail() {
        show({
          id: this.id,
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.filterSurveys(this.form.course_id)
          this.form.status = res.status ? res.status : 0
          this.questionLinkIds = {
            course_id:res.course_id,
            course_content_id:res.course_content_id,
            course_content_evaluation_id:res.id
          }
        })
      },
      // 下一步
      next() {
        if (this.id) {
          this.active = 1
        } else {
          this.$Message.warning("请先保存问卷信息")
        }
      },
      // 获取自定义表单列表
      async getquestionList() {
        const res = await formIndex({
          filter: [{
            key: 'course_content_evaluation_id',
            op: 'eq',
            value: this.id
          }],
          ...this.selectForm
        })
        this.questionList = res.data
      },
      // 打开自定义表单
      editForm(type, id) {
        // this.$refs.applyForm.questionList = deepCopy(this.questionList)
        // this.$refs.applyForm.course_content_id = this.id
        // this.$refs.applyForm.course_signs_count = this.course_signs_count
        // this.$refs.applyForm.visible = true
        this.$refs.applyForm.questionLinkIds = this.questionLinkIds
        this.$refs.applyForm.dialogVisible = true
      }


    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
            this.getquestionList()
          }
        } else {
          this.id = ''
          this.course_signs_count = 0
          this.active = 0
          this.questionList = []
          this.courseList = []
          this.courseContentList = []
          this.courseEvaluationList = []
          this.questionLinkIds = {
            course_id:'',
            course_content_id:'',
            course_content_evaluation_id:''
          }
          this.form = {
            step: '', // 控制课程 课表
            course_id:"",
            course_content_id:"",
            title:"",
            desc:'',
            type_id:'',
            start_time:'',
            end_time:'',
            status:0,
            question:''
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .step,
  ::v-deep .question {
    flex-basis: 100%;
  }
  ::v-deep .el-step.is-simple .el-step__head {
    display: flex
  }
</style>
