<!-- 
    TODO 客户业务 / 欠费提醒
 -->
<template>
  <el-main class="arrears-reminder">
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      :inline="true"
      :model="arrearsReminderParams"
    >
      <el-form-item
        prop="CustomerId"
        class="arrears-reminder-search"
      >
        <BaseSelect
          v-model:modelValue="arrearsReminderParams.CustomerId"
          :clearable="true"
          :options="customertList"
          placeholder="客户"
        />
      </el-form-item>
      <el-form-item
        v-if="hiddenSell"
        prop="SealId"
        class="arrears-reminder-search"
      >
        <BaseSelect
          v-model:modelValue="arrearsReminderParams.SealId"
          :clearable="true"
          :options="storePersonnel.salesmanUsesList"
          placeholder="业务员"
        />
      </el-form-item>
      <el-form-item
        prop="OwningWarehouse"
        class="arrears-reminder-search"
      >
        <BaseSelect
          v-model:modelValue="arrearsReminderParams.OwningWarehouse"
          :clearable="true"
          :options="arrearsReminderState.getOwningWarehouseTypes"
          placeholder="所属仓库"
        />
      </el-form-item>
      <el-form-item
        class="createTime-search"
      >
        <el-date-picker
          v-model="arrearsReminderParams.CreateTime"
          :clearable="false"
          type="daterange"
          range-separator="~"
          value-format="YYYY-MM-DD"
          start-placeholder="问题产生日期"
          end-placeholder="问题结束日期"
        />
      </el-form-item>
      <el-form-item
        prop="CanReceiver"
        class="canReceiver-search"
      >
        <BaseSelect
          v-model:modelValue="arrearsReminderParams.CanReceiver"
          :clearable="true"
          :options="arrearsReminderState.canReceiverList"
          placeholder="重新收货标识"
        />
      </el-form-item>
      <el-form-item class="btns">
        <el-button
          v-permission="['sys:arrears:search']"
          :icon="Search"
          :loading="arrearsReminderState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          v-permission="['sys:arrears:search']"
          :loading="arrearsReminderState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:arrears:download']"
          :loading="arrearsReminderState.exportLoad"
          :icon="Download"
          type="success"
          plain
          @click="onExport"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="arrearsReminderListGridOptions"
      ref="arrearsReminderTableRef"
      :data="arrearsReminderState.newsPaginatedData"
    >
      <!--  -->
      <template #qtyAsArrears="{ row }">
        <el-button
          type="link"
          @click="showDetail(row)"
        >
          {{ row.TransferWarehouseQty }}
        </el-button>
      </template>
      <!--  -->
      <template #canReceiver="{ row }">
        <el-tag :type="row.CanReceiver ? 'success' : 'danger'">
          {{ row.CanReceiver ? '是' : '否' }}
        </el-tag>
      </template>
      <!-- 操作 -->
      <template #actions="{ row }">
        <el-button
          :icon="Promotion"
          :loading="row.loading"
          type="primary"
          plain
          @click="notice(row)"
        >
          通知
        </el-button>
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="arrearsReminderState.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="arrearsReminderState.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="arrearsReminderState.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
    <!-- 明细 -->
    <el-dialog
      v-model="arrearsReminderState.dialogDetail"
      width="1080px"
      title="转运明细"
    >
      <div class="page-warp">
        <el-table
          v-loading="arrearsReminderState.detailLoading"
          border
          :data="getDialogDetails"
        >
          <el-table-column
            prop="StrOperDate"
            label="操作日期"
            :width="120"
          />

          <el-table-column
            prop="CustomerOrderNo"
            label="客户单号"
            :width="180"
          />
          <el-table-column
            prop="TransferNumber"
            label="转单号"
            :width="180"
          />
          <el-table-column
            prop="TrackingNumber"
            label="跟踪号"
            :width="180"
          />
          <el-table-column
            prop="SystemNo"
            label="系统单号"
            :width="180"
          />
          <el-table-column
            prop="StrOriWarehouse"
            label="来源仓"
            :width="120"
          />
          <el-table-column
            prop="StrToWarehouse"
            label="目地仓"
            :width="120"
          />
          <el-table-column
            prop="CreateUserName"
            label="操作人"
            :width="120"
          />
        </el-table>
        <el-pagination
          :page-sizes="[20, 50, 80, 100]"
          :current-page="arrearsReminderState.detailPageIndex"
          :page-size="arrearsReminderState.detailPageSize"
          background
          layout="prev, pager, next ,total ,jumper, sizes, slot"
          :total="arrearsReminderState.detailTotal"
          @current-change="detailPagerSearch"
          @size-change="detailSizeChange"
        />
      </div>
    </el-dialog>
  </el-main>
</template>
<script lang="ts" setup name="arrears">
import {
  useArrearsReminder,
  useArrearsReminderListModle
} from "@/composables/notification/useArrearsReminder";
import {
  Search,
  RefreshRight,
  Download,
  Promotion
} from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";

const { arrearsReminderListGridOptions } = useArrearsReminderListModle();
// 初始化表格高度
useInitTableHeight(arrearsReminderListGridOptions, 560);
const {
  searchFormRef,
  arrearsReminderParams,
  arrearsReminderTableRef,
  arrearsReminderState,
  getDialogDetails,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  showDetail,
  notice,
  onExport,
  detailSizeChange,
  detailPagerSearch,
  storePersonnel,
  customertList,
  hiddenSell
} = useArrearsReminder(arrearsReminderListGridOptions);
</script>
<style lang="scss" scoped>
.arrears-reminder {
  .arrears-reminder-search {
    width: 208px;
    margin-right: 11px;
  }
  .createTime-search {
    width: 248px;
    margin-right: 11px; 
  }

  .canReceiver-search {
    width: 138px;
    margin-right: 11px; 
  }
}
</style>
