<script setup lang="ts">
import { useTitle } from "@vueuse/core"
import { requestSeekdetail, requestSeekstatus } from "~/service/modules/home"
import { useRoute, useRouter } from "vue-router"
import { onMounted , ref} from "vue"


import { 
  NavBar, 
  Button, 
  CellGroup, 
  Cell, 
  Image, 
  showLoadingToast, 
  closeToast, 
  Tag, 
  Dialog, 
  Field, 
  showFailToast, 
  showSuccessToast, 
  showConfirmDialog,
  showImagePreview 
} from "vant"

const route = useRoute()
const router = useRouter()

const tabList = [
  { value: '', label: '全部' },
  { value: '-1', label: '未到审核节点', type: 'warning' },
  { value: '0', label: '待财务审核', type: 'warning' },
  { value: '1', label: '财务审核后通过', type: 'success' },
  { value: '2', label: '财务审核后驳回', type: 'danger' },
  { value: '3', label: '无需审核', type: 'primary' },
]

const detail = ref<Record<string, any>>({})


const remark = ref('')
const visible = ref(false)

async function requestDetail(){
  showLoadingToast({ message: '加载中...', forbidClick: true })
  const { code, data } = await requestSeekdetail({ bidNo : route.query.id  })
  closeToast()
  if(code == 0){ detail.value = data }
}


async function handleNoStatus(){
  if(remark.value.trim().length === 0){
    visible.value = true
    showFailToast('请输入驳回原因!')
    return
  }

  showLoadingToast({ message: '审核中...', forbidClick: true })

  const { code } = await requestSeekstatus({
    "status": '2',
    "out_tax": "",
    "out_tax_id": "",
    "remark": remark.value,
    "bidNo": route.query.id,
    "goodCombind": []
  })

  if(code == 0){
    showSuccessToast('审核成功')
    visible.value = false
    requestDetail()
  }
}
 
function handleOkStatus(){
  showConfirmDialog({ title: '提示', message: '是否确认通过?' })
  .then(async () => {
    showLoadingToast({ message: '审核中...', forbidClick: true })
    const { code } = await requestSeekstatus({
      "status": '1',
      "out_tax": detail.value.tax + '%',
      "out_tax_id": detail.value.in_info.id,
      "remark": '',
      "bidNo": route.query.id,
      "goodCombind": []
    })

    if(code == 0){
      showSuccessToast('审核成功')
      visible.value = false
      requestDetail()
    }
  })
}

onMounted(requestDetail)

useTitle('商品列表')
</script>

<template>
  <div class="flex flex-col">
    <NavBar title="咨询商品详情" left-arrow @click="router.push('/home?path=seek' + (route.query.status ? '&status=' + route.query.status : ''))" />

    <CellGroup>
      <Cell title="商品图片">
        <template #value>
          <Image 
            style="height:25px; width:25px" 
            :src="detail.good_img && detail.good_img[0]"
            @click="() => showImagePreview(detail.good_img)"
          />
        </template>
      </Cell>
      <Cell title="商品名称" :value="detail.good_name"></Cell>
      <Cell title="商品编码" :value="detail.spuCode"></Cell>
      
      <Cell title="状态">
        <Tag class="mb-[5px]" size="large" :name="detail.value" :type="tabList.find(({ value }) => detail.tax_status == value)?.type">
          {{ tabList.find(({ value }) => detail.tax_status == value)?.label || '--' }}
         </Tag>
      </Cell>
      
      <Cell title="进项类目编号" :value="detail.in_info?.merge_code" />
      <Cell title="进项类目名称" :value="detail.in_info?.cat_name" />
      <Cell title="进项税率" :value="detail.tax + '%'" />
    </CellGroup>

    <div
      v-if="detail.tax_status == '0' && detail.spuCode.indexOf('SSU') === -1"
      class="fixed bottom-0 left-0 flex w-full my-[10px] bg-[#ffff]" 
    >
      <Button class="flex-1 mx-[10px]" type="warning" plain @click="visible = true">审核不通过</Button>
      <Button class="flex-1 mx-[10px]" type="warning" @click="handleOkStatus">审核通过</Button>
    </div>

    <Dialog v-model:show="visible" title="驳回原因">
      <Field
        v-model="remark"
        placeholder="驳回原因"
        type="textarea"
        rows="3" 
      />

      <template #footer>
        <div class="flex">
          <Button class="flex-1" @click="visible = false; remark = ''">取消</Button>
          <Button class="flex-1" type="warning" @click="handleNoStatus">保存</Button>
        </div>
      </template>
    </Dialog>
  </div>
</template>
