<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="applyName">
        <el-input v-model="queryParams.applyName" placeholder="请输入经办人"/>
      </el-form-item>

      <el-form-item label="申请时间">
        <el-date-picker
          v-model="applyTime"
          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 label="卖方部门" prop="applyDeptId" v-if="tab == '1'">
        <div style="width: 190px">
          <treeselect
            v-model="queryParams.applyDeptId"
            :options="deptOptions"
            :show-count="true"
            placeholder="请选择卖方部门"
          />
        </div>
      </el-form-item>

      <el-form-item label="买方部门" prop="tradeDeptId" v-if="tab == '0'">
        <div style="width: 190px">
          <treeselect
            v-model="queryParams.tradeDeptId"
            :options="deptOptions"
            :show-count="true"
            placeholder="请选择买方部门"
          />
        </div>
      </el-form-item>
      <el-form-item label="交易项目" prop="relationTransactionProjectName">
        <el-input
          v-model="queryParams.relationTransactionProjectName"
          placeholder="请输入交易项目"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="交易细项名称" prop="transactionDetailName">
        <el-input
          v-model="queryParams.transactionDetailName"
          placeholder="请输入交易细项名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />

      </el-form-item>
      <el-form-item label="项目状态" prop="tradeStatus">
        <el-select
          v-model="queryParams.tradeStatus"
          placeholder="请选择项目状态"
          clearable
          size="small"
        >
          <el-option
            v-for="item in transactionProjectStatus"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </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>

    <el-card class="box-card">
      <div class="outer-div">
        <header class="header">
          <ul class="tab-tilte">
            <li :class="{ active: tab == 0 }" @click="changeTab(0)">
              交易收入
            </li>
            <li :class="{ active: tab == 1 }" @click="changeTab(1)">
              交易支出
            </li>
          </ul>
        </header>

        <div class="tab-content">
          <div v-if="tab == 0" :key="tab">
            <IncomeTableList ref="income" :param="queryParams"/>
          </div>
          <div v-if="tab == 1" :key="tab">
            <ExpensesTableList ref="expenses" :param="queryParams"/>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import IncomeTableList from "../components/IncomeTableList";
  import ExpensesTableList from "../components/ExpensesTableList";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "tradeCalculateStatistics",
    components:{
      IncomeTableList,
      ExpensesTableList,
      Treeselect
    },
    data(){
      return{
        tab: 0,
        queryParams: {
          transactionDetailName: null,
          applyDeptId: null,
          tradeType: null,
          tradeDeptId: null,
          tradeStatus: null,
          createTime: null,
          queryApplyDeptId: null,
          queryTradeDeptId: null,
          relationTransactionProjectName: null,
          createBeginTime: null,
          createEndTime: null,
          applyName: null,
          sortType: "0"
        },
        applyTime: [],
        deptOptions: [],
        transactionProjectStatus: []
      }
    },
    created(){
      this.getTreeselect();
      this.getDicts("t_transaction_project_status").then((response) => {
        this.transactionProjectStatus = response.data;
      });
      this.getCurrentMonthTime();
    },
    methods:{
      changeTab(tabNum){
        this.tab = tabNum;
      },
      getTreeselect() {
        treeselect().then((response) => {
          this.deptOptions = response.data;
        });
      },

      /** 搜索按钮操作 */
      handleQuery() {
        if('0' == this.tab){
          this.$refs.income.getIncomeList();

        }
        if('1' == this.tab){
          this.$refs.expenses.getExpensesList();
        }
      },
      sortChange(){
        this.handleQuery();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.createBeginTime = null;
        this.queryParams.createEndTime = null;
        this.applyTime = [];
        this.queryParams.sortType = '0';
        this.handleQuery();
      },
      //时间切换
      timeChange(value) {
        if (value) {
          this.queryParams.createBeginTime = value[0];
          this.queryParams.createEndTime = value[1];
        }else{
          this.queryParams.createBeginTime = null;
          this.queryParams.createEndTime = null;
        }
      },
      //导出
      handleExport(){
        if('0' == this.tab){
          this.$refs.income.incomeExport();
        }
        if('1' == this.tab){
          this.$refs.expenses.expensesExport();
        }
      },
      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.applyTime = [firstDateStr,lastDateStr];
        this.timeChange(this.applyTime);
      }
    }
  }
</script>

<style scoped lang="scss">
  .outer-div {
    //padding: 24px;
    margin: 0 auto;
  }
  .header {
    height: 47px;
    width: 100%;
    //border-bottom: 1px solid #ebebeb;
    //margin-bottom: 24px;
  }
  ul li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tab-tilte {
    font-family: PingFangSC-Semibold;
    letter-spacing: 0;
    width: 90%;
    padding-left: 0;
  }
  .tab-tilte li {
    float: left;
    font-size: 16px;
    color: #999999;
    // line-height: 53px;
    text-align: center;
    margin-right: 30px;
    cursor: pointer;
  }
  /* 点击对应的标题添加对应的背景颜色 */
  .tab-tilte .active {
    color: #3385ff;
    // border-bottom: 2px solid #3385ff;
  }

  .tab-content{
    height: 450px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }
</style>
