<!-- 
  TODO 客户业务 / 客户账单列表
 -->
<template>
  <el-main class="customer-bill">
    <!-- 搜索栏 -->
    <el-form
      ref="customerBillFormRef"
      :model="customerBillParams"
      label-width="80px"
      :inline="true"
    >
      <el-form-item
        prop="customerId"
        class="customer-bill-search"
      >
        <BaseSelect
          v-model:modelValue="customerBillParams.customerId"
          :clearable="true"
          :options="customertList"
          placeholder="客户"
        />
      </el-form-item>
      <el-form-item
        prop="isInterceptCustomers"
        class="isInterceptCustomers-search"
      >
        <BaseSelect
          v-model:modelValue="customerBillParams.isInterceptCustomers"
          :options="customerBillState.isInterceptCustomersList"
          :clearable="true"
          :filterable="false"
          placeholder="是否拦截"
        />
      </el-form-item>
      <el-form-item
        prop="accountPeriod"
        class="customer-type-search"
      >
        <BaseSelect
          v-model:modelValue="customerBillParams.orgId"
          :options="branchCompanyCustomers"
          :clearable="true"
          placeholder="分公司"
        />
      </el-form-item>
      <el-form-item
        prop="salesmanId"
        class="customer-type-search"
      >
        <BaseSelect
          v-model:modelValue="customerBillParams.salesmanId"
          :options="getSalesmanUsesList"
          :clearable="true"
          placeholder="业务员"
        />
      </el-form-item>
      <el-form-item
        prop="accountPeriod"
        class="type2-search"
      >
        <BaseSelect
          v-model:modelValue="customerBillParams.accountPeriod"
          :options="accountPeriodTypeList"
          :clearable="true"
          placeholder="账期类型"
        />
      </el-form-item>
      <el-form-item
        prop="status"
        class="type2-search"
      >
        <BaseSelect
          v-model:modelValue="customerBillParams.status"
          :options="customerBillState.statusList"
          :clearable="true"
          :filterable="false"
          placeholder="状态"
        />
      </el-form-item>
      <el-form-item
        prop="dateType"
        class="date2-search"
      >
        <BaseSelect
          v-model:modelValue="customerBillParams.dateType"
          :options="customerBillState.dateTypeList"
          placeholder="日期类型"
        />
      </el-form-item>
      <el-form-item
        prop="beginDate"
        class="customer-billdate-search"
      >
        <el-date-picker
          v-model="customerBillState.dateArr"
          type="daterange"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
          @change="changeDate"
        />
      </el-form-item>
      <el-form-item
        prop="currencyCode"
        class="type2-search"
      >
        <BaseSelect
          v-model:modelValue="customerBillParams.currencyCode"
          :options="currencyList"
          :clearable="true"
          placeholder="币种"
        />
      </el-form-item>
      <el-form-item
        prop="haveExpenditure"
        class="customer-checkbox-search"
      >
        <el-checkbox
          v-model="customerBillParams.haveExpenditure"
          label="消费记录"
          size="large"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          v-permission="['sys:customerBill:list']"
          :icon="Search"
          :loading="customerBillState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          v-permission="['sys:customerBill:list']"
          :loading="customerBillState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:customerBill:list']"
          plain
          type="success"
          :loading="customerBillReportLoading"
          :icon="Tickets"
          @click="summaryBtn"
        >
          汇总
        </el-button>
        <el-button
          v-permission="['sys:customerBill:summaryDownload']"
          plain
          type="success"
          :loading="customerBillReportLoading"
          :icon="Download"
          @click="reportDownloadBtn"
        >
          报表下载
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="customerBillGridOptions"
      ref="customerBillTableRef"
    >
      <template #isInterceptCustomers="{ row }">
        <el-tag :type="row.isInterceptCustomers ? 'danger' : ''">
          {{ row.isInterceptCustomers ? '是' : '否' }}
        </el-tag>
      </template>
      <template #periodBeginDate="{ row }">
        <div>起始（>）：{{ row.periodBeginDate }}</div>
        <div>结束（&lt;=）：{{ row.periodEndDate }}</div>
      </template>
      <template #currencyList="{ row }">
        <vxe-table
          :show-header="false"
          :min-height="0"
          border
          :data="row.customerBillCurrencyCodeDetailDtoList"
        >
          <vxe-column
            field="currencyCode"
            :width="80"
            title="币种"
            show-overflow
          />
          <vxe-column
            field="openingBalance"
            title="期初余额"
            :width="90"
          />
          <vxe-column
            field="payment"
            title="本期付款"
            :width="100"
          />
          <vxe-column
            field="income"
            title="本期收入"
            :width="100"
          />
          <vxe-column
            field="expenditure"
            title="本期支出"
            :width="100"
          />
          <vxe-column
            field="balance"
            title="期末余额"
            :width="100"
          />
          <vxe-column
            field="statusName"
            title="状态"
            :width="80"
          />
        </vxe-table>
      </template>
      <template #actions="{ row }">
        <el-button
          type="primary"
          size="small"
          @click="hanleGoDetail(row)"
        >
          明细
        </el-button>
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="customerBillParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="customerBillParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="customerBillParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 汇总 -->
  <CustomerBillSummary ref="summaryShowRef" />
</template>
<script lang="ts" setup name="customerBill">
import { Search, RefreshRight, Download, Tickets } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { useCustomerBill } from "@/composables/accountPeriod/useCustomerBill";
import { useCustomerBillModel } from "@/composables/accountPeriod/useCustomerBillModel";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import CustomerBillSummary from './customerBillSummary.vue';

const { customerBillTableRef, customerBillGridOptions } =
  useCustomerBillModel();
// 初始化表格高度
useInitTableHeight(customerBillGridOptions);
const {
  customerBillFormRef,
  customerBillParams,
  customerBillState,
  customertList,
  accountPeriodTypeList,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  changeDate,
  hanleGoDetail,
  getSalesmanUsesList,
  branchCompanyCustomers,
  reportDownloadBtn,
  customerBillReportLoading,
  summaryBtn,
  currencyList,
  summaryShowRef
} = useCustomerBill(customerBillGridOptions, customerBillTableRef);
</script>
<style lang="scss" scoped>
.customer-bill {
  .customer-bill-search {
    width: 123px;
    margin-right: 10px;
  }
  .customer-type-search {
    width: 114px;
    margin-right: 10px;
  }

  .date2-search {
    width: 122px;
    margin-right: 10px;
  }

  .type2-search {
    width: 85px;
    margin-right: 10px;
  }
  .isInterceptCustomers-search {
    width: 100px;
    margin-right: 10px;
  }
  .customer-billdate-search {
    width: 215px;
    margin-right: 10px; 
  }
  .customer-checkbox-search {
    margin-right: 10px; 
  }
}
</style>
