<template>
  <SysDialog
    class="view-bill-detail-modle"
    :title="dialog.title"
    :width="getBindValue.width"
    :height="getBindValue.height"
    :visible="dialog.visible"
    @onClose="hanleOnClose"
    @onConfirm="confirm"
  >
    <template #content>
      <!-- 新增/编辑-账单 -->
      <!-- 基础表单 -->
      <el-form
        class="el-search-form"
        :model="state.listParm"
        :inline="true"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item
              class="item-form"
              label="渠道商名称"
            >
              <el-input
                v-model="state.listParm.channelName"
                placeholder="请输入渠道商名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              class="item-form"
              label="账单日期"
            >
              <el-date-picker
                v-model="state.listParm.billDate"
                type="date"
                placeholder="账单日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              class="item-form"
              label="运单号/提单号"
            >
              <el-input
                ref="waybillNoListRef"
                v-model="state.listParm.waybillNoList"
                placeholder="请输入运单号/提单号"
                @focus="hanleFocus"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            class="col-left"
          >
            <el-button
              type="primary"
              :icon="Search"
              plain
              @click="detailPageList"
            >
              查询
            </el-button>
            <el-button
              type="primary"
              :icon="Download"
              :loading="state.exportDisabled"
              @click="hanleExport"
            >
              导出
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 动态表格表单 -->
      <!-- 表格数据 -->
      <BaseTable @register="registerTable">
        <template #billDate="scope">
          {{ timeFiltering(scope.row.billDate) }}
        </template>
      </BaseTable>
      <!-- 分页- -->
      <el-pagination
        v-model:current-page="state.listParm.pageNum"
        class="page-data"
        :page-sizes="[10, 20, 40, 80, 100]"
        :page-size="state.listParm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.listParm.total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </template>
  </SysDialog>
  <!-- 运单、提单号 -->
  <AddBillMainOrder
    ref="addBillMainOrderRef"
    @save-order="hanleSaveOrder"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { Download, Search } from '@element-plus/icons-vue';
import { BaseTable, useTable } from '@/components/Table';
import useBillMainTable from '@/composables/business/billmain/useBillMainTable';
import useViewBillDetailRate from '@/composables/business/billmain/useViewBillDetailRate';
import { useCurrencyStore } from '@/store/currency';
import AddBillMainOrder from './AddBillMainOrder.vue';
import timeFiltering from '@/utils/timeFiltering';

// 弹框一些配置
const getBindValue = ref<Recordable>({
  width: 1100,
  height: 550
})

//弹框属性
const { dialog, onClose, onShow } = useDialog()

// 表格
const store = useCurrencyStore()
const { viewBillTable } = useBillMainTable()
const [registerTable] = useTable(viewBillTable)

// 基础数据处理
const { show, confirm, hanleOnClose, sizeChange, currentChange, detailPageList, hanleExport, hanleFocus, hanleSaveOrder, addBillMainOrderRef, waybillNoListRef, currencyList, state } = useViewBillDetailRate(dialog, onClose, onShow, viewBillTable, store)
 

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>
  
<style lang="scss" scoped>
.el-search-form :deep(.el-upload-list__item) {
  display: none;
}

.view-bill-detail-modle {
  .item-form {
    width: 100%;
    :deep(.el-form-item__label) {
      padding-left: 5px;
    }
  }
  .col-left {
    padding-left: 12px;
  }
  .page-data {
    padding-top: 20px;
  }
}
</style>