<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">{{optionTitle}}老师上课质量调查问卷</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg q-px-md text-grey-6">{{optionTitle}}老师上课质量调查问卷</div>
        <div class="row wrap" style="margin-bottom:10px;">
          <div class="col-12">
            <div style="float:left;">{{saveObj.StudentName}} 评价的老师：</div>
            <div style="text-decoration:underline;"> {{saveObj.TeacherName}}</div>
          </div>
        </div>
        <template v-if="data&&data.length>0">
          <div v-for="(item,index) in data">
            <div>{{index+1}}、{{item.Title}}</div>
            <div class="row wrap">
              <div class="col-12">
                <template v-if="item.SurveyType === 1">
                  <q-rating v-model="item.ScoreNum" size="1.5em" icon="thumb_up" min="1" readonly />
                  <span class="ratestyle" v-if="item.ScoreNum==5">非常满意</span>
                  <span class="ratestyle" v-if="item.ScoreNum==4">满意</span>
                  <span class="ratestyle" v-if="item.ScoreNum==3">感觉一般</span>
                  <span class="ratestyle" v-if="item.ScoreNum==2">不满意</span>
                  <span class="ratestyle" v-if="item.ScoreNum==1">非常不满意</span>
                </template>
                <template v-if="item.SurveyType === 2">
                  <div class="q-gutter-sm">
                    <q-list>
                      <q-radio v-for="(radio, rIndex) in item.SurveyOptionsList" :key="rIndex" disable
                        v-model="item.ScoreNum" :label="radio.OptionsName" :val="radio.ID" />
                    </q-list>
                  </div>
                </template>
                <template v-if="item.SurveyType === 3">
                  <div class="q-gutter-sm">
                    <q-list>
                      <q-checkbox v-for="(radio, rIndex) in item.SurveyOptionsList" disable :key="rIndex"
                        v-model="item.CheckInfo" :val="radio.ID" :label="radio.OptionsName" />
                    </q-list>
                  </div>
                </template>
                <template v-if="item.SurveyType === 4">
                  <q-field label="" stack-label>
                    <template v-slot:control>
                      <div class="self-center full-width no-outline" tabindex="0">{{item.TextContent}}</div>
                    </template>
                  </q-field>

                  <!-- <q-input type="textarea" :rows="2" v-model="item.TextContent" disable>
                  </q-input> -->
                </template>
              </div>
            </div>
          </div>
        </template>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="关闭" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    queryGuestSurvey
  } from '../../api/common/common'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        data: [],
        optionTitle: "",
      }
    },
    created() {

    },
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.ID > 0) {
          queryGuestSurvey({
            SurveyID: this.saveObj.ID
          }).then(res => {
            this.data = res.Data.surverList;
            this.optionTitle = res.Data.Title;
          })
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
    },
  }

</script>
