<script setup lang="ts">
import { nextTick, onMounted, ref, unref } from "vue";
import { httpSaleList } from "/@/api/InvoiceSales/capitalClaim";
import { ElTable } from "element-plus";
import { useAsync } from "/@/hooks";

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

import { xs_order_source_options } from "/@/utils/status";

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

const visible = ref(false);
const selectSaleOrder = ref<Array<Record<string, string>>>([]);
const tableRef = ref<InstanceType<typeof ElTable>>(null);

const initalPagination = {
  pageSize: 10,
  currentPage: 1,
  total: 0
};

const {
  loading,
  run: salelistRun,
  data: saleOrderList,
  pagination,
  getPaginationParams
} = useAsync<Array<Record<string, string>>>({
  initalData: [],
  isList: true,
  initalPagination
});

const handleSelectChange = values => (selectSaleOrder.value = values);

const reuquestSalelist = () => {
  salelistRun(
    httpSaleList({
      inv_status: "0",
      pay_status: "0",
      ...getPaginationParams()
    })
  );
};

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

defineExpose({
  onDisplay: (_list: Array<Record<string, string>>) => {
    visible.value = true;

    nextTick(() => {
      tableRef.value.clearSelection();
      _list.forEach(item => tableRef.value.toggleRowSelection(item, true));
    });
  }
});

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

<template>
  <el-dialog v-model="visible" title="销售单列表">
    <el-table
      v-loading="loading"
      :data="saleOrderList"
      @selection-change="handleSelectChange"
      ref="tableRef"
      size="small"
      row-key="sequenceNo"
    >
      <el-table-column
        v-for="(col, index) in sale_columns"
        :prop="col.field"
        :label="col.label"
        :key="index"
        :width="col.width"
        :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'">
            {{
              xs_order_source_options.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="reuquestSalelist"
        size="small"
      />

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