<style>
  .editOrderDrawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #f0f5fb;
    padding: 5px 10px;
    align-items: center;
  }

</style>
<!--高级查询-->
<template>
  <q-dialog v-model="showquery" maximized full-height seamless position="right">
    <q-card style="margin-top:61px;width:500px" class="no-border-radius classinfo_Dialog q-px-md">
      <q-card-section>
        <div class="text-h6">高级查询</div>
      </q-card-section>
      <div class="row q-mb-md">
        <q-input clearable standout="bg-primary text-white" class="col-12" v-model="msg.ClassNo" label="班号"
          maxlength="20" />
      </div>
      <div class="row q-mb-md">
        <q-input clearable standout="bg-primary text-white" class="col-12" v-model="msg.OrderId" label="订单号"
          maxlength="20" />
      </div>
      <div class="row q-mb-md">
        <q-select standout="bg-primary text-white" class="col-12" option-label="EmployeeName" option-value="Id"
          v-model="msg.EnterID" :options="EmployeeList" emit-value use-input map-options label="业务员" clearable
          @filter="filterEmployee">
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                未找到相关数据
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="Sysuser_Date row q-mb-md">
        <q-field filled class="col-12">
           <template v-slot:control>
            <el-date-picker v-model="dateList" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
               range-separator="至"  start-placeholder="开始日期"  end-placeholder="结束日期">
               </el-date-picker>      
          </template>
        </q-field>
      </div>
      <div class="row q-mb-md">
        <q-select standout="bg-primary text-white" v-model="msg.EffectStatus" class="col-12" :options="statusOpts"
          option-label="name" option-value="Id" emit-value map-options label="状态" />
      </div>
      <div class="row q-mb-md">
        <q-select standout="bg-primary text-white" v-model="msg.JoinType" class="col-12" :options="typeEnum"
          option-label="Name" option-value="Id" emit-value map-options label="类型" />
      </div>
      <div class="row q-mb-md">
        <q-select standout="bg-primary text-white" v-model="msg.EarlyWarning" class="col-12" :options="warnEnum"
          option-label="Name" option-value="Id" emit-value map-options label="预警" />
      </div>
      <q-card-section>
        <q-btn color="accent" label="查询" @click="query" style="float:right"></q-btn>
        <q-btn text-color="accent q-mr-md" label="重置" @click="resetForm" style="float:right"></q-btn>
      </q-card-section>
    </q-card>
    <div class="dialog-out-close" @click="closeEditOrder"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>
<script>
  import {
    queryEmployee
  } from '../../api/users/user'; //获取员工
  export default {
    props: {
      typeEnum: {
        type: Array
      },
      warnEnum: {
        type: Array
      },
      saveQuery: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        showquery: true,
        statusOpts: [{
            name: "不限",
            Id: ""
          },
          {
            name: "未生效",
            Id: 0
          },
          {
            name: "正常",
            Id: 1
          },
          {
            name: "退学",
            Id: 2
          },
          {
            name: "申请中",
            Id: 3
          },
          {
            name: "驳回申请",
            Id: 4
          },
          {
            name: "停课",
            Id: 5
          },
          {
            name: "停课申请中",
            Id: 6
          },
          {
            name: "毕业",
            Id: 7
          },
          {
            name: "转班申请中",
            Id: 8
          },
        ],
        msg: {
          ClassNo: "",
          OrderId: 0,
          EnterID: 0,
          EffectStatus: "",
          JoinType: 0,
          OrderTime: "",
          EndOrderTime: "",
          EarlyWarning: 0,
          chooseNum: 0, //选中几项
        },
        EmployeeList: [], //员工列表
        AllemployeeList: [], //所有员工列表
        dateList: [],
      }
    },
    mounted() {
      if (this.saveQuery) {
        this.msg.ClassNo = this.saveQuery.ClassNo
        this.msg.OrderId = this.saveQuery.OrderId
        this.msg.EnterID = this.saveQuery.EnterID
        this.msg.EffectStatus = this.saveQuery.EffectStatus
        this.msg.JoinType = this.saveQuery.JoinType
        this.msg.EarlyWarning = this.saveQuery.EarlyWarning
        this.msg.ClassNo = this.saveQuery.ClassNo
        if(this.saveQuery.OrderTime){
          this.dateList[0] = this.saveQuery.OrderTime
        }
        if(this.saveQuery.EndOrderTime){
          this.dateList[1] = this.saveQuery.EndOrderTime
        }
        this.$forceUpdate()
      }
      this.getEmployee();
    },
    methods: {
      //筛选员工
      filterEmployee(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 = {
          Dept_Id: 0
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
            this.AllemployeeList = res.Data;
            this.EmployeeList.unshift({
              Id: 0,
              EmployeeName: '不限'
            });
          }
        }).catch(() => {})
      },
      //关闭弹窗
      closeEditOrder() {
        this.showquery = false;
        this.$emit('close')
      },
      resetForm() {
        this.msg = {
          ClassNo: "",
          OrderId: 0,
          EnterID: 0,
          EffectStatus: "",
          JoinType: 0,
          OrderTime: "",
          EndOrderTime: "",
          EarlyWarning: 0,
          chooseNum: 0, //选中几项
        }
        this.dateList = []
      },
      query() {
        this.msg.chooseNum = 0
        if (!this.dateList) {
          this.dateList = []
        }
        if (this.dateList.length > 0) {
          this.msg.chooseNum++
          this.msg.OrderTime = this.dateList[0]
          this.msg.EndOrderTime = this.dateList[1]
        } else {
          this.msg.OrderTime = ""
          this.msg.EndOrderTime = ""
        }
        if (this.msg.ClassNo) {
          this.msg.chooseNum++
        }
        if (this.msg.OrderId) {
          this.msg.chooseNum++
        }
        if (this.msg.EnterID) {
          this.msg.chooseNum++
        }
        if (this.msg.EffectStatus >= 0 && this.msg.EffectStatus !== "") {
          this.msg.chooseNum++
        }
        if (this.msg.JoinType) {
          this.msg.chooseNum++
        }
        if (this.msg.EarlyWarning) {
          this.msg.chooseNum++
        }
        this.showquery = false;
        this.$emit("success", this.msg)
      }
    }
  }
</script>