<!-- 
    TODO 客户业务 / 临时收货列表
 -->
<template>
  <el-main class="tmpreceiver-list">
    <!-- 搜索栏 -->
    <el-form
      ref="tmpReceiverFormRef"
      :model="tmpReceiverListParams"
      label-width="80px"
      :inline="true"
    >
      <el-form-item
        prop="customerId"
        class="tmpreceiver-search"
      >
        <BaseSelect
          v-model:modelValue="tmpReceiverListParams.customerId"
          :clearable="true"
          :options="customertList"
          placeholder="客户"
        />
      </el-form-item>
      <el-form-item
        prop="beginDate"
        class="tmpreceiver-date"
      >
        <el-date-picker
          v-model="tmpReceiverListState.dateArr"
          type="daterange"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
          @change="changeDate"
        />
      </el-form-item>
      <el-form-item
        prop="currencyCode"
        class="tmpreceiver-search"
      >
        <BaseSelect
          v-model:modelValue="tmpReceiverListParams.currencyCode"
          :clearable="true"
          :options="currencyList"
          placeholder="币种"
        />
      </el-form-item>
      <el-form-item
        prop="status"
        class="tmpreceiver-search"
      >
        <BaseSelect
          v-model:modelValue="tmpReceiverListParams.status"
          :options="tmpReceiverListState.statusList"
          :clearable="true"
          placeholder="转账状态"
        />
      </el-form-item>
      <el-form-item
        prop="deleteFlag"
        class="tmpreceiver-search"
      >
        <BaseSelect
          v-model:modelValue="tmpReceiverListParams.deleteFlag"
          :options="tmpReceiverListState.deleteFlagList"
          placeholder="状态"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="tmpReceiverListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          :loading="tmpReceiverListState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:tmpReceive:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <div
      v-show="getIsPhone"
      class="is-phone"
    >
      <!-- 移动端显示 -->
      <VxeBasicTable
        v-bind="phoneTmpReceiverGridOptions"
        :data="tmpReceiverGridOptions.data"
      >
        <template #deleteFlag="{ row }">
          <el-link
            :type="row.deleteFlag ? 'info' : 'success'"
            style="font-size: 20px"
          >
            <el-icon v-show="row.deleteFlag">
              <Remove />
            </el-icon>
            <el-icon v-show="!row.deleteFlag">
              <Open />
            </el-icon>
          </el-link>
        </template>
        <template #beginDate="{ row }">
          <div class="date">
            <p>起始时间（>）：</p>
            <p>{{ formatDate(new Date(row.beginDate)) }}</p>
            <p>起始时间（&lt;=）：</p>
            <p>{{ formatDate(new Date(row.endDate)) }}</p>
          </div>
        </template>
        <template #actions="{ row }">
          <el-tag
            :type="!row.deleteFlag ? 'info' : 'success'"
            @click="activeTmpReceive(row.id, !row.deleteFlag)"
          >
            {{ !row.deleteFlag ? "停用" : "启用" }}
          </el-tag>
        </template>
      </VxeBasicTable>
    </div>
    <div v-show="!getIsPhone">
      <VxeBasicTable
        v-bind="tmpReceiverGridOptions"
        ref="tmpReceiverTableRef"
      >
        <template #status="{ row }">
          <el-tag
            :type="row.status === TransferStatus.TRANSFERRED ? 'success' : ''"
          >
            {{ row.status === TransferStatus.TRANSFERRED ? "已转账" : "新增" }}
          </el-tag>
        </template>
        <template #uploadFile="{ row }">
          <!-- 凭证照片 -->
          <el-button
            v-show="row.uploadFileList"
            type="primary"
            link
            @click="hanleViewFile(row)"
          >
            查看
          </el-button>
        </template>
        <template #deleteFlag="{ row }">
          <el-tag :type="row.deleteFlag ? 'info' : 'success'">
            {{ row.deleteFlag ? "停用" : "启用" }}
          </el-tag>
        </template>
        <template #actions="{ row }">
          <DropDownButtons
            :model-value="row"
            :action-options="actionOptions"
            :disabled-arr="tmpReceiverListState.disabledArr"
            @click-change="hanleChangeAction"
            @visible-change="changeVisibleChange($event, row)"
          >
            <template #islabel="{ item }">
              {{ !row.deleteFlag ? item.islabel : item.label }}
            </template>
          </DropDownButtons>
        </template>
      </VxeBasicTable>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="tmpReceiverListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="tmpReceiverListParams.pageSize"
      :layout="pageLayout"
      :total="tmpReceiverListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 新增、编辑临时收货 -->
  <TmpReceiveAdd
    ref="tmpReceiverAddRef"
    :customert-list="customertList"
    :currency-list="currencyList"
    @save-tmp-receiver="hanleSaveTmpReceiver"
  />
  <!-- 转账 -->
  <TransferAccounts
    ref="transferAccountsRef"
    @save-transfer-accounts="hanleSaveTransferAccounts"
  />
  <!-- 凭证照片 -->
  <el-image
    ref="imagePreviewRef"
    class="define-image-preview"
    :src="tmpReceiverListState.imageUploadUrlList[0]"
    :preview-src-list="tmpReceiverListState.imageUploadUrlList"
    :initial-index="1"
    :hide-on-click-modal="true"
    fit="cover"
  />
</template>
<script lang="ts" setup name="tmpReceive">
import { Search, RefreshRight, Plus } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { useTmpReceiverList } from "@/composables/accountPeriod/useTmpReceiverList";
import { useTmpReceiverModel } from "@/composables/accountPeriod/useTmpReceiverListModel";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import TmpReceiveAdd from "./tmpReceiveAdd.vue";
import { formatDate } from "@/utils/dateTimeStr";
import { TransferStatus } from "@/type/BaseBusinessFeeseType";
import TransferAccounts from "./transferAccounts.vue";

const {
  tmpReceiverTableRef,
  tmpReceiverGridOptions,
  phoneTmpReceiverGridOptions,
  actionOptions
} = useTmpReceiverModel();
// 初始化表格高度
useInitTableHeight(tmpReceiverGridOptions);
const {
  tmpReceiverListState,
  tmpReceiverListParams,
  customertList,
  currencyList,
  tmpReceiverFormRef,
  tmpReceiverAddRef,
  getIsPhone,
  pageLayout,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  addBtn,
  hanleChangeAction,
  hanleSaveTmpReceiver,
  activeTmpReceive,
  changeVisibleChange,
  changeDate,
  transferAccountsRef,
  hanleSaveTransferAccounts,
  imagePreviewRef,
  hanleViewFile
} = useTmpReceiverList(tmpReceiverGridOptions);
</script>
<style lang="scss" scoped>
.define-image-preview {
  position: absolute;
  top: -9999px;
  left: -9999px;
  :deep(.el-image-viewer__prev) {
    top: auto;
    left: calc(50% - 192px);
    bottom: 30px;
    transform: none;
  }
  :deep(.el-image-viewer__next) {
    top: auto;
    right: calc(50% - 192px);
    bottom: 30px;
    transform: none;
  }
}
.tmpreceiver-list {
  .tmpreceiver-search {
    width: 184px;
    margin-right: 11px;
  }
  .tmpreceiver-date {
    width: 238px;
    margin-right: 11px;
  }
}
::v-deep .upload-file .vxe-cell {
  line-height: 1 !important;
}
.is-phone {
  :deep(.vxe-header--row) {
    font-size: 11px !important;
  }
  :deep(.vxe-body--row) {
    font-size: 12px !important;
  }
  .date {
    line-height: 1.6;
    p {
      margin: 0;
    }
  }
}
</style>
