<script setup lang="ts">
import { reactive, onMounted, ref } from "vue"

import { Tabs, Tab, List, Image, showLoadingToast, closeToast, Button, showImagePreview, showFailToast, Dialog, Search, Field, showSuccessToast, showConfirmDialog } from "vant"
import { requestCostlist, requestSeekstatus, requestCompanyCategores, requestBusinessInfo, requestSupplierInfo } from "~/service/modules/home"
import axios from "axios"

const CancelToken = axios.CancelToken

const mapSpuCode = ref<string[]>([])
const selection = ref<Record<string, any>>([])

const state = reactive({
  skuOrName: '',
  isIndeterminate: false,
  isCheckAll: false,
  finished: false, 
  loading: false, 
  isInit: true,
  status: 0,
  total: 0,
  page: 0
})

const list = ref<Record<string, any>[]>([])

const tabList = [
  { value: "9", label: "待审核", type: "primary" },
  { value: "10",label: "审核驳回", type: "danger" },
  { value: "1", label: "审核通过", type: "danger" },
  { value: 'other', label: '其他', type: 'warning' },
  { value: '',  label: '全部'  }
]

const mapValueToStatus = {
  '9': '9',
  '10': '10',
  '1': '1',
  'other': ['0', '2', '3', '4', '5', '10', '6', '7', '8']
}

const tabListAll = [
  // { value: "", label: "全部", type: "primary" },
  { value: "0", label: "新建待审核", type: "primary" },
  { value: "9", label: "待审核", type: "primary" },
  { value: "1", label: "审核通过", type: "success" },
  { value: "2", label: "基础修改待审核", type: "primary" },
  { value: "3", label: "成本修改待审核", type: "primary" },
  { value: "4", label: "基础修改驳回", type: "danger" },
  { value: "5", label: "成本修改驳回", type: "danger" },
  { value: "10",label: "审核驳回", type: "danger" },
  { value: "6", label: "新建审核驳回", type: "danger" },
  { value: "7", label: "复制商品待编辑", type: "primary" },
  { value: "8", label: "竞价商品待编辑", type: "primary" }
]

let source:any = null;
async function onSearch(bidNo?: string, isReset?: boolean){
  if(state.isInit || isReset){ showLoadingToast({ message: '加载中...', forbidClick: true }) }
  
  if(!bidNo){  state.page += 1 }

  if(isReset){
    list.value = []
    state.page = 1
  }

  state.loading = true
  source = CancelToken.source()

  const { code, data } = await requestCostlist({ 
    page: bidNo ? 1 : state.page,
    spucode: state.skuOrName,
    bidNo: bidNo || '',
    status: mapValueToStatus[state.status],
    companyNo: ['GS2304031312553746', 'GS2302231323386950', 'GS2302231124114965', 'GS2401181650538135', 'GS2302231125079621']
  }, 
    source.token
  )
  state.loading = false
  if(code == 0){
    if(bidNo){
      const sourceIndex = list.value.findIndex(item => item.bidNo === bidNo)

      

      list.value[sourceIndex] = data.list[0]
    } else {
      list.value = [...list.value, ...data.list]
      state.finished = data.list.length < 10;
    }
    state.total = data.count
  }

  if(state.isInit || isReset){
    closeToast()
    state.isInit = false
  }
}

function handleTabChange(){
  source && source.cancel()
  state.skuOrName = ''
  state.isCheckAll = false
  state.isIndeterminate = false
  mapSpuCode.value = []
  selection.value = []
  state.page = 0
  state.finished = false
  state.loading = false
  list.value = [];
  onSearch()
}
// onMounted(onSearch)
</script>

<template>
  <div class="bg-[#f5f5f5] w-full" style="height:calc(100vh - 50px);overflow: auto">
    <Tabs style="z-index:1000" class="w-full fixed top-0 left-0" v-model:active="state.status" @change="handleTabChange">
      <Tab v-for="tab in tabList" :title="tab.label" :key="tab.value" :name="tab.value" />
    </Tabs>

    <div 
      class="w-full flex bg-[#fff] fixed top-[43px] left-0 items-center" 
      style="z-index:1000; border-bottom: 1px solid #f5f5f5" 
    >
      <Search 
        class="flex-1"
        v-model="state.skuOrName"
        placeholder="SKU编号"
        @clear="onSearch('', true)"
      />
      
      <Button 
        class="mr-[15px] ml-[-10px]" 
        type="warning"
        size="small"
        @click="onSearch('', true)"
      >搜索</Button>
    </div>
    
    <List class="mt-[95px] w-full" v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onSearch">
       <div :show="true" class="bg-[#fff] my-[3px] border-[#f5f5f5]" v-for="item in list" :key="item.id">
        <div class="p-[15px] flex items-start">
          <div class="float-right items-start w-full">
           <div class="flex flex-col ml-[10px]" style="line-height:22px">
             <div class="color-[#0f0f0f] flex items-start">
                <Image 
                  style="
                    height:28px;
                    width:28px;
                    min-height:28px;
                    min-width:28px;
                    margin-right: 10px;
                    border-radius: 2px;
                    border: 1px solid #dcdfe6;
                    overflow:hidden
                  " 
                  @click="showImagePreview([item.good_info_img])"
                  :src="item.good_info_img"
                />
                <p class="font-[16px] font-700 py-[5px]">{{ item.good_name }}</p>
             </div>
             
            <div class="flex flex-col color-[#34495e] font-500" style="font-size: 13px">
              <div class="flex">
                <p  class="w-[65px] text-right pr-[5px]">审核状态:</p>
                <p>{{ tabListAll.find(({ value }) => item.status == value)?.label || '--' }}</p>
              </div>

              <div class="flex">
                <p class="w-[65px]  text-right pr-[5px]">SKU编号:</p>
                <p>{{ item.spuCode }}</p>
              </div>

              <template v-if="item.status != '1'">
                <div class="flex">
                  <p class="w-[65px]  text-right pr-[5px]">类目编码:</p>
                  <p>{{ item.in_tax_merge_code }}</p>
                </div>

                <div class="flex">
                  <p  class="w-[65px]  text-right pr-[5px]">类目名称:</p>
                  <p>{{ item.in_tax_name }}</p>
                </div>
              </template>

              <template v-else>
                <div class="flex">
                  <p class="w-[65px]  text-right pr-[5px]">类目编码:</p>
                  <p>{{ item.out_tax_merge_code }}</p>
                </div>

                <div class="flex">
                  <p  class="w-[65px]  text-right pr-[5px]">类目名称:</p>
                  <p>{{ item.out_tax_name }}</p>
                </div>

                
                <div class="flex">
                  <p  class="w-[65px]  text-right pr-[5px]">销项税率:</p>
                  <p>{{ String(item.out_tax).includes('%')  ? item.out_tax :  item.out_tax + '%'}}</p>
                </div>
              </template>

              <div class="flex">
                <p  class="w-[65px]  text-right pr-[5px]">工艺材质:</p>
                <p>{{ item.cost_desc }}</p>
              </div>
             </div>
           </div>
         </div>
        </div>
       </div>
    </List>
  </div>
</template>
