<!-- 
    TODO 客户业务 / 费用比较
 -->
<template>
  <el-main class="money-compare-list">
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      :inline="true"
      :model="moneyCompareParams"
      label-width="80px"
    >
      <el-form-item
        prop="customerId"
        class="money-compare-search"
      >
        <BaseSelect
          v-model:modelValue="moneyCompareParams.customerId"
          :clearable="true"
          :options="customertList"
          placeholder="客户"
        />
      </el-form-item>
      <el-form-item
        prop="exceptCustomerIdList"
        class="money-except-search"
      >
        <BaseSelect
          v-model:modelValue="moneyCompareParams.exceptCustomerIdList"
          :clearable="true"
          :multiple="true"
          :leave-out-width="28"
          :collapse-tags="true"
          :options="customertList"
          placeholder="排除客户"
        />
      </el-form-item>
      <el-form-item
        prop="salesmanId"
        class="money-compare-search"
      >
        <BaseSelect
          v-model:modelValue="moneyCompareParams.salesmanId"
          :clearable="true"
          :options="salesmanUsesList"
          placeholder="业务员"
        />
      </el-form-item>
      <el-form-item
        prop="productId"
        class="money-compare-search"
      >
        <BaseSelect
          v-model:modelValue="moneyCompareParams.productId"
          :clearable="true"
          :options="productList"
          placeholder="产品名称"
        />
      </el-form-item>
      <el-form-item
        prop="exceptProductIdList"
        class="money-except-search"
      >
        <BaseSelect
          v-model:modelValue="moneyCompareParams.exceptProductIdList"
          :clearable="true"
          :multiple="true"
          :leave-out-width="28"
          :collapse-tags="true"
          :options="productList"
          placeholder="排除产品"
        />
      </el-form-item>
      <el-form-item
        class="money-compare-search"
      >
        <el-popover
          placement="bottom"
          :width="300"
          @after-enter="afterEnterOrders"
        >
          <div>
            <el-input
              ref="multiOrdersRef"
              v-model="moneyCompareState.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="moneyCompareState.inputOrders"
              placeholder="单号"
              @focus="focusOrderId"
            />
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item
        prop="differenceFeeAmount"
        class="difference-flag-search"
      >
        <el-input
          v-model="moneyCompareParams.differenceFeeAmount"
          placeholder="金额差值>="
        />
      </el-form-item>
      <el-form-item
        class="money-comparedate-search"
      >
        <el-date-picker
          v-model="moneyCompareState.dateArr"
          type="daterange"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
          @change="changeDate"
        />
      </el-form-item>
      <el-form-item
        prop="differenceFlagList"
        class="difference-flag-search"
      >
        <BaseSelect
          v-model:modelValue="moneyCompareParams.differenceFlag"
          :filterable="false"
          :clearable="true"
          :options="moneyCompareState.differenceFlagList"
          placeholder="是否有差异"
        />
      </el-form-item>
      <el-form-item
        prop="recountByLastFee"
        class="last-fee-search"
      >
        <el-checkbox
          v-model="moneyCompareParams.recountByLastFee"
          label="最新价格"
          size="large"
        />
      </el-form-item>
      <el-form-item
        v-show="moneyCompareParams.recountByLastFee"
        prop="currentDate"
        class="recount-bylastFee-search"
      >
        <el-date-picker
          v-model="moneyCompareParams.currentDate"
          type="datetime"
          placeholder="费用日期"
          value-format="YYYY-MM-DD hh:mm:ss"
          :default-time="defaultTime"
        />
      </el-form-item>
      <el-form-item class="btns">
        <el-button
          :icon="Search"
          :loading="moneyCompareState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          :loading="moneyCompareState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          type="success"
          :loading="moneyCompareState.exportLoading"
          :icon="Download"
          plain
          @click="downloadBtn"
        >
          导出
        </el-button>
        <el-button
          type="warning"
          :loading="moneyCompareState.recalculationLoading"
          :icon="Refresh"
          plain
          @click="recalculationBtn"
        >
          重算
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="moneyCompareGridOptions"
      ref="moneyCompareTableRef"
    >
      <template #feeAmount="{ row }">
        <el-button
          link
          class="class-feeAmount"
          @click="hanleViewDetail(row)"
        >
          {{ row.feeAmount }}
        </el-button>
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="moneyCompareParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="moneyCompareParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="moneyCompareParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 费用明细查询 -->
  <QueryExpenseItemDetail ref="queryExpenseItemDetailRef" />
</template>
<script lang="ts" setup name="MoneyDetailCompare">
import { Search, RefreshRight, Download, Refresh } from "@element-plus/icons-vue";
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import { useMoneyCompareList } from "@/composables/moneyCompare/useMoneyCompareList";
import { VxeBasicTable } from "@/components/VxeTable";
import { useMoneyCompareListModel } from "@/composables/moneyCompare/useMoneyCompareListModel";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import QueryExpenseItemDetail from '@/views/userMoneySum/QueryExpenseItemDetail.vue';
// import { useTimeRange } from "@/hooks/useTimeRange";
// 初始化时间格式
const defaultTime = new Date(2000, 1, 1, 6, 0, 0);
const { moneyCompareGridOptions } = useMoneyCompareListModel()
// 初始化表格高度
useInitTableHeight(moneyCompareGridOptions, 560, 280);
// daterange 时间范围
// const { isSelectDisabled, selectCalendar } = useTimeRange(1, true)
const { 
  searchFormRef,
  moneyCompareParams,
  moneyCompareState,
  moneyCompareTableRef,
  sizeChange, 
  currentChange, 
  searchBtn, 
  resetBtn,
  downloadBtn,
  recalculationBtn,
  productList,
  customertList, 
  salesmanUsesList,
  changeDate,
  queryExpenseItemDetailRef,
  hanleViewDetail,
  multiOrdersRef,
  hanlClearOrderIdList,
  confirmMultiOrders,
  focusOrderId,
  changeOrders,
  afterEnterOrders
} = useMoneyCompareList(moneyCompareGridOptions);
</script>
<style lang="scss" scoped>
.money-compare-list {
  :deep(.vxe-toolbar) {
    padding-top: 0;
  }
  @mixin itemSearchMg {
    margin-right: 8px;
    margin-bottom: 11px;
  }
  .money-compare-search {
    width: 168px;
    @include itemSearchMg;
  }
  .money-except-search {
    width: 164px;
    @include itemSearchMg;
  }
  .recount-bylastFee-search {
    width: 156px;
    @include itemSearchMg;
  }
  .money-comparedate-search {
    width: 218px;
    @include itemSearchMg;
  }
  .difference-flag-search {
    width: 128px;
    @include itemSearchMg;
  }
  .last-fee-search {
    width: 82px;
    @include itemSearchMg;
  }

  .btns {
    margin-bottom: 11px;
  }
  :deep(.el-button+.el-button) {
    margin: 0;
    margin-right: 8px;
  }
  .reset-btn {
    margin-left: 8px !important;
  }
}
</style>
