<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 400px;max-width:400px;">
      <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="row wrap">
          <q-input filled stack-label maxlength="30" :dense="false" v-model="objOption.Name" ref="Name"
            class="col-12 q-pb-lg" label="名称" :rules="[val => !!val || '请填写名称']" />
        </div>
        <div class="row wrap">
          <q-select class="col-12 q-pb-lg" multiple  @filter="filterCountry" filled stack-label clearable  option-value="ID" option-label="Name"
            v-model="objOption.CountryIdList" :options="CountryList" use-input label="国家编号" :dense="false" emit-value map-options
            />
        </div>
        <div class="row wrap" style="display:none">
            <q-select class="col-12 q-pb-lg" filled stack-label clearable option-value="ID" option-label="Name"
            v-model="objOption.Type" :options="TypeList" label="类型" :dense="false" emit-value map-options />
        </div>
        <div class="row wrap">
          <q-input filled stack-label :dense="false" v-model="objOption.Num" ref="Num"
            class="col-12 q-pb-lg" label="排序" @keyup.native="checkInteger(objOption,'Num')" />
        </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="saveStage" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    queryCountryList
  } from '../../api/common/common'
  import {
    GetStudyabroadTypeList,
    SetStudyabroadType,
    GetStudyabroadType
  } from '../../api/system/index'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        saveLoading: false,
        objOption: {
          Id: 0,
          Name: '', //留学就业类型名称
          Type: 1, //类型(1-留学，2-就业)
          Num:'', //排序
          CountryId:'', //国家编号
          CountryIdList:[],//国家编号数组
        },
        CountryList:[], //国家下拉
        allCountryList:[],
        optionTitle: "",
        TypeList:[], //下拉类型
        typeMsg:{
            Name:"",
            Type:1,
            CountryId:0
        }
      }
    },
    mounted() {
      this.getCountryList();
      this.initObj();
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.Id > 0) {
          this.objOption.Id = this.saveObj.Id;
          GetStudyabroadType({
            Id: this.saveObj.Id
          }).then(res => {
            this.objOption.Id = res.Data.Id;
            this.objOption.Name = res.Data.Name;
            this.objOption.Type = res.Data.Type;
            this.objOption.Num = res.Data.Num;
            this.objOption.CountryId = res.Data.CountryId;
            this.objOption.CountryIdList=res.Data.CountryIdList;
          })
          this.optionTitle = "修改类型"
        } else {
          this.optionTitle = "新增类型"
          this.objOption.Id = 0;
          this.objOption.Name = '';
          this.objOption.Type = 1;
          this.objOption.Num = '';
          this.objOption.CountryId = '';
          this.objOption.CountryIdList=[];
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
      },
      //获取国家列表
      getCountryList() {
        queryCountryList({}).then(res => {
          if (res.Code == 1) {
            this.CountryList = res.Data;
            this.allCountryList = res.Data;
          }
        })
      },
      filterCountry(val, update, abort){
        update(() => {
          this.CountryList = this.allCountryList.filter(
            v => v.Name.indexOf(val) > -1
          );
        });
      },
      //获取留学就业类型
      getTypeList(CountryId){
        this.typeMsg.CountryId = CountryId;
        GetStudyabroadTypeList(this.typeMsg).then(res => {
          if (res.Code == 1) {

          }
        });
      },
      //保存菜单
      saveStage() {
        this.$refs.Name.validate();
        if (!this.$refs.Name.hasError) {
          this.saveLoading = true
          SetStudyabroadType(this.objOption).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.closeSaveForm()
            }
          })
        }
      }
    }
  }

</script>
