<script setup lang="ts">
import { ref, unref , onMounted} from "vue";
import { ElMessage } from "element-plus";
import { httpSendOrderList } from "/@/api/postSupplierOrder/sendOrderRecord";
import { useAsync } from "/@/hooks";

const emit = defineEmits(['add']);
const props = defineProps(['companyNo', 'supplierNo']);

const initialParameter = {
  page: 1,
  size:10,
  total: 0,
  status: 0
}

const parameter = ref({ ...initialParameter });

const selected = ref([]);
const visible = ref(false);

const formData = ref<Record<string, any>>({
  outChildCode: ""
});

const { run, loading, data } = useAsync({
  initalData: [],
  isList: true,
  success: (data: any = {}) => parameter.value.total = data.count
});

function requestSendOrder(){
  const { supplierNo, companyNo } = props;
  const { page, size, status } = parameter.value;
  run(httpSendOrderList({ supplierNo, companyNo, page, size, status,...formData.value }))
}


function confirm() { 
  if (selected.value.length === 0) {
    ElMessage.warning('请选择至少一个发货运单')
    return
  }

  const zeros = selected.value.filter(({post_fee}) => Number(post_fee) === 0);
  if (zeros.length !== 0) {
    ElMessage.warning(`发货运单${zeros.map(({TrackCode}) => TrackCode).join('、')}添加失败,物流费用不能为0`)
    return;
  }

  console.log(zeros,selected.value);

  emit('add', unref(selected))
  visible.value = false;
}


//重置搜索
function handleReset() {
  parameter.value.page = 1;

  formData.value = {
    outChildCode: ""
  };
   requestSendOrder();
}

defineExpose({
  onSearch: () => requestSendOrder()
})

onMounted(requestSendOrder);
</script>

<template>
    <div v-loading="loading">
      <ElRow :gutter="5" mb-1>
        <ElCol :span="6">
          <ElInput
            size="small"
            placeholder="发货工单编号"
            v-model="formData.outChildCode"
          />
        </ElCol>

         
        <ElCol :span="3" class="float-right">
          <ElButton size="small" @click="requestSendOrder" type="primary">
            搜索
          </ElButton>
          <ElButton size="small" @click="handleReset">重置</ElButton>
        </ElCol>
      </ElRow>


      <el-table 
        border
        size="small" 
        style="width: 100%" 
        :data="data" 
        @selection-change="selection => selected = selection"
        max-height="450px"
        >
        <el-table-column type="selection" width="55"  fixed="left" />
        <el-table-column prop="TrackCode" label="发货运单编号" min-width="150px" show-overflow-tooltip />
        <el-table-column prop="outChildCode" label="发货工单编号" min-width="160px" show-overflow-tooltip  />
        <el-table-column prop="orderCode" label="销售订单编号" min-width="150px" show-overflow-tooltip />
        <ElTableColumn prop="companyName" label="业务公司" min-width="180px" show-overflow-tooltip/>
        <ElTableColumn prop="supplierName" label="物流供应商" min-width="180px" show-overflow-tooltip/>
        <el-table-column label="物流费用" min-width="150px" prop="post_fee" show-overflow-tooltip></el-table-column>
        <ElTableColumn label="备注" prop="remark" min-width="140px" show-overflow-tooltip />
        <el-table-column label="创建人" prop="apply_name" min-width="80px" show-overflow-tooltip/>
        <el-table-column label="创建时间" prop="create_time" min-width="140px" show-overflow-tooltip/>
      </el-table>

      
      <div class="flex justify-between w-full mt-[10px]">
        <el-pagination 
          v-model:current-page="parameter.page" 
          v-model:page-size="parameter.size"
          layout="total, sizes,prev, pager, next" 
          :total="parameter.total" 
          @size-change="requestSendOrder"
          @current-change="requestSendOrder"
          :small="true"
          :background="true"  
         />

         <el-button 
          type="primary" 
          size="small" 
          @click="confirm"
        >保存</el-button>
      </div>
    </div>
</template>
