<template>
  <div class="page-body" style="width: auto;height:150%;">
    <div class="page-content">
      <div class="col-2 q-table__title" style="text-align:center;">{{pageTitle}}调查问卷</div>
      <div v-if="loadingCG">
        <div class="row wrap" style="margin:10px 0px;">
          <div class="col-12" style="text-indent:2em;">亲爱的{{addMsg.StuName}}同学，为了提高班主任老师的课后监督服务质量，请您对班主任老师进行评价。</div>
        </div>
        <div class="row wrap">
          <div class="col-12">
            <q-select filled v-model="addMsg.TeacherId" use-input :dense="false" ref="Teacher_Id" label="班主任老师姓名："
              option-value="TId" option-label="TeacherName" :options="TeacherList" @filter="filterFnTeacher"
              class="col-6 q-pb-lg" emit-value map-options>
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    No results
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </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"
                    style="margin-bottom:15px;margin-top:10px;" />
                  <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>
                      <div v-for="(radio, rIndex) in item.SurveyOptionsList">
                        <q-radio :key="rIndex" v-model="item.ScoreNum" :label="radio.OptionsName" :val="radio.ID" />
                      </div>
                    </q-list>
                  </div>
                </template>
                <template v-if="item.SurveyType === 3">
                  <div class="q-gutter-sm">
                    <q-list>
                      <div v-for="(radio, rIndex) in item.SurveyOptionsList">
                        <q-checkbox :key="rIndex" v-model="item.CheckInfo" :val="radio.ID" :label="radio.OptionsName" />
                      </div>
                    </q-list>
                  </div>
                </template>
                <template v-if="item.SurveyType === 4">
                  <q-input type="textarea" :rows="2" :placeholder="$t('fnc.qsrneirong')" v-model="item.TextContent"
                    style="margin-bottom:15px;">
                  </q-input>
                </template>
              </div>
            </div>
          </div>
        </template>
        <q-card-actions align="center" class="bg-white q-pt-lg">
          <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" @click="setSurveyStudent" />
        </q-card-actions>
      </div>
      <div v-else>
        <div class="row wrap" style="margin:20px 0px;text-align:center; ">
          <div class="col-12">亲爱的{{addMsg.StuName}}同学，感谢您对班主任老师{{addMsg.TeacherName}}的评价。</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    querySurveyShowList,
    setStuEducationSurvey
  } from '../../api/common/common'
  import {
    getTeacherListByGroupId
  } from '../../api/school/index'
  export default {
    meta: {
      title: "问卷调查"
    },
    components: {

    },
    data() {
      return {
        currentUrl: "",
        data: [],
        loading: true,
        loadingCG: true,
        msg: {
          RB_Group_Id: 0,
          MainId: 0,
        },
        TeacherList: [], //关联教师下拉数据
        AllTeacherList: [], //关联教师下拉数据
        pageTitle: "",
        addMsg: {
          TeacherId: 0,
          StuName: "",
          TeacherName: "",
          StudentId: 0,
          SurveyList: [],
          MainId: 0,
        }
      }
    },
    mounted() {
      this.currentUrl = this.$route.path
      if (this.$route.query && this.$route.query.StuId) {
        this.addMsg.StudentId = this.$route.query.StuId
      }
      if (this.$route.query && this.$route.query.Group_Id) {
        this.msg.RB_Group_Id = this.$route.query.Group_Id
      }
      if (this.$route.query && this.$route.query.StuName) {
        this.addMsg.StuName = decodeURIComponent(this.$route.query.StuName)
      }
      if (this.$route.query && this.$route.query.MainId) {
        this.msg.MainId = this.$route.query.MainId;
        this.addMsg.MainId = this.$route.query.MainId;
      }
      this.GetTeacherList();
      this.getSurveyShowList();
    },
    methods: {
      filterFnTeacher(val, update) {
        update(() => {
          if (val === "") {
            this.TeacherList = JSON.parse(JSON.stringify(this.AllTeacherList));
          } else {
            const needle = val.toLowerCase();
            this.TeacherList = this.AllTeacherList.filter(
              (v) => v.TeacherName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //保存菜单
      setSurveyStudent() {
        this.saveLoading = true;
        this.addMsg.SurveyList = [];
        if (this.addMsg.TeacherId === "" || this.addMsg.TeacherId == 0) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择您评价的老师!`
          });
          return;
        }
        let teacherObj = this.AllTeacherList.find(item => item.TId === this.addMsg.TeacherId);
        if (teacherObj != undefined) {
          this.addMsg.TeacherName = teacherObj.TeacherName;
        }
        let showTips = 0;
        this.data.forEach((item, index) => {
          let nowInfo = {
            ID: item.ID,
            SurveyType: item.SurveyType,
            CheckInfo: item.CheckInfo,
            Title: item.Title,
            Sort: item.Sort,
            ScoreNum: item.ScoreNum,
            TextContent: item.TextContent
          };
          this.addMsg.SurveyList.push(nowInfo);
        });
        if (showTips > 0) {
          return;
        }
        setStuEducationSurvey(this.addMsg).then(res => {
          this.saveLoading = false
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: '数据保存成功！',
            position: 'top'
          })
          this.loadingCG = false;
          this.$emit("success")
        }).catch(() => {
          this.saveLoading = false
          this.loadingCG = true;
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherListByGroupId(this.msg).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
            var obj = {
              TeacherName: '请选择',
              TId: 0
            }
            this.TeacherList.unshift(obj);
            this.AllTeacherList = this.TeacherList;
          }
        })
      },
      //获取问卷调查内容
      getSurveyShowList() {
        this.loading = true;
        querySurveyShowList(this.msg).then(res => {
          console.log(res);
          this.loading = false
          this.data = res.Data.subList;
          this.pageTitle = res.Data.Title;
          window.document.title = this.pageTitle;
        }).catch(() => {
          this.loading = false
        })
      },
    }
  }

</script>
<style>
  html {
    font-size: 625%;
    /*100 ÷ 16 × 100% = 625%*/
  }

  @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html {
      font-size: 703%;
    }
  }

  @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html {
      font-size: 732.4%;
    }
  }

  @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html {
      font-size: 750%;
    }
  }

  @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html {
      font-size: 781.25%;
    }
  }

  @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait) {
    html {
      font-size: 808.6%;
    }
  }

  @media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait) {
    html {
      font-size: 843.75%;
    }
  }

</style>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
