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

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

  .childConfig {
    border: 1px dashed #d1d1d1;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
  }

  .SubChild {
    position: absolute;
    right: 0;
    top: 0;
  }

</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 600px;max-width:600px;">
      <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">
          <div class="col-12 q-pb-lg">
            <q-input filled v-model="addMsg.TypeName" ref="TypeName" label="标题"></q-input>
          </div>
          <div class="q-pb-lg">
            <q-btn size="10px" @click="addChild()" round color="primary" icon="iconfont icon-img_haha" />
          </div>
        </div>
        <div v-for="(item,index) in addMsg.SubtypeList" class="row wrap childConfig" :key="index">
          <q-btn size="10px" @click="delChild(item,index)" class="SubChild" round color="red"
            icon="iconfont icon-guanbi1" />
          <div class="col-12 q-pr-lg q-pb-lg">
            <q-input filled v-model="item.SubTypeName" ref="SubTypeName" label="标题"></q-input>
          </div>
          <div class="q-pb-lg">
            <q-btn size="10px" @click="addSun(index)" round color="primary" icon="iconfont icon-img_haha" />
          </div>
          <div class="row wrap" style="position:relative;" v-for="(subItem,subIndex) in item.OptionList" :key="subIndex">
            <div class="col-4 q-pr-lg q-pb-lg">
              <q-input filled v-model="subItem.LevelTitle" dense ref="SubTypeName" label="标题"></q-input>
            </div>
            <div class="col-4 q-pr-lg q-pb-lg">
              <q-input filled v-model="subItem.LevelDesc" dense ref="LevelDesc" label="描述"></q-input>
            </div>
            <div class="col-4 q-pr-lg q-pb-lg">
              <q-input filled v-model="subItem.LevelScore" dense ref="LevelScore" label="分数"></q-input>
            </div>
            <q-btn size="5px" @click="delSun(index,subIndex)" class="SubChild" round color="red"
              icon="iconfont icon-guanbi1" />
          </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="saveConfig" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    SetAssessmentType,
    GetAssessmentType,
    RemoveAssessmentSubtype
  } from '../../api/teacher/index';

  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        addMsg: {
          Id: 0,
          TypeName: "基本素质",
          SubtypeList: []
        },
        saveLoading: false,
      }
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.Id > 0) {
          let obj = {
            Id: this.saveObj.Id
          }
          GetAssessmentType(obj).then(res => {
            if (res.Code == 1) {
              this.addMsg = res.Data;
            }
          })
        } else {
          this.addMsg.Id = 0;
          this.addMsg.TypeName = '';
          this.addMsg.SubtypeList = [];
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //新增子类
      addChild() {
        let obj = {
          Id: 0,
          SubTypeName: "",
          OptionList: []
        };
        this.addMsg.SubtypeList.push(obj);
      },
      //新增孙类
      addSun(index) {
        let obj = {
          LevelTitle: "",
          LevelDesc: "",
          LevelScore: ''
        };
        this.addMsg.SubtypeList[index].OptionList.push(obj);
      },
      //保存数据
      saveConfig() {
        this.saveLoading = true;
        SetAssessmentType(this.addMsg).then(res => {
          this.saveLoading = false;
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.$emit('success');
            this.$emit('close');
          }
        })
      },
      //删除子类
      delChild(obj, index) {
        if (obj.Id > 0) {
          let msg = {
            Id:obj.Id
          }
          RemoveAssessmentSubtype(msg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '数据删除成功！',
                position: 'top'
              })
              this.addMsg.SubtypeList.splice(index, 1);
            }
          })
        }
      },
      //删除孙类
      delSun(index1, index2) {
        this.addMsg.SubtypeList[index1].OptionList.splice(index2, 1);
      }
    }
  }

</script>
