<script setup lang="ts">
import { watch, ref } from "vue"
import { httpPurchaseOrders, httpSaleOrders } from "/@/api/invoice"
import { useVModel } from "@vueuse/core"
import { useTask } from "/@/hooks/core"

import { ElMessage } from "element-plus"


const emit = defineEmits(['confirm'])
const props = defineProps<{ 
  visible: boolean, 
  mode: 'sale' | 'purchase', 
  payNo: string,
  invNo: string
}>()


const parameter = ref({
  merge_code: '',
  inv_good_name: '',
  good_name: ''
})


const visible = useVModel(props, 'visible')
const orderTask = useTask<any>({ initialData: [],  root: true })
const selected = ref([])


function onConfirm(){
  if(selected.value.length === 0){
    ElMessage.warning('请至少选择一条数据')
    return
  }

  const isZero = selected.value.some((item) => item.winv_fee == '0')
  if(isZero){
    ElMessage.warning('不能选择未关联金额为0的订单')
    return
  }

  const isNoHaveCategory = selected.value.some(({ cat_code }) => !cat_code)
  if(isNoHaveCategory){
    ElMessage.warning('只能选择有类目信息的采购单')
    return
  }

  emit('confirm', selected.value.map((item) => ({ ...item, open_amount: item.winv_fee })))
  visible.value = false
}


const onSearch = () =>  {
  const api = props.mode === 'sale' ? httpSaleOrders : httpPurchaseOrders;
  const prop = props.mode === 'sale' ? 'invNo' : 'payNo'
  let { merge_code, inv_good_name, good_name } = parameter.value
  // if(merge_code){ merge_code = merge_code +  "0000000000" }
  orderTask.run(api({ [prop]: props[prop], inv_good_name, merge_code, good_name }))
}

function handleClose(){
  parameter.value = { merge_code: '', inv_good_name: '', good_name: '' }
  visible.value = false
}


watch(() => props.visible, () => {
  if(!props.visible) return
  onSearch()
}, {
  immediate: true
})
</script>

<template>
  <ElDialog 
    v-model="visible" 
    center 
    :title="`选择${props.mode === 'sale' ? '销售订单' : '采购订单'}`" 
    @close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <ElRow class="mb-[10px]" :gutter="10">
      <ElCol :span="8">
        <ElInput 
          v-model="parameter.merge_code" 
          size="small" 
          placeholder="商品类目编号" 
          clearable
          @change="onSearch" 
        />
      </ElCol>

      <ElCol :span="8">
        <ElInput 
          v-model="parameter.inv_good_name" 
          size="small" 
          placeholder="开票商品名称" 
          @change="onSearch"
          clearable
        />
      </ElCol>

      <ElCol :span="8">
        <ElInput 
          v-model="parameter.good_name" 
          size="small" 
          placeholder="商品名称" 
          @change="onSearch"
          clearable
        />
      </ElCol>
    </ElRow>

    <ElTable 
      border 
      size="small" 
      :data="orderTask.data" 
      v-loading="orderTask.loading" 
      @selection-change="list => selected = list"
      max-height="500px"
    >
      <ElTableColumn type="selection" width="40px" fixed="left" />
      <ElTableColumn type="index" label="序号" width="50px" />
      <ElTableColumn :label="`${mode === 'sale' ? '采购单' : '销售单'}编号`" prop="sequenceNo" width="160px" show-overflow-tooltip />
      <ElTableColumn label="商品编号" prop="goodNo" width="160px" show-overflow-tooltip />
      <ElTableColumn label="商品名称" prop="goodName" min-width="160px" show-overflow-tooltip />
      <ElTableColumn label="开票商品名称" prop="inv_good_name" min-width="160px" show-overflow-tooltip />
      <ElTableColumn label="订单商品类目编号" prop="merge_code" min-width="140px" show-overflow-tooltip />
      <ElTableColumn label="订单商品类目名称" prop="cat_name" min-width="140px" show-overflow-tooltip />
      <ElTableColumn label="数量" prop="goodNum"  width="80px" show-overflow-tooltip />
      <ElTableColumn label="单价" prop="goodPrice"  width="80px" show-overflow-tooltip />
      <ElTableColumn label="未关联金额" prop="winv_fee"  width="120px" show-overflow-tooltip />    
    </ElTable>


    <div class="flex justify-between pt-[10px]">
        <span>总计 {{ orderTask.data ? orderTask.data.length : 0 }} 条</span>
        <ElButton type="primary" @click="onConfirm">保存</ElButton>
      </div>
  </ElDialog>
</template>
