<script setup lang="ts">
import { computed, watch, ref } from "vue"
import { useVModel } from "@vueuse/core"
import { BusinessQuery, PlatformQuery  } from "/@/components/BasicForm";
import { httpOnlineProducts, httpFeedback } from "/@/api/sellOut/project";

import { ElMessage } from "element-plus"
import { useAsync } from "/@/hooks/core"

const props = defineProps<{ visible: boolean; item: any; index: number }>()
const emit = defineEmits(['refresh'])
const visible = useVModel(props, 'visible')

const { run, data, loading } = useAsync({ initialData: [], isList: true })

const { run: feedback, loading: loadingFeedback } = useAsync({ success(){
  visible.value = false
  emit('refresh', props.index)
} })

const selection = ref([])

const category = computed(() => {
  const { can } = (props.item || {})
  const _category = { id: '', label: ''}
  if(!can || !Array.isArray(can) || can.length !== 3) return _category
  _category.id = can[can.length -1].id
  _category.label = can.map(({name}) => name).join('-')
  return _category
})


const parameter = computed(() => ({
  buy_num: props.item.num,
  cat_id: category.value.id,
  companyNo: props.item.companyNo,
  platform_code: props.item.platform,
  price: props.item.budget_price,
  page: 1,
  size: 1000
}))


const  requestOnlineProducts = () => run(httpOnlineProducts(parameter.value))

function handleFeedback(){
  if(selection.value.length === 0){
    ElMessage.warning('至少选择一条上线商品')
    return
  }

  const spuCode = selection.value.map(({skuCode}) => skuCode)

  const parameter = {
    pgNo: props.item.pgNo,
    spuCode,
    source: '1'
  }

  feedback(httpFeedback(parameter))
}


watch(() => [props.item, props.visible], ([item,visible]) => {
  if(!item || !visible) { return }
  requestOnlineProducts()
})
</script>

<template>
  <ElDialog v-model="visible" title="选择已上线的商品" center top="20px">
    <ElRow class="mb-[10px]" :gutter="10">
        <ElCol :span="8">
          <ElInput size="small" disabled :modelValue="item.num">
            <template #prepend>起订量:</template>
          </ElInput>
        </ElCol>

        <ElCol :span="8">
          <BusinessQuery size="small" :modelValue="item.companyNo" disabled placeholder="业务公司" />
        </ElCol>

        <ElCol :span="8">
          <div class="flex w-full justify-end">
            <ElButton type="warning" size="small">重置</ElButton>
            <ElButton type="primary" size="small">搜索</ElButton>
          </div>
        </ElCol>
    </ElRow>

    <ElRow :gutter="10">
      <ElCol :span="6">
        <ElInput size="small" disabled :modelValue="item.budget_price">
          <template #prepend>售价 ≤</template>
        </ElInput>
      </ElCol>
      <ElCol :span="6">
        <PlatformQuery :modelValue="item.platform" size="small" disabled />
      </ElCol>
      <ElCol :span="6">
        <ElInput :modelValue="category.label" size="small" disabled />
      </ElCol>
      <ElCol :span="6">
        <div class="w-full flex justify-end" :span="6">
          <ElButton type="success" size="small" @click="handleFeedback" :loading="loadingFeedback">添加</ElButton>
        </div>
      </ElCol>
    </ElRow>

    <ElTable 
      border 
      size="small"
      class="mt-[10px]" 
      max-height="400px" 
      :data="data" 
      v-loading="loading" 
      @selection-change="value => selection = value"
    >
      <ElTableColumn type="selection" fixed="left"  />
      <ElTableColumn prop="skuCode" label="商品编码" width="160" show-overflow-tooltip />
      <ElTableColumn prop="good_name" label="商品名称" min-width="120" show-overflow-tooltip />
      <ElTableColumn prop="cat_name" label="商品分类" min-width="130" show-overflow-tooltip>
        <template #="{ row }">
          {{ row.cat_info.map(({name}) => name).join('-')}}
        </template>
      </ElTableColumn>
      <ElTableColumn prop="stock_total" label="可用库存" min-width="90px" show-overflow-tooltip />
      <ElTableColumn prop="unit" label="单位" width="45" show-overflow-tooltip />
      <ElTableColumn prop="brand_name" label="品牌" min-width="145" show-overflow-tooltip />
      <ElTableColumn prop="sale_price" label="售价" width="110" show-overflow-tooltip />
    </ElTable>
  </ElDialog>
</template>
