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

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

import {
  send_status_list,
  useTypeOptions,
  xs_order_source_options,
  xs_order_type_options
} from "/@/utils/status";
import { useCompany } from "/@/hooks/core/useCompany";
import { DateRange } from "/@/components/BasicForm";

const visible = ref(false);
const emit = defineEmits(["save-click-button"]);
const data = ref<Record<string, any>>({
  timer: [],
  sequenceNo: "",
  qrdtype: "",
  qrdsource: "",
  customer: "",
  platName: "",
  cxCode: "",
  platform_type: "1",
  is_comon: '0'
});

const { currentCompany } = useCompany();
const tableRef = ref<InstanceType<typeof ElTable>>(null);
const selectSaleOrder = ref<Array<Record<string, string>>>([]);

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

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

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

const reuquestSalelist = () => {
  const { currentPage: page, pageSize: size } = pagination;
  const { timer, ...rest } = data.value;
  salelistRun(
    httpSaleList({
      pay_status: "0",
      size,
      page,
      companyNo: currentCompany.value.companyNo,
      start: timer[0],
      end: timer[1],
      status: '3',
      ...rest
    })
  );
};

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

const search = (isReset?: boolean) => {
  pagination.currentPage = 1;
  if (isReset) {
    data.value = {
      timer: [],
      sequenceNo: "",
      qrdtype: "",
      qrdsource: "",
      customer: "",
      platName: "",
      cxCode: "",
      platform_type: "1"
    };
  }
  reuquestSalelist();
};

function handleSizeChange() {
  pagination.currentPage = 1;
  reuquestSalelist();
}

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

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

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-model="visible"
    title="销售订单"
    width="1040px"
    @close="() => (selectSaleOrder = [])"
    center
  >
    <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="8">
        <date-range size="small" v-model="data.timer" />
      </el-col>

      <el-col :span="8">
        <el-input
          v-model="data.sequenceNo"
          placeholder="订单编码"
          size="small"
        />
      </el-col>

      <el-col :span="8">
        <el-select
          class="w-full"
          size="small"
          clearable
          v-model="data.qrdsource"
          placeholder="订单来源"
        >
          <el-option
            v-for="type in xs_order_source_options"
            :key="type.value"
            v-bind="type"
          />
        </el-select>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="8">
        <el-select
          class="w-full"
          size="small"
          clearable
          v-model="data.qrdtype"
          placeholder="商品类型"
        >
          <el-option
            v-for="type in xs_order_type_options"
            :key="type.value"
            v-bind="type"
          />
        </el-select>
      </el-col>

      <el-col :span="8">
        <el-input placeholder="客户名称" size="small" v-model="data.customer" />
      </el-col>
      <el-col :span="8">
        <el-input placeholder="平台名称" size="small" v-model="data.platName" />
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="8">
        <el-input
          placeholder="销售订单主编码"
          size="small"
          v-model="data.cxCode"
        />
      </el-col>

      <el-col :span="8">
        <el-switch
          v-model="data.platform_type"
          size="small"
          active-text="toC"
          inactive-text="toB"
          active-value="2"
          inactive-value="1"
        />
        <!-- <el-select
          v-model="data.platform_type"
          size="small"
          placeholder="平台类型"
          style="width: 100%"
        >
          <el-option
            v-for="opt in useTypeOptions"
            :value="opt.value"
            :label="opt.label"
            :key="opt.value"
          />
        </el-select> -->
      </el-col>
    </el-row>

    <div flex gap-2 justify-end mb-1>
      <el-button size="small" type="primary" @click="() => search()"
        >搜索</el-button
      >
      <el-button size="small" @click="() => search(true)">重置</el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="saleOrderList"
      @selection-change="handleSelectChange"
      ref="tableRef"
      border
      size="small"
      row-key="sequenceNo"
      max-height="520px"
    >
      <el-table-column
        v-for="(col, index) in sale_columns"
        :prop="col.field"
        :label="col.label"
        :key="index"
        :width="col.width + 'px'"
        :fixed="col.fixed"
        :type="col.type"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag v-if="col.field === 'qrdType'" size="small">
            {{
              xs_order_type_options.find(s => s.value === row.qrdType)?.label ||
              "--"
            }}
          </el-tag>

          <el-tag v-else-if="col.field === 'qrdSource'" size="small">
            {{
              xs_order_source_options.find(s => s.value === row.qrdSource)
                ?.label || "--"
            }}
          </el-tag>

          <el-tag v-else-if="col.field === 'sendStatus'">
            {{
              send_status_list.find(p => String(row.sendStatus) === p.value)
                ?.label
            }}
          </el-tag>

          <el-tag v-if="col.field === 'platform_type'" size="small">
            {{
              useTypeOptions.find(s => s.value === row.platform_type)?.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="[15, 50, 100]"
        @size-change="handleSizeChange"
        layout="sizes, prev, pager, next"
        @current-change="reuquestSalelist"
        size="small"
      />

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