<!-- 
  TODO 客户业务 / 费用明细-界面
 -->
<template>
  <el-main class="usermoney-detail-list">
    <el-form
      ref="userMoneySumDetailRef"
      class="usermoneysum-form"
      :model="queryUserMoneySumDetailForm"
      inline
    >
      <ExpansionContainer>
        <template #content>
          <el-form-item
            prop="customerId"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.customerId"
              :clearable="true"
              :options="customertList"
              placeholder="客户"
              @change="hanleCustomer"
            />
          </el-form-item>
          <el-form-item
            prop="salesmanId"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.salesmanId"
              :clearable="true"
              class="define-select"
              :options="getSalesmanUsesList"
              placeholder="业务员"
            />
          </el-form-item>
          <el-form-item
            prop="orderIdList"
            class="usermoneysum-search"
          >
            <!-- :visible="dealData.isOrderIdList" -->
            <el-popover
              placement="bottom"
              :width="300"
              @after-enter="afterEnterOrders"
            >
              <div>
                <el-input
                  ref="multiOrdersRef"
                  v-model="dealData.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="dealData.inputOrders"
                  placeholder="单号"
                  @focus="focusOrderId"
                />
                <!-- @click="showOrderIdList" -->
                <!-- @keyup.enter="confirmMultiEnterOrders" -->
              </template>
            </el-popover>
          </el-form-item>
          <el-form-item
            prop="accountPeriod"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.accountPeriod"
              :clearable="true"
              class="define-select"
              :filterable="false"
              :options="accountPeriodTypeList"
              placeholder="账期类型"
            />
          </el-form-item>
          <el-form-item
            prop="productId"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.productId"
              :clearable="true"
              :options="productList"
              placeholder="产品名称"
            />
          </el-form-item>
          <el-form-item
            prop="dateArr"
            class="usermoneysum-search usermoneysum-date-search"
          >
            <el-date-picker
              v-model="queryUserMoneySumDetailForm.dateArr"
              :disabled-date="isSelectDisabled"
              type="daterange"
              :unlink-panels="false"
              format="YYYY-MM-DD hh:mm"
              value-format="YYYY-MM-DD hh:mm"
              popper-class="myDatePicker"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="defaultTime"
              @calendar-change="selectCalendar"
            />
          </el-form-item>
          <el-form-item
            prop="operatingType"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.operatingType"
              :clearable="true"
              :filterable="false"
              :options="getOperatingTypeList"
              placeholder="操作类型"
            />
          </el-form-item>
          <el-form-item
            prop="transactionNumber"
            class="usermoneysum-search"
          >
            <el-input
              v-model="queryUserMoneySumDetailForm.transactionNumber"
              placeholder="交易号"
            />
          </el-form-item>
          <el-form-item
            prop="currencyCode"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.currencyCode"
              :clearable="true"
              :filterable="false"
              :options="currencyList"
              placeholder="币种"
            />
          </el-form-item>
          <el-form-item
            prop="customerType"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.customerType"
              :clearable="true"
              :filterable="false"
              :options="customerTypeList"
              placeholder="费用类型"
            />
          </el-form-item>
          <!-- <el-form-item
            prop="billDate"
            class="usermoneysum-search"
          >
            <div class="define-select">
              <el-date-picker
                v-model="queryUserMoneySumDetailForm.billDate"
                style="width: 100%;"
                value-format="YYYY-MM-DD"
                placeholder="账单时间"
                type="date"
              />
            </div>
          </el-form-item> -->
          <el-form-item
            prop="orgId"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.orgId"
              :clearable="true"
              :filterable="false"
              :options="branchCompanyCustomers"
              placeholder="分公司"
              @change="changeBranchCompanyName"
            />
          </el-form-item>
          <el-form-item
            prop="countryCode"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.countryCode"
              :clearable="true"
              :options="countryList"
              placeholder="国家/地区"
            />
          </el-form-item>
          <el-form-item
            prop="validData"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.validData"
              :clearable="true"
              :filterable="false"
              :options="dealData.validData"
              placeholder="数据"
            />
          </el-form-item>
          <el-form-item
            prop="reportQueryDateType"
            class="usermoneysum-search"
          >
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.reportQueryDateType"
              :clearable="true"
              class="define-select"
              :filterable="false"
              :options="reportQueryDateTypeList"
              placeholder="时间类型"
            />
          </el-form-item>
          <el-form-item class="usermoneysum-search">
            <BaseSelect
              v-model:modelValue="dealData.reportType"
              :clearable="true"
              class="define-select"
              :filterable="false"
              :options="reportModelTypeList"
              placeholder="报表模板"
            />
          </el-form-item>
          <el-form-item class="usermoneysum-search">
            <BaseSelect
              v-model:modelValue="queryUserMoneySumDetailForm.paymentType"
              :clearable="true"
              :options="allPaymentPlatformList"
              placeholder="支付方式"
            />
          </el-form-item>
        </template>
        <template #button>
          <el-button
            v-permission="['sys:userMoneyDetail:list']"
            :icon="Search"
            :loading="dealData.loading"
            @click="searchBtn"
          >
            搜索
          </el-button>
          <el-button
            v-permission="['sys:userMoneyDetail:list']"
            class="reset-btn"
            :icon="RefreshRight"
            :loading="dealData.loading"
            @click="resetBtn"
          >
            重置
          </el-button>
          <el-button
            v-permission="['sys:userMoneyReport:xiKeMoneyReportdownload']"
            type="success"
            :icon="Download"
            plain
            :loading="downLonading"
            @click="exportBillBtn"
          >
            账单导出
          </el-button>
        </template>
      </ExpansionContainer>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="usermoneyGridOptions"
      ref="tableRef"
    >
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="actionOptions"
          @click-change="handleClickChange"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <div class="flex align-center">
      <el-pagination
        v-model:current-page="queryUserMoneySumDetailForm.pageNum"
        :page-sizes="[10, 20, 40, 80, 100]"
        :page-size="queryUserMoneySumDetailForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryUserMoneySumDetailForm.total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
      <div
        v-show="getFeeTotalAmount > 0"
        class="total-num inline-flex align-center"
      >
        <span>总计金额:</span>
        <span class="price">
          {{ getFeeTotalAmount }}
        </span>
        <span>CNY</span>
      </div>
    </div> 
  </el-main>
  <QueryExpenseItemDetail ref="queryExpenseItemDetailRef" />
</template>
<script lang="ts" setup name="userMoneyDetail">
import {
  Search,
  RefreshRight,
  Download
} from "@element-plus/icons-vue";
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import DropDownButtons from '@/components/DropDownButtons/index.vue';
import QueryExpenseItemDetail from '@/views/userMoneySum/QueryExpenseItemDetail.vue';
import { userMoneySumDetailList } from "@/composables/userMoneySumDetail/userMoneySumDetail";
import { userMoneySumDetailSource } from "@/composables/userMoneySumDetail/userMoneySumDetailSource";
import { useTimeRange } from "@/hooks/useTimeRange";
import ExpansionContainer from '@/components/ExpansionContainer/ExpansionContainer.vue';

// 表格数据
const { tableRef, usermoneyGridOptions, VxeBasicTable } = userMoneySumDetailSource(0)
// 基础数据
const {
  queryUserMoneySumDetailForm,
  dealData,
  actionOptions,
  queryExpenseItemDetailRef,
  searchBtn,
  resetBtn,
  sizeChange,
  currentChange,
  exportBillBtn,
  hanleCustomer,
  handleClickChange,
  hanlClearOrderIdList,
  confirmMultiOrders,
  multiOrdersRef,
  focusOrderId,
  afterEnterOrders,
  changeOrders,
  changeBranchCompanyName,
  customertList,
  currencyList,
  customerTypeList,
  getOperatingTypeList,
  branchCompanyCustomers,
  productList,
  countryList,
  reportModelTypeList,
  reportQueryDateTypeList,
  downLonading,
  getSalesmanUsesList,
  accountPeriodTypeList,
  allPaymentPlatformList,
  getFeeTotalAmount
} = userMoneySumDetailList(usermoneyGridOptions)

// daterange 时间范围
const { defaultTime, isSelectDisabled, selectCalendar } = useTimeRange(62)
/**
 *
 * 待处理：
 * 查询条件:
除了输入具体单号，交易号的，其他条件都必须加上时间范围，并且最大时间范围不能超过一个月

账单导出: 除了查询条件的限制，客户编号以及账单时间不能为空
 */ 
</script>
<style lang="scss" scoped>
.usermoney-detail-list {
  .usermoneysum-search {
    width: 162px;
    margin-right: 11px;
  }

  .usermoneysum-date-search {
    width: 334px;
  }

  .usermoneysum-btn {
    margin-right: 10px;

    .usermoneysum-display {
      line-height: 32px;
      margin-bottom: 6px;
    }
  }

  .total-num {
    padding-left: 16px;
    .price {
      padding: 0px 8px;
      color: #67C23A;
    }
  }
}
</style>