<script setup lang="ts">
import { httpList } from "/@/api/purchaseIn/workbench";
import { useTask } from "/@/hooks/core"

const bidTask = useTask({ initialData: [] })
bidTask.run(httpList({ size: 1000, page: 1, status: '1' }))
</script>

<template>
  <div class="bg-white" v-loading="bidTask.loading">
    <ElRow class="mb-[10px]" :gutter="10">
      <ElCol :span="8">
        <ElSelect style="width:100%" placeholder="排序">
          <ElOption />
        </ElSelect>
      </ElCol>
    </ElRow>

    <ElScrollbar style="height: calc(100vh - 120px)">
      <ul class="flex flex-wrap border-1 border-[#ccc]">
        <li 
          class="bid-item w-[20%] border-1 border-dashed border-[#ccc] mb-[-1px] ml-[-1px] p-[5px] cursor-pointer" 
          v-for="item in bidTask.data.list" 
          :key="item.infoNo"
          style="font-size: 12px"
        >
          <div class="flex justify-between mb-[2px]">
            <p>任务编号：</p>
            <p>{{ item.infoNo }}</p>
          </div>

          <div class="flex justify-between mb-[2px]">
            <p>截止时间：</p>
            <p>{{ item.endtime }}</p>
          </div>

          <div class="flex justify-between mb-[2px]">
            <p>商品分类：</p>
            <p>{{ item.cat_name }}</p>
          </div>
          
          <div class="flex justify-between mb-[2px]">
            <p>商品品牌：</p>
            <p>{{ item.brand_name }}</p>
          </div>
          
          <div class="flex justify-between mb-[2px]">
            <p class="min-width:100px">商品名称：</p>
            <div class="flex items-center">
              <ElImage  
                v-if="item.good_img" 
                :src="item.good_img" 
                :preview-src-list="[item.good_img]" 
                style="width:20px;height:20px;"
              />
              <p>{{ item.good_name }}</p>
            </div>
          </div>

          <div class="flex justify-between mb-[2px]">
            <p>商品预算：</p>
            <p>
              {{ item.original_price }}元 / {{ item.num }}
            </p>
          </div>

          <div class="flex justify-between mb-[2px]">
            <p>业务公司编码：</p>
            <p>{{ item.companyNo }}</p>
          </div>

          <div class="flex justify-between mb-[2px]">
            <p>业务公司名称：</p>
            <p>{{ item.companyName }}</p>
          </div>
          
          <div class="flex justify-between mb-[2px]">
            <p>所属平台：</p>
            <p>{{ item.platform_name }}</p>
          </div>
        </li>
      </ul>
    </ElScrollbar>
 </div>
</template>


<style lang="scss" scoped>
.bid-item {
  div {

  }
}
</style>
