<script setup lang="ts">
import { ref } from "vue"
import { bargainColumns, productCreateDetail, rules } from "./config/_options"
import BasicDescriptions from "/@/components/BasicDescriptions"
import { httpDetail, httpCreate } from "/@/api/sellOut/stockApply"
import { useDetail } from "/@/hooks/core/useDetail"
import { useTask, useTasks } from "/@/hooks/core"
import { useRouter } from "vue-router"
import { ElForm } from "element-plus"
import Modal from "./modal.vue"


const formRef = ref<InstanceType<typeof ElForm> | null>(null)
const productDetail = ref(null)
const router = useRouter()

const visible = ref(false)
const { id, title, collapses, isDetail } = useDetail({ baseName: "备库单",  collapseLen: 5 });

const formData = ref({
  good_name: '',
  good_code: '',
  file_name: '',
  file_url: '',
  lastime: '',
  good_num: 0,
  remark: ''
})

const bkDetailTask = useTask({ initialData: {} })
const createTask = useTask({ success(){  router.push('/sellOut/stockApply') }})
const state = useTasks(bkDetailTask, createTask)

const requestBargainDetail = () => isDetail.value && bkDetailTask.run(httpDetail({ id: id.value }))
requestBargainDetail()

function handleProductConfirm(value){
  productDetail.value = value
  const { spuCode, good_name } = value
  formData.value = { ...formData.value, good_code: spuCode, good_name }
}

async function onSubmit(){
  try{
    await formRef.value.validate()
    createTask.run(httpCreate(formData.value))
  } catch(err) {
    console.log(err)
  }
}
</script>

<template>
  <div class="p-[10px] bg-white">
    <ElTabs v-loading="state.loading">
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <template v-if="isDetail">
            <ElCollapseItem name="1" :title="title" v-loading="bkDetailTask.loading">
              <BasicDescriptions :columns="bargainColumns" :data="bkDetailTask.data" />
            </ElCollapseItem>

            <ElCollapseItem name="2" title="采购反馈-设置入库的仓库" v-if="bkDetailTask.data.status == '1'">
              <BasicDescriptions
                :data="{}" 
                :columns="[]" 
              />
            </ElCollapseItem>
          </template>

          <ElCollapseItem 
            v-else 
            name="3" 
            title="新建备库申请单"
          >
            <ElForm
              ref="formRef"
              :rules="rules"
              :model="formData"
              label-width="100px" 
            >
              <ElRow :gutter="10">
                <ElCol :span="12">
                  <ElFormItem label="商品名称" prop="good_name">
                    <ElInput 
                      :modelValue="productDetail?.good_name" 
                      @click="visible = true"
                      placeholder="商品名称" 
                    />
                  </ElFormItem>
                </ElCol>

                <ElCol :span="5">
                  <ElFormItem label="采购数量" prop="good_num">
                    <ElInputNumber
                      style="width:100%"
                      controls-position="right"
                      v-model="formData.good_num"
                      placeholder="采购数量"
                      :min="0"
                    />
                  </ElFormItem>
                </ElCol>

                <ElCol :span="7">
                  <ElFormItem label-width="110px" label="最晚入库时间" prop="lastime">
                    <ElDatePicker
                      style="width: 100%"
                      :disabledDate="time => time.getTime() > Date.now()" 
                      v-model="formData.lastime" 
                      placeholder="最晚入库时间"  
                      value-format="YYYY-MM-DD" 
                    />
                  </ElFormItem>
                </ElCol>
              </ElRow>

              <ElRow>
                <ElCol :span="12" v-if="productDetail">
                  <ElFormItem>
                    <BasicDescriptions 
                      :columns="productCreateDetail"
                      :data="productDetail"
                    />
                  </ElFormItem>
                </ElCol>
                
                <ElCol :span="12">
                  <ElFormItem label="附件" prop="file_url">
                    <UploadFile v-model="formData.file_url" />
                  </ElFormItem>
                </ElCol>

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

              <ElRow class="flex justify-end w-full">
                <ElButton type="primary" @click="onSubmit">保存</ElButton>
              </ElRow>
            </ElForm>
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>

    <Modal 
      v-model:visible="visible" 
      @confirm="handleProductConfirm"
    />
  </div>
</template>
