<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">{{objOption.SId==0?'新增校区':'修改校区'}}</div>
      </q-card-section>
      <div class="text-caption q-mb-lg q-px-md text-grey-6">基本资料</div>
      <q-card-section class="q-pt-none">
        <div class="row wrap">
          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.SName" ref="SName"
            class="col-6 q-pr-lg q-pb-lg" label="校区名称" :rules="[val => !!val || '请填写校区名称']" />
          <q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.SAddress" ref="SAddress"
            class="col-6 q-pb-lg" label="校区地址" :rules="[val => !!val || '请填写校区地址']" />
          <q-select class="col-6 q-pb-lg q-pr-lg" clearable filled stack-label use-input input-debounce="0"
            option-value="Id" option-label="EmployeeName" v-model="objOption.ManagerId"
            ref="ManagerId" :options="EmployeeList" label="校区联系人" :dense="false" emit-value map-options
            @filter="filterFn">
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.SLinkTel" ref="SLinkTel"
            class="col-6 q-pb-lg" label="校区联系电话" :rules="[val => !!val || '请填写校区联系电话']" />
          <q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.Remark"
            class="col-6 q-pb-lg q-pr-lg" label="校区备注" />
          <selectTree v-if="DeptList&&DeptList.length>0" :treeData='DeptList' :defaultArray="returnString"
            nodeKey="DeptId" :multiple="false" labelKey="DeptName" childrenKey="ChildList" tipText="上级部门"
            @getChild="getChild" classStr="col-6 q-pb-lg"></selectTree>
          <div class="col-6">
            <q-toggle size="md" label="校区状态" color="primary" :false-value="1" :true-value="0"
              v-model="objOption.Status" />
            <div class="text-grey-6 text-caption">注意：关闭校区后，所有下属教师、学生将无法继续使用系统</div>
          </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="saveSchool" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  //校区相关
  import {
    saveSchool,
    getSchoolInfo
  } from '../../../api/school/index'
  //部门
  import {
    getDeptTree
  } from '../../../api/system/dept'
  //员工
  import {
    queryEmployee
  } from '../../../api/users/user'
  //树形下拉
  import selectTree from '../../../components/common/select-tree'
  export default {
    components: {},
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    components: {
      selectTree
    },
    data() {
      return {
        persistent: true,
        objOption: {
          SId: 0, //校区编号
          SName: "", //校区名称
          SAddress: "", //校区地址
          SLinkTel: "", //校区联系电话
          SDomain: "", //校区域名
          SLogo: "", //校区Logo
          Remark: "", //校区备注
          Status: "0", //校区状态
          Dept_Id: 0, //校区直属上级部门编号
          ManagerId: "", //校区负责人
        },
        model:"",
        optionTitle: "",
        saveLoading: false,
        DeptList: [], //部门列表
        returnString: [], //默认部门数组
        AllemployeeList: [], //所有员工列表
        EmployeeList: [], //搜索后的员工列表
      }
    },
    created() {
      this.getEmployee();
      this.queryDeptTree();
    },
    mounted() {
      this.initObj();
    },
    methods: {
      //初始化对象
      initObj() {
        if (this.saveObj && this.saveObj.SId > 0) {
          getSchoolInfo({
            SId: this.saveObj.SId
          }).then(res => {
            this.objOption.SId = res.Data.SId;
            this.objOption.SName = res.Data.SName;
            this.objOption.SAddress = res.Data.SAddress;
            this.objOption.SLinkTel = res.Data.SLinkTel;
            this.objOption.SDomain = res.Data.SDomain;
            this.objOption.SLogo = res.Data.SLogo;
            this.objOption.Remark = res.Data.Remark;
            this.objOption.Status = res.Data.Status;
            this.objOption.Dept_Id = res.Data.Dept_Id;
            if (res.Data.ManagerId && res.Data.ManagerId > 0) {
              this.objOption.ManagerId = res.Data.ManagerId;
            }
            this.returnString.push(this.objOption.Dept_Id.toString());
          })
        } else {
          this.objOption.SId = 0;
          this.objOption.SName = "";
          this.objOption.SAddress = "";
          this.objOption.SLinkTel = "";
          this.objOption.SDomain = "";
          this.objOption.SLogo = "";
          this.objOption.Remark = "";
          this.objOption.Status = "0";
          this.objOption.Dept_Id = 0;
          this.objOption.ManagerId = "";
        }
        this.persistent = true;
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
          } else {
            const needle = val.toLowerCase()
            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
          }
        })
      },
      //获取员工列表
      getEmployee() {
        var qMsg = {
          EmployeeName: ""
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            if (jsonData && jsonData.length > 0) {
              this.AllemployeeList = JSON.parse(JSON.stringify(jsonData));
              this.EmployeeList = JSON.parse(JSON.stringify(jsonData));
            }
          }
        })
      },
      getChild(deptArray) {
        var tempStr = "";
        if (deptArray && deptArray != '') {
          tempStr = deptArray;
        }
        this.objOption.Dept_Id = tempStr;
      },
      //获取部门结构树
      queryDeptTree() {
        getDeptTree({}).then(res => {
          if (res.Code == 1) {
            this.DeptList = res.Data;
          }
        })
      },
      //保存校区
      saveSchool() {
        this.$refs.SName.validate()
        this.$refs.SAddress.validate()
        this.$refs.SLinkTel.validate()
        if (
          !this.$refs.SName.hasError &&
          !this.$refs.SAddress.hasError &&
          !this.$refs.SLinkTel.hasError
        ) {

          this.saveLoading = true;
          saveSchool(this.objOption).then(res => {
            this.saveLoading = false
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            if (this.objOption.SId == 0) {
              this.msg.pageIndex = 1
            }
            this.$emit("success")
            this.closeSaveForm()
          }).catch(() => {
            this.saveLoading = false
          })
        } else {
          this.saveLoading = false
        }
      },
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
    }
  }

</script>

<style>
  .upload-assiatant-box .q-uploader__list {
    display: none;
  }

  .upload-assiatant-box .q-uploader {
    width: auto;
  }

</style>
