<script setup lang="ts">
import { onMounted, reactive, ref, unref } from "vue";
import { httpSaleList } from "/@/api/InvoiceSales/capitalClaim";
import { useResponseHandle } from "/@/hooks";

import {
  sale_type,
  sale_source,
  sale_columns,
  sale_order_status
} from "../../config/configs";

const emit = defineEmits(["save-click-button"]);

const visible = ref(false);
const loading = ref(false);
const saleOrderList = ref<Array<Record<string, string>>>([]);
const selectSaleOrder = ref<Array<Record<string, string>>>([]);
const responseHandle = useResponseHandle();

const pagination = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
});

async function requesetTradeOrderList() {
  loading.value = true;
  const { pageSize: size, currentPage: page } = pagination;

  const { code, message, data } = await httpSaleList({
    page,
    size
  });

  responseHandle({
    code,
    message,
    handler: () => {
      saleOrderList.value = data.list;
      pagination.total = data.count;
    }
  });
  loading.value = false;
}

function handleSelection(values) {
  selectSaleOrder.value = values;
}

function handleSave() {
  emit("save-click-button", unref(selectSaleOrder));
  visible.value = false;
}

defineExpose({
  onDisplay: () => (visible.value = true)
});

//初始化订单列表
onMounted(() => requesetTradeOrderList());
</script>

<template>
  <el-dialog v-model="visible" title="销售单列表">
    <el-table
      v-loading="loading"
      :data="saleOrderList"
      @selection-change="handleSelection"
      size="small"
      row-key="sequenceNo"
    >
      <el-table-column
        v-for="(col, index) in sale_columns"
        :prop="col.field"
        :label="col.label"
        :key="index"
        :type="col.type"
        show-overflow-tooltip
        reserve-selection
      >
        <template #default="{ row }">
          <el-tag v-if="col.field === 'status'">
            {{ sale_order_status.find(s => s.value === row.status)?.label }}
          </el-tag>

          <el-tag v-else-if="col.field === 'qrdType'">
            {{ sale_type.find(s => s.value === row.qrdType)?.label }}
          </el-tag>

          <el-tag v-else-if="col.field === 'qrdSource'">
            {{ sale_source.find(s => s.value === row.qrdSource)?.label }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div flex justify-between mt-2>
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 15, 20]"
        @current-change="requesetTradeOrderList"
        size="small"
      />

      <div>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="() => (visible = false)">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
