<script setup lang="ts">
import { onMounted, ref } from "vue"
import BasicDescriptions from "/@/components/BasicDescriptions"
import { usePermission } from "/@/hooks/core/usePermission"
import { useDetail } from "/@/hooks/core/useDetail"
import { bargainColumns, productColumns, costColumns, bargainingColumns, rules } from "./config/_options"
import { httpDetail, httpPurchaseCostDetail, httpFileUpload, httpStatus } from "/@/api/sellOut/bargainList";
import { useTask } from "/@/hooks/core"

import { ElMessage, ElForm } from "element-plus"

import { getToken } from "/@/utils/auth";


const pageName = 'bargainListDetail'

const formRef = ref<InstanceType<typeof ElForm> | null>(null)
const { id, isDetail, title, collapses } = useDetail({
  baseName: "议价单",
  collapseLen: 5
});

const formData = ref({ state: '', adjunct: '', adjunct_name: '' ,remark: '' })

const uploadTask = useTask({ success(data){
  ElMessage.success('上传成功')
  formData.value.adjunct_name = data[0].name
  formData.value.adjunct = "http://cxinv.api.caixiao365.com/" + data[0].url
} })

const bargainTask = useTask({ initialData: {}, success(data: any){
  const { spuCode, status, remark, adjunct, adjunct_name } = data

  let state = status


  if(state === '0' || state === '2'){
    state = '0'
  } else {
    state = '1'
  }


  formData.value = { state, remark, adjunct, adjunct_name }
  productTask.run(httpPurchaseCostDetail({ spuCode }))
} })

const productTask = useTask({ initialData: {} })
const approval = useTask({ success: () => requestBargainDetail() })
const requestBargainDetail = () => bargainTask.run(httpDetail({ bargainNo: id.value }))
const { permissions } = usePermission(pageName)


async function handleUpload({ file }){
  const token = getToken()
  const uploadFormData = new FormData()
  uploadFormData.append('files', file)
  uploadFormData.append('token', token)
  uploadTask.run(httpFileUpload(uploadFormData))
}


async function handleApproval(){
  try{
    await formRef.value.validate()
    const { state: status, adjunct, adjunct_name, remark } = formData.value

    const paramtter = {
      remark,
      status,
      adjunct,
      adjunct_name,
      bargainNo: id.value
    }

    approval.run(httpStatus(paramtter))
  }catch(err){
    console.log(err)
  }
}

requestBargainDetail()
</script>

<template>
  <div class="p-[10px] bg-white">
    <ElTabs v-loading="bargainTask.loading">
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1" v-loading="bargainTask.loading">
            <BasicDescriptions :columns="bargainColumns" :data="bargainTask.data" />
          </ElCollapseItem>
          <ElCollapseItem title="商品信息" name="2" v-loading="productTask.loading">
            <BasicDescriptions :columns="productColumns" :data="productTask.data" />
          </ElCollapseItem>
          <ElCollapseItem title="商品成本信息" name="3" v-loading="productTask.loading" >
            <BasicDescriptions :columns="costColumns" :data="productTask.data" />
          </ElCollapseItem>
          <ElCollapseItem title="商品毛利信息" name="4" v-loading="bargainTask.loading">
            <BasicDescriptions :columns="bargainingColumns" :data="bargainTask.data" />
          </ElCollapseItem>

          <ElCollapseItem title="业务部门审批" name="5" v-loading="approval.loading">
            <ElForm label-width="80px" :model="formData" style="width: 500px" :rules="rules" :disabled="bargainTask.data.status !== '0'">
               <ElFormItem label="审核状态" prop="state">
                 <ElSelect style="width:100%" v-model="formData.state" placeholder="审核状态">
                   <ElOption value="0" label="驳回" />
                   <ElOption value="1" label="通过" />
                 </ElSelect>
               </ElFormItem>

               <ElFormItem label="备注" prop="remark">
                  <ElInput type="textarea" v-model="formData.remark" placeholder="备注" />
               </ElFormItem>

               <ElFormItem label="附件" prop="adjunct">
                 <div class="flex">
                   <div class="flex mr-[10px]">
                     <p v-if="!formData.adjunct_name">暂未上传文件</p>
                     <a v-else :src="formData.adjunct" target="_blank" :underline="false">{{ formData.adjunct_name }}</a>
                   </div>
                   <ElUpload :show-file-list="false" :before-upload="() => true"  accept=".pdf"  :http-request="handleUpload">
                     <template #trigger>
                       <ElButton type="primary" size="small">选择文件</ElButton>
                     </template>
                   </ElUpload>
                 </div>
               </ElFormItem>

               <ElFormItem>
                 <div class="w-full flex justify-end">
                  <ElButton type="primary" @click="handleApproval">提交</ElButton>
                 </div>
               </ElFormItem>
            </ElForm>
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
