<style scoped>
  .wenjuan_Shuru{
    position:relative;
  }
  .SurverDel{
    position:absolute;
    right:-5px;
    top:-5px;
  }
</style>
<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">{{addMsg.ID==0?'新增问卷调查':'修改问卷调查'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <q-input filled v-model="addMsg.Title" class="col-6 q-pr-lg q-pb-lg" :rules="[val => !!val || '请填写标题']"
            ref="Title" label="标题">
          </q-input>
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.SurveyType"
            :options="platList" label="类型" ref="SurveyType" @input="getPlat()" :rules="[val => !!val || '请选择类型']" class="col-6 q-pb-lg" emit-value map-options />
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.FormType"
            :options="FormTypeList" label="问卷类型" ref="FormType" :rules="[val => !!val || '请选择问卷类型']" class="col-6 q-pb-lg q-pr-lg" emit-value map-options />
          <q-input filled v-model="addMsg.Sort" class="col-6 q-pb-lg" ref="Sort" label="排序" :rules="[val => !!val || '请填写排序']"></q-input>
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.IsShow"
            :options="ShowList" label="是否显示" ref="IsShow" class="col-6 q-pb-lg q-pr-lg" emit-value map-options />
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.IsRequired"
            :options="requireList" label="是否必填" ref="IsRequired" class="col-6 q-pb-lg" emit-value map-options />
          <template v-if="addMsg.SurveyType==2||addMsg.SurveyType==3">
            <div v-for="(item,index) in addMsg.SurveyOptionsList" class="row wrap wenjuan_Shuru" style="width:100%" :key="index">
                <q-input filled v-model="item.OptionsName" class="col-6 q-pb-lg q-pr-lg" :label="'选项'+(index+1)"> </q-input>
                <q-input filled v-model="item.Sort" @keyup.native="checkInteger(item,'Sort')" class="col-6 q-pb-lg" label="排序"> </q-input>
                <q-btn size="8px" class="SurverDel" @click="deleteSurveyType(index)" round color="red"
                    icon="iconfont icon-guanbi1" />
            </div>
            <div style="text-align:right;width:100%;">
                <q-btn label="新增" color="accent q-px-md" style="font-weight:400 !important" @click="addSurver" />
            </div>
          </template>
        </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>
  </q-dialog>
</template>
<script>
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      ID: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        addMsg:{
          ID:0,
          SurveyType:'',
          Title:'',
          Sort:'',
          IsShow:0,
          FormType:'',
          ActivitySurveyId:0,
          SurveyOptionsList:[],
          IsRequired:0
        },
        platList: [],
        dateList: [],
        FormTypeList: [],
        ShowList:[{
            Id:0,
            Name:'是'
        },{
            Id:1,
            Name:'否'
        }],
        requireList:[{
            Id:0,
            Name:'不必填'
        },{
            Id:1,
            Name:'必填'
        }],
        saveLoading: false,
      }
    },
    mounted() {
      this.GetSurveyTypeEnumList();
      this.GetFormTypeEnumEnumList();
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.ID > 0) {
          this.apipostDS("/api/Survey/GetSurvey", {
            SurveyID:this.saveObj.ID
          }, res => {
            this.addMsg = res.data.data;
            this.addMsg.SurveyType = this.addMsg.SurveyType.toString()
            this.addMsg.FormType = this.addMsg.FormType.toString()
          })
        }else{
          this.addMsg.ID = 0;
          this.addMsg.SurveyType = ''
          this.addMsg.Title = '';
          this.addMsg.Sort = '';
          this.addMsg.IsShow = 1;
          this.addMsg.IsRequired = 1;
          this.addMsg.FormType = '';
          this.addMsg.ActivitySurveyId = this.ID;
          this.addMsg.SurveyOptionsList = [];
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      GetSurveyTypeEnumList(){
        this.apipostDS("/api/Survey/GetSurveyTypeEnumList", {}, res => {
          if(res.data.resultCode==1){
            this.platList = res.data.data
          }else {
            this.$q.notify({
                type: 'negative',
                position: "top",
                message: res.data.message
            })
          }
        })
      },
      GetFormTypeEnumEnumList(){
        this.apipostDS("/api/Survey/GetFormTypeEnumEnumList", {}, res => {
          if(res.data.resultCode==1){
            this.FormTypeList = res.data.data
          }else {
            this.$q.notify({
                type: 'negative',
                position: "top",
                message: res.data.message
            })
          }
        })
      },
      //选择类型
      getPlat(){
        if(this.addMsg.SurveyType==2 || this.addMsg.SurveyType==3){
          this.addMsg.SurveyOptionsList= [
            {ID:0,SurveyID:0,OptionsName:'',Sort:0,}
          ]
        }else {
          this.addMsg.SurveyOptionsList=[]
        };
      },
      //新增
      addSurver(){
        this.addMsg.SurveyOptionsList.push({ID:0,SurveyID:0,OptionsName:'',Sort:0,})
      },
      //删除
      deleteSurveyType(index){
        this.addMsg.SurveyOptionsList.splice(index,1);  
      },
      //保存数据
      saveActive() {
        this.$refs.Title.validate();
        this.$refs.SurveyType.validate();
        this.$refs.FormType.validate();
        this.$refs.Sort.validate();
        if (!this.$refs.Title.hasError&&!this.$refs.SurveyType.hasError&&!this.$refs.FormType.hasError&&!this.$refs.Sort.hasError) {
          this.apipostDS("/api/Survey/SetSurvey", this.addMsg, res => {
            if (res.data.resultCode == 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
              })
            }
          })
        }
      }
    }
  }

</script>
