<style scoped>
  .wenjuan_Shuru {
    position: relative;
  }

  .SurverDel {
    position: absolute;
    right: -5px;
    top: -5px;
  }

  .activityStuForm .selectClass {
    width: 1026px;
    border: 1px dashed #E1E1E5;
    padding-top: 12px;
    border-radius: 4px;
    padding: 12px 4px 0 4px;
    margin-top: 5px;
  }

  .activityStuForm .selectClass span {
    display: inline-block;
    background: #F2F5FA;
    padding: 0 10px;
    height: 26px;
    line-height: 26px;
    border-radius: 14px;
    color: #181E33;
    margin-left: 10px;
    margin-bottom: 12px;
    position: relative;
    font-size: 12px;
    cursor: pointer;
  }

  .activityStuForm .selectClass span i {
    position: absolute;
    right: -8px;
    top: -10px;
    display: none;
    color: gray;
    cursor: pointer;
  }

  .activityStuForm .selectClass span:hover i {
    display: block;
  }
</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 500px;max-width:500px;" class="activityStuForm">
      <q-card-section>
        <div class="text-h6">{{addMsg.Id==0?'选择学员':'修改学员'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <q-btn color="accent" size="sm" @click="showClassStu" class="q-mr-md" label="选择学员" v-if="addMsg.Id==0"   />
          <br />
          <div class="selectClass" v-if="addMsg.GuestIdList&&addMsg.GuestIdList.length>0">
            <span v-for="(item,index) in addMsg.GuestIdList" :key="index" style="padding-left:5px;">{{item.GuestName}}
              <i class="iconfont icon-shanchu1" @click="delStudentName(index)" v-if="addMsg.Id==0" ></i>
            </span>
          </div>
        </div>
        <div class="row wrap" style="margin-top:10px;">

          <div class="col-12 q-pb-lg">
            <q-input filled v-model="addMsg.StartTime" mask="####-##-## ##:##:##" ref="StartTime" label="开始时间"
              :rules="[val => !!val || '请选择开始时间']">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="StartTime" transition-show="scale" transition-hide="scale">
                    <div class="q-gutter-md row items-start">
                      <q-date v-model="addMsg.StartTime" mask="YYYY-MM-DD HH:mm:ss" @input="startDate" />
                      <q-time v-model="addMsg.StartTime" format24h mask="YYYY-MM-DD HH:mm:ss" @input="startTime" />
                    </div>
                    <q-btn v-close-popup label="关闭" color="primary" flat style="float:right" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="col-12 q-pb-lg">
            <q-input filled v-model="addMsg.EndTime" mask="####-##-## ##:##:##" ref="EndTime" label="结束时间"
              :rules="[val => !!val || '请选择结束时间']">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="EndTime" transition-show="scale" transition-hide="scale">
                    <div class="q-gutter-md row items-start">
                      <q-date v-model="addMsg.EndTime" mask="YYYY-MM-DD HH:mm:ss" @input="endDate" />
                      <q-time v-model="addMsg.EndTime" format24h mask="YYYY-MM-DD HH:mm:ss" @input="endTime" />
                    </div>
                    <q-btn v-close-popup label="关闭" color="primary" flat style="float:right" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
        </div>
      </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-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveActive" />
      </q-card-actions>
    </q-card>
    <classstutreeForm v-if="isShowClassStu" :sendStudent="sendStudent"  @close="closeClassStuForm"
       @success="getClassStuList">
    </classstutreeForm>
  </q-dialog>
</template>
<script>
  import {
    setActivitySurveyGuest,
    getActivitySurveyGuestModule,
    getAccountStudentList
  } from '../../api/studentmsg/index'
  import classstutreeForm from '../exam/classstutree-form'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      ID: {
        type: String,
        default: null
      }
    },
    components: {
      classstutreeForm,
    },
    data() {
      return {
        persistent: true,
        addMsg: {
          Id: 0, //新增传0
          GuestType: 2, //客户类型(1-小程序用户,2-学员用户)
          GuestIdList: [], //学员编号
          GuestId: '', //学员编号
          StartTime: "", //开始时间
          EndTime: "", //结束时间
          SurveyId: 0 //意见调查表编号
        },
        isShowClassStu: false, //是否显示学员弹窗
        sendStudent: [], //已选择的学员信息
        saveLoading: false,
        studentAccountList: [],
        filterstudentList: [],
      };
    },
    mounted() {
      this.studentAccount();
      this.initObj();
    },
    methods: {
      //选择学员
      showClassStu() {
        this.isShowClassStu = true;
      },
      //刷新页面
      getClassStuList(array) {
        this.addMsg.GuestIdList = [];
        if (array && array.length > 0) {
          array.forEach(item => {
            this.addMsg.GuestIdList.push({
              GuestId: item.Account_Id,
              GuestName: item.Name,
            });
          })
        }
        this.isShowClassStu = false;
      },
      //删除学员
      delStudentName(index) {
        this.addMsg.GuestIdList.splice(index, 1);
      },
      //关闭选择学员弹窗
      closeClassStuForm() {
        this.isShowClassStu = false;
      },
      //初始化表单
      initObj() {
        this.addMsg.SurveyId = this.ID
        if (this.saveObj && this.saveObj.Id > 0) {
          getActivitySurveyGuestModule({
            Id: this.saveObj.Id
          }).then(res => {
            var tempData = res.Data;
            this.addMsg.Id = tempData.Id;
            this.addMsg.GuestId = tempData.GuestId;
            this.addMsg.StartTime = tempData.StartTime;
            this.addMsg.EndTime = tempData.EndTime;
            this.addMsg.GuestIdList = tempData.GuestIdList;
          })
        } else {
          this.addMsg.Id = 0;
          this.addMsg.GuestId = '';
          this.addMsg.StartTime = '';
          this.addMsg.EndTime = '';
          this.addMsg.GuestIdList = [];
        }
      },
      //意见调查开始时间
      startDate(val) {
        this.addMsg.StartTime = val;
      },
      startTime(val) {
        this.addMsg.StartTime = val;
      },
      //意见调查结束时间
      endDate(val) {
        this.addMsg.EndTime = val;
      },
      endTime(val) {
        this.addMsg.EndTime = val;
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit("close");
        this.persistent = false;
      },
      //保存数据
      saveActive() {
        this.$refs.StartTime.validate();
        this.$refs.EndTime.validate();
        setActivitySurveyGuest(this.addMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.$emit('close');
            this.$emit('success');
          } else {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: res.Data.message
            })
          }
        })

      },
      // 学生编号
      studentAccount() {
        getAccountStudentList({}).then(res => {
          if (res.Code == 1) {
            this.studentAccountList = res.Data;
            this.filterstudentList = res.Data;
          }
        })
      },
      //学生筛选
      filterStudentFn(val, update) {
        update(() => {
          if (val === '') {
            this.filterstudentList = JSON.parse(JSON.stringify(this.studentAccountList))
          } else {
            const needle = val.toLowerCase();
            this.filterstudentList = this.studentAccountList.filter(v => v.AccountName.toLowerCase().indexOf(
              needle) > -1)
          }
        })
      },
    }
  };
</script>