<!-- TODO 分公司利润表 -->
<template>
  <el-main class="branch-income-statement">
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      :inline="true"
      :model="branchIncomeStatementParams"
    >
      <el-form-item
        prop="customerIdList"
        class="customerId-search"
      >
        <BaseSelect
          v-model:modelValue="branchIncomeStatementParams.customerIdList"
          :clearable="true"
          :multiple="true"
          :collapse-tags="true"
          :leave-out-width="28"
          :options="customertList"
          placeholder="客户"
        />
      </el-form-item>
      <el-form-item
        prop="productId"
        class="income-statement-search"
      >
        <BaseSelect
          v-model:modelValue="branchIncomeStatementParams.productId"
          :clearable="true"
          :options="productList"
          placeholder="产品"
        />
      </el-form-item>
      <el-form-item
        prop="orgId"
        class="income-statement-search"
      >
        <BaseSelect
          v-model:modelValue="branchIncomeStatementParams.orgId"
          :clearable="true"
          :options="branchCompanyCustomers"
          placeholder="分公司"
        />
      </el-form-item>
      <el-form-item
        prop="salesmanId"
        class="income-statement-search"
      >
        <BaseSelect
          v-model:modelValue="branchIncomeStatementParams.salesmanId"
          :clearable="true"
          :options="getSalesmanUsesList"
          placeholder="业务员"
        />
      </el-form-item>
      <el-form-item class="orders-search">
        <el-popover
          placement="bottom"
          :width="340"
          @after-enter="afterEnterOrders"
        >
          <div>
            <el-input
              ref="multiOrdersRef"
              v-model="branchIncomeStatementState.inputMultiOrders"
              :rows="5"
              type="textarea"
              placeholder="请输入单号或以逗号(,)分开，每行一个"
              @change="changeOrders"
            />
            <div class="text-right">
              <el-button
                type="danger"
                link
                @click="hanlClearOrderIdList"
              >
                清除
              </el-button>
              <el-button
                type="success"
                link
                @click="confirmMultiOrders"
              >
                确定
              </el-button>
            </div>
          </div>
          <template #reference>
            <el-input
              v-model="branchIncomeStatementState.inputOrders"
              placeholder="单号"
              @focus="focusOrderId"
            />
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item
        prop="reportQueryDateType"
        class="income-statement-search"
      >
        <BaseSelect
          v-model:modelValue="branchIncomeStatementParams.reportQueryDateType"
          :clearable="true"
          class="define-select"
          :filterable="false"
          :options="reportQueryDateTypeList"
          placeholder="时间类型"
        />
      </el-form-item>
      <el-form-item class="timerArray-search">
        <el-date-picker
          v-model="branchIncomeStatementState.timerArray"
          type="daterange"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
          @change="changeTimerArray"
        />
      </el-form-item>
      <el-form-item
        prop="dataType"
        class="type-search"
      >
        <BaseSelect
          v-model:modelValue="branchIncomeStatementParams.dataType"
          :clearable="true"
          :options="branchIncomeStatementState.dataTypeList"
          placeholder="数据类型"
        />
      </el-form-item>
      <el-form-item
        prop="profitStatus"
        class="type-search"
      >
        <BaseSelect
          v-model:modelValue="branchIncomeStatementParams.profitStatus"
          :clearable="true"
          :options="profitStatusList"
          placeholder="盈利状态"
        />
      </el-form-item>
      <el-form-item class="btns">
        <el-button
          v-permission="['sys:arrears:search']"
          :icon="Search"
          :loading="branchIncomeStatementState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          v-permission="['sys:arrears:search']"
          :loading="branchIncomeStatementState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:arrears:download']"
          :loading="branchIncomeStatementLoading"
          :icon="Download"
          type="success"
          plain
          @click="reportDownloadBtn"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="branchIncomeStatementGridOptions"
      ref="branchIncomeStatementTableRef"
    />
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="branchIncomeStatementParams.pageNum"
      :page-sizes="[20, 40, 80, 100, 200]"
      :page-size="branchIncomeStatementParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="branchIncomeStatementParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
</template>
<script lang="ts" name="branchIncomeStatement" setup>
import { Search, RefreshRight, Download } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import {
  useBranchIncomeStatement,
  useBranchIncomeStatementModel
} from "@/composables/report/useBranchIncomeStatement";
import { VxeBasicTable } from "@/components/VxeTable";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";

const { branchIncomeStatementGridOptions } = useBranchIncomeStatementModel();
// 初始化表格高度
useInitTableHeight(branchIncomeStatementGridOptions);
const {
  searchFormRef,
  branchIncomeStatementParams,
  branchIncomeStatementState,
  branchIncomeStatementLoading,
  changeTimerArray,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  reportDownloadBtn,
  customertList,
  productList,
  branchCompanyCustomers,
  profitStatusList,
  reportQueryDateTypeList,
  getSalesmanUsesList,
  multiOrdersRef,
  hanlClearOrderIdList,
  confirmMultiOrders,
  changeOrders,
  focusOrderId,
  afterEnterOrders
} = useBranchIncomeStatement(branchIncomeStatementGridOptions);
</script>
<style lang="scss" scoped>
.branch-income-statement {
  .income-statement-search {
    width: 125px;
    margin-right: 8px;
  }
  .customerId-search {
    width: 164px;
    margin-right: 8px;
  }
  .orders-search {
    width: 168px;
    margin-right: 8px;
  }
  .timerArray-search {
    width: 224px;
    margin-right: 8px;  
  }
  .type-search {
    width: 106px;
    margin-right: 8px;
  }

  // :deep(.orderInformation) {
  //   background-color: #E2EFDA70;
  // }

  // :deep(.customerIncome) {
  //   background-color: #FCE4D670;
  // }

  // :deep(.branchSettlement) {
  //   background-color: #B4C6E770;
  // }

  // :deep(.branchProfit){
  //   background-color: #FFF2CC70;
  // }
}
</style>
