<style>
  .Sysuser_Date .el-range-editor .el-range-input {
    background-color: transparent;
  }

  .Sysuser_Date .el-range-editor.el-input__inner {
    background-color: transparent;
  }

  .syster_qDropdown .q-btn__wrapper {
    padding: 0 3px;
    min-height: 0 !important;
  }
  .receiveNumList .ColorSpan {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
}
.receiveNumList .huangSpan {
    background: #FFE4D5;
    color: #FFA87C;
}

.receiveNumList .greenSpan {
    background: #BEEFF0;
    color: #089bab;
}

.receiveNumList .purpleSpan {
    background: #D7D6FF;
    color: #7B78FF;
}

.receiveNumList .buleSpan {
    background: #D4EAFF;
    color: #73B8FF;
}

.receiveNumList .redSpan {
    background: #FFD6D5;
    color: #FF7874;
}


</style>
<template>
  <div class="page-body receiveNumList">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Name"
            label="资产名称" maxlength="20" />
        </div>
         <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.PropertyNum"
            label="资产编码" maxlength="20" />
        </div>
         <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.SerialNumber"
            label="序列号" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select v-model="msg.EmployeeId" :options="EmployeeList" filled  clearable use-input label="使用人"
            option-label="EmployeeName" option-value="Id" ref="EmployeeName" class="col-6" emit-value
            map-options @input="resetSearch" @filter="filterFn">
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
        
        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="dateListOne" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                 range-separator="至"  start-placeholder="开始日期"  end-placeholder="结束日期">
                 </el-date-picker>       
            </template>
          </q-field>
        </div>
       
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat 
         class="sticky-right-column-table sticky-column-table" separator="none"
        :data="data" :columns="columns" row-key="Id">
 
      <template v-slot:body-cell-PropertyStatus="props">
          <q-td>   
              <span class="commonStyle hoverSpan1"></span>
                <span class="ColorSpan huangSpan" v-if="props.row.PropertyStatus == 1">空</span>
                <span class="ColorSpan greenSpan" v-if="props.row.PropertyStatus == 2">领</span>
                <span class="ColorSpan redSpan" v-if="props.row.PropertyStatus == 3">借</span>
                <span class="ColorSpan buleSpan" v-if="props.row.PropertyStatus == 4">调</span>
                <span class="ColorSpan redSpan" v-if="props.row.PropertyStatus == 10">处</span>
                <span
                  class="ColorSpan purpleSpan"
                  v-if="
                    props.row.PropertyStatus == 5 ||
                      props.row.PropertyStatus == 7 ||
                      props.row.PropertyStatus == 9 ||
                      props.row.PropertyStatus == 6 ||
                      props.row.PropertyStatus == 8
                  "
                  >待</span
                >
            <span class="q-ml-md text-blue cursor-pointer" style="color:#2961FE;margin-left:10px;cursor:pointer;" title="">{{props.row.PropertyStatusName}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-EmName="props">
          <q-td>
            <div>{{props.row.EmName}}</div>
            <div>{{props.row.GetTime}}</div>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
   
    </div>
  </div>
</template>
<script>
  import {
    propertyGetPageList
  } from '../../api/school/index'
  import {
    queryEmployee
  } from '../../api/users/user'; //获取员工
  export default {
    meta: {
      title: "员工管理"
    },
    components: {
  
    },
    data() {
      return {
        currentUrl: "",
        columns: [
          {
            name: 'PropertyStatus',
            required: true,
            label: '资产状态',
            align: 'left',
            field: row => row.PropertyStatus
          },
          {
            name: 'PropertyNum',
            label: '资产编码',
            field: 'PropertyNum',
            align: 'left',
          },
          {
            name: 'Name',
            label: '资产名称',
            field: 'Name',
            align: 'left',
          },
          {
            name: 'CategoryName',
            label: '分类名称',
            field: 'CategoryName',
            align: 'left',
          },
          {
            name: 'BrandName',
            label: '品牌名称',
            field: 'BrandName',
            align: 'left'
          },
          {
            name: 'Money',
            label: '金额',
            align: 'left',
            field: 'Money'
          },
          {
            name: 'BuyDate',
            label: '购置日期',
            field: 'BuyDate',
            align: 'left'
          },
          {
            name: 'UseStatusName',
            label: '使用状态',
            field: 'UseStatusName',
            align: 'left'
          },
          {
            name: 'PropertyModel',
            label: '型号',
            field: 'PropertyModel',
            align: 'left'
          },
          {
            name: 'EmName',
            required: true,
            label: '使用说明',
            align: 'left',
            field: row => row.EmName
          },
          
        ],
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          Name: "",
          PropertyNum: "",
          SerialNumber: "",
          CategoryId: "",
          PropertyStatus: "",
          EmployeeId: "",
          SupplierId: "",
          StartTime: "",
          EndTime: ""
        },
        dateListOne:[],//开始时间
        selected:[],
        isShowEmpInfo: false, //是否显示员工信息
        EmployeeList: [], //员工列表
        AllemployeeList: [], //所有员工列表

      }
    },
    mounted() {
        this.getEmployee();

      
     
    },
    methods: {
      resetSearch() {
        this.msg.pageIndex = 1;
        if(this.msg.Name==null){
            this.msg.Name =''
        }
        if(this.msg.PropertyNum==null){
            this.msg.PropertyNum =''
        }
        if(this.msg.SerialNumber==null){
            this.msg.SerialNumber =''
        }
        this.getManager()
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getManager();
      },
       //筛选员工
      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 = {
          Dept_Id: 0
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
            this.AllemployeeList = res.Data;
          }
        }).catch(() => {})
        if(this.$route.query){
            this.msg.EmployeeId =Number(this.$route.query.id) ;
            this.getManager()
        }
      },
     
      getManager() {
        this.loading = true;
        if (this.dateListOne && this.dateListOne.length > 0) {
          this.msg.StartTime = this.dateListOne[0];
          this.msg.EndTime = this.dateListOne[1];
        } else {
          this.msg.StartEntryTime = '';
          this.msg.EndTime = '';
        }
        
        propertyGetPageList(this.msg).then(res => {
          this.data = res.data.data.pageData;
          this.pageCount = res.data.data.pageCount;
           this.loading = false;
        }).catch(() => {
          this.loading = false;
        })
      },
      getEmpInfoInfo(row){
        
      }
    },
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
