<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">

      <el-form-item label="指定分类" prop="sortType">
        <el-select v-model="queryParams.sortType" placeholder="请选择分类类型" clearable @change="sortChange">
          <el-option label="按部门分类" value="0"/>
          <el-option label="按使用人分类" value="1"/>
        </el-select>

      </el-form-item>

      <el-form-item label="部门" prop="borrowingDeptId">
        <div style="width: 200px">
          <treeselect
            v-model="queryParams.borrowingDeptId"
            :options="deptOptions"
            :show-count="true"
            placeholder="请选择卖方部门"
          />
        </div>
      </el-form-item>

      <el-form-item label="使用人" prop="userIdName">
        <el-input
          v-model="queryParams.userIdName"
          placeholder="请输入使用人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="费用名称" prop="feeName">
        <el-input
          v-model="queryParams.feeName"
          placeholder="请输入费用名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="状态" prop="approvalStatus">
        <el-select
          v-model="queryParams.approvalStatus"
          placeholder="请选择项目状态"
          clearable
          size="small"
        >
          <el-option label="待核算部审批" value="1"/>
          <el-option label="完成" value="2"/>
          <el-option label="驳回" value="3"/>
        </el-select>

      </el-form-item>

      <el-form-item label="申请时间">
        <el-date-picker
          v-model="registrationDate"
          size="small"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeChange"
          style="width: 340px"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-button
      type="warning"
      plain
      icon="el-icon-download"
      size="mini"
      style="margin-bottom: 10px"
      @click="handleExport">
      导出
    </el-button>

    <TableList ref="tableList" :param="queryParams"/>
  </div>
</template>

<script>
  import TableList from "../components/TableList";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "borrowing-calculate-index",
    components:{
      TableList,
      Treeselect
    },
    created(){
      this.getTreeselect();
      this.getCurrentMonthTime();
    },
    data(){
      return{
        queryParams: {
          feeName: null,
          userIdName: null,
          borrowingDeptId: null,
          applicationDescription: null,
          registrationDate: null,
          registrationBeginDate: null,
          registrationEndDate: null,
          approvalStatus: null,
          sortType: '0'
        },
        deptOptions: [],
        registrationDate: []
      }
    },
    methods:{
      /** 搜索按钮操作 */
      handleQuery() {
        this.$refs.tableList.getBorrowingList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.registrationBeginDate = null;
        this.queryParams.registrationEndDate = null;
        this.registrationDate = [];
        this.handleQuery();
      },
      //时间切换
      timeChange(value) {
        if (value) {
          this.queryParams.registrationBeginDate = value[0];
          this.queryParams.registrationEndDate = value[1];
        }else{
          this.queryParams.registrationBeginDate = null;
          this.queryParams.registrationEndDate = null;
        }
      },
      getTreeselect() {
        treeselect().then((response) => {
          this.deptOptions = response.data;
        });
      },
      sortChange(){
        this.handleQuery();
      },
      handleExport(){
        this.$refs.tableList.borrowingExport();
      },
      getCurrentMonthTime(){
        let now = new Date(); // 获取当前日期时间
        let firstDate = new Date(now.getFullYear(), now.getMonth(), 1);
        let lastDate = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
        let firstDateStr = firstDate.toLocaleDateString().replace(/\//g, "-") + " " + firstDate.toTimeString().substr(0, 8);
        let lastDateStr = lastDate.toLocaleDateString().replace(/\//g, "-") + " " + lastDate.toTimeString().substr(0, 8);
        this.registrationDate = [firstDateStr,lastDateStr];
        this.timeChange(this.registrationDate);
      }
    }
  }
</script>

<style scoped>

</style>
